Suyeon Ji
eee5e20263
Automatic update from web-platform-tests Reland "Fix getPropertyValue() and setProperty() behavior for 'all'" This is a reland of commit dba0609c231bcea64dd43ed2ab79dc8f509e23e6 Reason of reland: This patch replaces the reordering of 'all' and its dependencies with RemovePropertiesAffectedByAll() to align spec. It also introduces bitflags to ensure no further regressions occur. This was also verified it on Linux, and the Pinpoint results are attached below. Pinpoint: [1] https://pinpoint-dot-chromeperf.appspot.com/job/17bb1976090000 [2] https://pinpoint-dot-chromeperf.appspot.com/job/161f2439090000 [3] https://pinpoint-dot-chromeperf.appspot.com/job/14ec220d090000 On my local Linux machine: Before After 1st 4956 runs/s 4948 runs/s 2nd 4949 runs/s 4960 runs/s 3rd 4962 runs/s 4955 runs/s 4th 4918 runs/s 4931 runs/s 5th 4942 runs/s 4928 runs/s avg 4945 runs/s 4945 runs/s Original change's description: > Fix getPropertyValue() and setProperty() behavior for 'all' > > According to the CSS spec[1], the 'all' property is a shorthand. > Shorthands, especially 'all', can reset all CSS properties (except 'direction', 'unicode-bidi', custom properties) to a given value. > > However, Chromium currently does not follow the spec. > First, setProperty('all') does not reset all properties. So when > querying properties affected by 'all', the correct value is not > returned. > Second, for a shorthand, getPropertyValue()[2] should return the > serialized value of its longhands, but currently 'all' does not > do this. > > This patch fixes the behavior to match the specification. > > [1]: https://drafts.csswg.org/css-cascade/#all-shorthand > [2]: https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertyvalue > > Bug: 388039764, 387828392 > Change-Id: Iaf1c7d6ca403dc57863ed72c5c79a5be4fc293c5 > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7579493 > Reviewed-by: Rune Lillesveen <futhark@chromium.org> > Reviewed-by: Jinho Bang <zino@chromium.org> > Commit-Queue: Jinho Bang <zino@chromium.org> > Cr-Commit-Position: refs/heads/main@{#1593609} Bug: 388039764, 387828392, 489370329, 489362269 Change-Id: Id6a0ddad9026221cb1db50830687143f9d394bb1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7637951 Reviewed-by: Jinho Bang <zino@chromium.org> Commit-Queue: Suyeon Ji <zeesuyeon@gmail.com> Reviewed-by: Steinar H Gunderson <sesse@chromium.org> Cr-Commit-Position: refs/heads/main@{#1606097} -- wpt-commits: 3733aab65ff1f01a806f75ae785cb77f2f87070a wpt-pr: 58806
218 lines
10 KiB
HTML
218 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSSOM Test: Passing "all" shorthand to property methods</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade/#all-shorthand">
|
|
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
const style = document.createElement("div").style;
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "width: 50px";
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert";
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
}, "getPropertyValue('all') returns css-wide keyword if possible");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert; width: 50px";
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string when single property overriden");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.setProperty("all", "revert");
|
|
assert_equals(style.getPropertyValue("width"), "revert");
|
|
assert_equals(style.getPropertyValue("color"), "revert");
|
|
}, "setProperty('all') sets all property values");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "width: 50px; color: green; direction: rtl";
|
|
assert_equals(style.getPropertyValue("width"), "50px");
|
|
assert_equals(style.getPropertyValue("color"), "green");
|
|
assert_equals(style.getPropertyValue("direction"), "rtl");
|
|
style.removeProperty("all");
|
|
assert_equals(style.getPropertyValue("width"), "");
|
|
assert_equals(style.getPropertyValue("color"), "");
|
|
assert_equals(style.getPropertyValue("direction"), "rtl");
|
|
}, "removeProperty('all') removes all declarations affected by 'all'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert";
|
|
style.removeProperty("all");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "removeProperty('all') removes an 'all' declaration");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "width: 50px; all: revert";
|
|
assert_equals(style.getPropertyValue("width"), "revert");
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
}, "getPropertyValue('all') returns css-wide keyword when 'all' overrides prior property");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert; width: 50px; all: unset";
|
|
assert_equals(style.getPropertyValue("width"), "unset");
|
|
assert_equals(style.getPropertyValue("all"), "unset");
|
|
}, "getPropertyValue('all') returns later 'all' value when it overrides earlier 'all' and properties");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "width: 50px; all: revert; width: 100px";
|
|
assert_equals(style.getPropertyValue("width"), "100px");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string when property overridden after 'all'");
|
|
|
|
test((t) => {
|
|
const sheet = new CSSStyleSheet();
|
|
sheet.insertRule(".foo { all: revert; width: 50px; }");
|
|
const style = sheet.cssRules[0].style;
|
|
assert_equals(style.getPropertyValue("width"), "50px");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string when single property overridden after 'all' via insertRule");
|
|
|
|
test((t) => {
|
|
const sheet = new CSSStyleSheet();
|
|
sheet.insertRule(".foo { width: 50px; all: revert; }");
|
|
const style = sheet.cssRules[0].style;
|
|
assert_equals(style.getPropertyValue("width"), "revert");
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
}, "getPropertyValue('all') returns css-wide keyword when 'all' overrides prior property via insertRule");
|
|
|
|
test((t) => {
|
|
const sheet = new CSSStyleSheet();
|
|
sheet.insertRule(".foo { all: revert; width: 50px; all: unset; }");
|
|
const style = sheet.cssRules[0].style;
|
|
assert_equals(style.getPropertyValue("width"), "unset");
|
|
assert_equals(style.getPropertyValue("all"), "unset");
|
|
}, "getPropertyValue('all') returns later 'all' value when it overrides earlier 'all' and properties via insertRule");
|
|
|
|
test((t) => {
|
|
const sheet = new CSSStyleSheet();
|
|
sheet.insertRule(".foo { width: 50px; all: revert; width: 100px; }");
|
|
const style = sheet.cssRules[0].style;
|
|
assert_equals(style.getPropertyValue("width"), "100px");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string when property overridden after 'all' via insertRule");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert";
|
|
style.setProperty("width", "50px");
|
|
assert_equals(style.getPropertyValue("width"), "50px");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string when single property overriden via setProperty");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert; width: 50px";
|
|
style.setProperty("all", "unset");
|
|
assert_equals(style.getPropertyValue("width"), "unset");
|
|
assert_equals(style.getPropertyValue("all"), "unset");
|
|
}, "setProperty('all') overrides existing properties and earlier 'all'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "width: 50px; all: revert";
|
|
style.setProperty("width", "100px");
|
|
assert_equals(style.getPropertyValue("width"), "100px");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string when property overridden after 'all' via setProperty");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert; margin: initial";
|
|
assert_equals(style.getPropertyValue("margin"), "initial");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string with shorthand 'margin'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "margin: initial; all: revert";
|
|
assert_equals(style.getPropertyValue("margin"), "revert");
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
}, "getPropertyValue('all') returns css-wide keyword when 'all' overrides shorthand 'margin'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert";
|
|
style.setProperty("margin", "initial");
|
|
assert_equals(style.getPropertyValue("margin"), "initial");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string with shorthand 'margin' via setProperty");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "margin: initial";
|
|
style.setProperty("all", "revert");
|
|
assert_equals(style.getPropertyValue("margin"), "revert");
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
}, "getPropertyValue('all') returns css-wide keyword when 'all' overrides shorthand 'margin' via setProperty");
|
|
|
|
test((t) => {
|
|
const sheet = new CSSStyleSheet();
|
|
sheet.insertRule(".foo { all: revert; margin: initial; }");
|
|
const style = sheet.cssRules[0].style;
|
|
assert_equals(style.getPropertyValue("margin"), "initial");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
}, "getPropertyValue('all') returns empty string with shorthand 'margin' via insertRule");
|
|
|
|
test((t) => {
|
|
const sheet = new CSSStyleSheet();
|
|
sheet.insertRule(".foo { margin: initial; all: revert; }");
|
|
const style = sheet.cssRules[0].style;
|
|
assert_equals(style.getPropertyValue("margin"), "revert");
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
}, "getPropertyValue('all') returns css-wide keyword when 'all' overrides shorthand 'margin' via insertRule");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "margin-top: 10px; all: revert";
|
|
assert_equals(style.getPropertyValue("margin"), "revert");
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
assert_equals(style.getPropertyValue("font"), "revert");
|
|
}, "getPropertyValue('margin') returns all's value when 'all' after 'margin-top'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "margin-top:10px; margin-right:20px; all: revert; margin-bottom:30px; margin-left:40px";
|
|
assert_equals(style.getPropertyValue("margin"), "");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
assert_equals(style.getPropertyValue("font"), "revert");
|
|
}, "getPropertyValue('margin') returns empty string when some of 'margin's longhands are overridden by 'all'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px";
|
|
assert_equals(style.getPropertyValue("margin"), "10px 20px 30px 40px");
|
|
assert_equals(style.getPropertyValue("all"), "");
|
|
assert_equals(style.getPropertyValue("font"), "revert");
|
|
}, "getPropertyValue('margin') returns serialized string when longhands are after 'all'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; all: revert";
|
|
assert_equals(style.getPropertyValue("margin"), "revert");
|
|
assert_equals(style.getPropertyValue("all"), "revert");
|
|
assert_equals(style.getPropertyValue("font"), "revert");
|
|
}, "getPropertyValue('margin') returns all's value when all of 'margin's longhands are overridden by 'all'");
|
|
|
|
test((t) => {
|
|
t.add_cleanup(() => { style.cssText = ""; } );
|
|
style.cssText = "all: revert; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; all: unset";
|
|
assert_equals(style.getPropertyValue("margin"), "unset");
|
|
assert_equals(style.getPropertyValue("all"), "unset");
|
|
assert_equals(style.getPropertyValue("font"), "unset");
|
|
}, "getPropertyValue('margin') returns all's value when 'all' is redeclared after margin longhands");
|
|
|
|
</script>
|