Skip to content

Commit

Permalink
Fix whitespace handling inside CSS variables.
Browse files Browse the repository at this point in the history
As per w3c/csswg-drafts#881 and w3c/csswg-drafts#774.

Differential Revision: https://phabricator.services.mozilla.com/D116459

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1713787
gecko-commit: d55d07d3e8ccfa9a6bd619e5a1863927e45d3aae
gecko-reviewers: xidorn
  • Loading branch information
emilio authored and moz-wptsync-bot committed Jun 8, 2021
1 parent e5ead56 commit 198dd87
Show file tree
Hide file tree
Showing 16 changed files with 43 additions and 64 deletions.
2 changes: 1 addition & 1 deletion css/css-env/supports-script.tentative.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
assert_true(CSS.supports("background", "env(test, 10px)"));
assert_true(CSS.supports("background", "foobar(env(test))"));
assert_false(CSS.supports("background", "env()"));
assert_false(CSS.supports("background", "env(test,)"));
assert_true(CSS.supports("background", "env(test, )"));
});
</script>
</body>
Expand Down
4 changes: 2 additions & 2 deletions css/css-variables/css-variable-change-style-001.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@
initializeStyles();
inner.style.cssText = testcase.property + ': var(--x)';
testcase.values.forEach(function (value) {
outer.style.cssText = "--x:" + value.outer;
inbetween.style.cssText = "--x:" + value.inbetween;
outer.style.cssText = value.outer ? "--x:" + value.outer : "";
inbetween.style.cssText = value.inbetween ? "--x:" + value.inbetween : "";
let computedStyle = getComputedStyle(inner);
let actualValue = computedStyle.getPropertyValue(testcase.property);
assert_equals(actualValue, value.expected, value.Id);
Expand Down
6 changes: 3 additions & 3 deletions css/css-variables/variable-declaration-07.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having no tokens in its fallback.</title>
<title>CSS Test: Test declaring a variable with valid syntax due to a variable reference having no tokens in its fallback.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
--a: green;
--b: crimson;
--a: crimson;
--b: green;
--a: var(--b,);
color: var(--a);
}
Expand Down
6 changes: 3 additions & 3 deletions css/css-variables/variable-declaration-09.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having only a comment in its fallback.</title>
<title>CSS Test: Test declaring a variable with a variable reference having only a comment in its fallback.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
p {
color: red;
--a: green;
--b: crimson;
--a: crimson;
--b: green;
--a: var(--b,/**/);
color: var(--a);
}
Expand Down
21 changes: 0 additions & 21 deletions css/css-variables/variable-declaration-28.html

This file was deleted.

12 changes: 6 additions & 6 deletions css/css-variables/variable-definition.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,19 @@
{ varName:"--v", expectedValue:"value", style:"--v:value", testName:"single char variable"},
{ varName:"---", expectedValue:"value", style:"---:value", testName:"single char '-' variable"},
{ varName:"--", expectedValue:"", style:"--:value", testName:"no char variable"},
{ varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (single space)"},
{ varName:"--var", expectedValue:" ", style:"--var: ", testName:"white space value (double space)"},
{ varName:"--var", expectedValue:"", style:"--var: ", testName:"white space value (single space)"},
{ varName:"--var", expectedValue:"", style:"--var: ", testName:"white space value (double space)"},
{ varName:"--var", expectedValue:"value2", style:"--var:value1; --var:value2", testName:"overwrite"},
{ varName:"--var", expectedValue:"value", style:"--var:value;--var:;", testName:"can't overwrite with no value"},
{ varName:"--var", expectedValue:" ", style:"--var:value;--var: ;", testName:"can overwrite with space value"},
{ varName:"--var", expectedValue:"", style:"--var:value;--var:;", testName:"can't overwrite with no value"},
{ varName:"--var", expectedValue:"", style:"--var:value;--var: ;", testName:"can overwrite with space value"},
{ varName:"--var", expectedValue:"value1", style:"--var:value1; --Var:value2", testName:"case sensetivity"},
{ varName:"--Var", expectedValue:"value2", style:"--var:value1; --Var:value2", testName:"case sensetivity2"},
{ varName:"---var", expectedValue:"value", style:"---var:value;", testName:"parsing three dashes at start of variable"},
{ varName:"-var4" , expectedValue:"", style:"-var4:value3", testName:"parsing multiple dashes with one dash at start of variable"},
{ varName:"--var", expectedValue:" value", style:"--var: value", testName:" leading white space (single space)"},
{ varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (single space)"},
{ varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2", testName:" middle white space (single space)"},
{ varName:"--var", expectedValue:"value ", style:"--var:value ", testName:" trailing white space (single space)"},
{ varName:"--var", expectedValue:" value", style:"--var: value", testName:" leading white space (double space) 2"},
{ varName:"--var", expectedValue:"value", style:"--var: value", testName:" leading white space (double space) 2"},
{ varName:"--var", expectedValue:"value1 value2", style:"--var:value1 value2",testName:" middle white space (double space) 2"},
{ varName:"--var", expectedValue:"value ", style:"--var:value ", testName:" trailing white space (double space) 2"},
{ varName:"--var", expectedValue:"value1 ", style:"--var:value1 !important;", testName:"!important"},
Expand Down
6 changes: 3 additions & 3 deletions css/css-variables/variable-reference-06.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains no tokens.</title>
<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains no tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body {
--a: crimson;
--a: green;
color: red;
}
p {
color: green;
color: crimson;
color: var(--a,);
}
</style>
Expand Down
6 changes: 3 additions & 3 deletions css/css-variables/variable-reference-11.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains nothing but a comment.</title>
<title>CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains nothing but a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body {
--a: crimson;
--a: green;
color: red;
}
p {
color: green;
color: crimson;
color: var(--a,/**/);
}
</style>
Expand Down
2 changes: 1 addition & 1 deletion css/css-variables/variable-reference.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@
{ cssText: "width: var(--prop1, var(--prop2));", expectedPropertyValue: "var(--prop1, var(--prop2))" },
{ cssText: "width: var(--prop1, var(--prop2, var(--prop3, auto)));", expectedPropertyValue: "var(--prop1, var(--prop2, var(--prop3, auto)))" },
{ cssText: "width: var(--prop1) var(--prop2)", expectedPropertyValue: "var(--prop1) var(--prop2)" },
{ cssText: "width: var(--prop,);", expectedPropertyValue: "var(--prop,)" },

{ cssText: "width: var();", expectedPropertyValue: "" },
{ cssText: "width: var(prop);", expectedPropertyValue: "" },
{ cssText: "width: var(-prop);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop,);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop 20px);", expectedPropertyValue: "" },
{ cssText: "width: var(--prop, var(prop));", expectedPropertyValue: "" },
{ cssText: "width: var(--prop, var(-prop));", expectedPropertyValue: "" },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -101,23 +101,23 @@
"use strict";

var testcases = [
{ element: "target1", propertyName: "--var2", expectedPropertyValue: " 23px 13px 17px 10px" },
{ element: "target1", propertyName: "--var2", expectedPropertyValue: "23px 13px 17px 10px" },
{ element: "target1", propertyName: "margin-top", expectedPropertyValue: "23px" },
{ element: "target1", propertyName: "margin-right", expectedPropertyValue: "13px" },
{ element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "17px" },
{ element: "target1", propertyName: "margin-left", expectedPropertyValue: "10px" },

{ element: "target2parent", propertyName: "--var1", expectedPropertyValue: "" },
{ element: "target2parent", propertyName: "--var2", expectedPropertyValue: "" },
{ element: "target2", propertyName: "--var1", expectedPropertyValue: " good" },
{ element: "target2", propertyName: "--var1", expectedPropertyValue: "good" },
{ element: "target2", propertyName: "--var2", expectedPropertyValue: "" },

{ element: "target3", propertyName: "--var1", expectedPropertyValue: " 5px" },
{ element: "target3", propertyName: "--var2", expectedPropertyValue: " 5px" },
{ element: "target3", propertyName: "--var1", expectedPropertyValue: "5px" },
{ element: "target3", propertyName: "--var2", expectedPropertyValue: "5px" },

{ element: "target4", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target4", propertyName: "--varB", expectedPropertyValue: "" },
{ element: "target4", propertyName: "--varC", expectedPropertyValue: " 13px" },
{ element: "target4", propertyName: "--varC", expectedPropertyValue: "13px" },

{ element: "target5", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target5", propertyName: "--varB", expectedPropertyValue: "" },
Expand All @@ -132,9 +132,9 @@
{ element: "target7", propertyName: "--varC", expectedPropertyValue: "" },

{ element: "target8", propertyName: "--varA", expectedPropertyValue: "" },
{ element: "target8", propertyName: "--varB", expectedPropertyValue: " 7px" },
{ element: "target8", propertyName: "--varB", expectedPropertyValue: "7px" },

{ element: "target9", propertyName: "--varA", expectedPropertyValue: " good" },
{ element: "target9", propertyName: "--varA", expectedPropertyValue: "good" },
{ element: "target9", propertyName: "--varB", expectedPropertyValue: "" },
{ element: "target9", propertyName: "--varC", expectedPropertyValue: "" },

Expand All @@ -152,4 +152,4 @@
});
</script>
</body>
</html>
</html>
4 changes: 2 additions & 2 deletions css/css-variables/variable-supports-05.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens.</title>
<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (color: var(--a)) and (not (color: var(--a,))) {
@supports (color: var(--a)) and (color: var(--a,)) {
p { color: green; }
}
</style>
Expand Down
4 changes: 2 additions & 2 deletions css/css-variables/variable-supports-07.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens, just a comment.</title>
<title>CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens, just a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (color: var(--a)) and (not (color: var(--a,/**/))) {
@supports (color: var(--a)) and (color: var(--a,/**/)) {
p { color: green; }
}
</style>
Expand Down
4 changes: 2 additions & 2 deletions css/css-variables/variable-supports-37.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
<title>CSS Test: Test a custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a: var(--b,))) {
@supports (--a: a) and (--a: var(--b,)) {
p { color: green; }
}
</style>
Expand Down
4 changes: 2 additions & 2 deletions css/css-variables/variable-supports-39.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!DOCTYPE html>
<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
<title>CSS Test: Test a property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
<link rel="author" title="Cameron McCormack" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a: var(--b,/**/))) {
@supports (--a: a) and (--a: var(--b,/**/)) {
p { color: green; }
}
</style>
Expand Down
2 changes: 1 addition & 1 deletion css/css-variables/variable-supports-57.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<link rel="match" href="support/color-green-ref.html">
<style>
body { color: red; }
@supports (--a: a) and (not (--a:)) {
@supports (--a: a) and (--a:) {
p { color: green; }
}
</style>
Expand Down
8 changes: 4 additions & 4 deletions css/cssom/serialize-variable-reference.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
test(function() {
var elem = document.getElementById('longhand');

assert_equals(elem.style.cssText, 'font-size:var(--a);');
}, 'Longhand with variable preserves original serialization: without whitespace')
assert_equals(elem.style.cssText, 'font-size: var(--a);');
}, 'Longhand with variable preserves original serialization but trims whitespace: without whitespace')

test(function() {
var elem = document.getElementById('shorthand');

assert_equals(elem.style.cssText, 'font:var(--a);');
}, 'Shorthand with variable preserves original serialization: without whitespace')
assert_equals(elem.style.cssText, 'font: var(--a);');
}, 'Shorthand with variable preserves original serialization but trims whitespace: without whitespace')
</script>

0 comments on commit 198dd87

Please sign in to comment.