Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Gecko Bug 1713787] Fix whitespace handling inside CSS variables. #29255

Merged
merged 1 commit into from
Jun 8, 2021
Merged

[Gecko Bug 1713787] Fix whitespace handling inside CSS variables. #29255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/css-env/supports-script.tentative.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop

This file was deleted.

12 changes: 6 additions & 6 deletions css/css-variables/variable-definition.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
16 changes: 8 additions & 8 deletions css/css-variables/variable-substitution-variable-declaration.html
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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>