From 88bb0a1170e1d88cb8a6c85c2e8bef7fc52d2657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= Date: Mon, 7 Jun 2021 11:45:55 +0000 Subject: [PATCH] Fix whitespace handling inside CSS variables. 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 --- css/css-env/supports-script.tentative.html | 2 +- .../css-variable-change-style-001.html | 4 ++-- .../variable-declaration-07.html | 6 +++--- .../variable-declaration-09.html | 6 +++--- .../variable-declaration-28.html | 21 ------------------- css/css-variables/variable-definition.html | 12 +++++------ css/css-variables/variable-reference-06.html | 6 +++--- css/css-variables/variable-reference-11.html | 6 +++--- css/css-variables/variable-reference.html | 2 +- ...ble-substitution-variable-declaration.html | 16 +++++++------- css/css-variables/variable-supports-05.html | 4 ++-- css/css-variables/variable-supports-07.html | 4 ++-- css/css-variables/variable-supports-37.html | 4 ++-- css/css-variables/variable-supports-39.html | 4 ++-- css/css-variables/variable-supports-57.html | 2 +- css/cssom/serialize-variable-reference.html | 8 +++---- 16 files changed, 43 insertions(+), 64 deletions(-) delete mode 100644 css/css-variables/variable-declaration-28.html diff --git a/css/css-env/supports-script.tentative.html b/css/css-env/supports-script.tentative.html index 7ab4db23a373ac..fa14f17deed123 100644 --- a/css/css-env/supports-script.tentative.html +++ b/css/css-env/supports-script.tentative.html @@ -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, )")); }); diff --git a/css/css-variables/css-variable-change-style-001.html b/css/css-variables/css-variable-change-style-001.html index 798c7727a695c7..4db83738735b85 100644 --- a/css/css-variables/css-variable-change-style-001.html +++ b/css/css-variables/css-variable-change-style-001.html @@ -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); diff --git a/css/css-variables/variable-declaration-07.html b/css/css-variables/variable-declaration-07.html index ecd74b2d406579..0199c301d81e03 100644 --- a/css/css-variables/variable-declaration-07.html +++ b/css/css-variables/variable-declaration-07.html @@ -3,15 +3,15 @@ http://creativecommons.org/publicdomain/zero/1.0/ --> -CSS Test: Test declaring a variable with invalid syntax due to a variable reference having no tokens in its fallback. +CSS Test: Test declaring a variable with valid syntax due to a variable reference having no tokens in its fallback. -

This text must be green.

diff --git a/css/css-variables/variable-definition.html b/css/css-variables/variable-definition.html index ff0b2a4749aaca..5ad71f7f82a03f 100644 --- a/css/css-variables/variable-definition.html +++ b/css/css-variables/variable-definition.html @@ -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"}, diff --git a/css/css-variables/variable-reference-06.html b/css/css-variables/variable-reference-06.html index 464ce37ed99631..8b5771d934d836 100644 --- a/css/css-variables/variable-reference-06.html +++ b/css/css-variables/variable-reference-06.html @@ -3,17 +3,17 @@ http://creativecommons.org/publicdomain/zero/1.0/ --> -CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains no tokens. +CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains no tokens. diff --git a/css/css-variables/variable-reference-11.html b/css/css-variables/variable-reference-11.html index 81dec5a76c29ee..165e77f900c537 100644 --- a/css/css-variables/variable-reference-11.html +++ b/css/css-variables/variable-reference-11.html @@ -3,17 +3,17 @@ http://creativecommons.org/publicdomain/zero/1.0/ --> -CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains nothing but a comment. +CSS Test: Test declaring a non-custom property with a variable reference whose fallback contains nothing but a comment. diff --git a/css/css-variables/variable-reference.html b/css/css-variables/variable-reference.html index dc4ce73f3ad84a..fb3ae56ebcb318 100644 --- a/css/css-variables/variable-reference.html +++ b/css/css-variables/variable-reference.html @@ -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: "" }, diff --git a/css/css-variables/variable-substitution-variable-declaration.html b/css/css-variables/variable-substitution-variable-declaration.html index 0b0ab1f0f0f868..5239a05c3047fb 100644 --- a/css/css-variables/variable-substitution-variable-declaration.html +++ b/css/css-variables/variable-substitution-variable-declaration.html @@ -101,7 +101,7 @@ "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" }, @@ -109,15 +109,15 @@ { 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: "" }, @@ -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: "" }, @@ -152,4 +152,4 @@ }); - \ No newline at end of file + diff --git a/css/css-variables/variable-supports-05.html b/css/css-variables/variable-supports-05.html index 08a7e74967e417..858395bb1cf100 100644 --- a/css/css-variables/variable-supports-05.html +++ b/css/css-variables/variable-supports-05.html @@ -3,13 +3,13 @@ http://creativecommons.org/publicdomain/zero/1.0/ --> -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. +CSS Test: Test a non-custom property declaration in an @supports rule where the property value contains a variable reference having no fallback tokens. diff --git a/css/css-variables/variable-supports-07.html b/css/css-variables/variable-supports-07.html index d3bcc22ee2b615..895b20d0d7e257 100644 --- a/css/css-variables/variable-supports-07.html +++ b/css/css-variables/variable-supports-07.html @@ -3,13 +3,13 @@ http://creativecommons.org/publicdomain/zero/1.0/ --> -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. +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. diff --git a/css/css-variables/variable-supports-37.html b/css/css-variables/variable-supports-37.html index 828fb2f7f5bd14..6cfb626e09cffc 100644 --- a/css/css-variables/variable-supports-37.html +++ b/css/css-variables/variable-supports-37.html @@ -3,13 +3,13 @@ http://creativecommons.org/publicdomain/zero/1.0/ --> -CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens. +CSS Test: Test a custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens. diff --git a/css/css-variables/variable-supports-39.html b/css/css-variables/variable-supports-39.html index d67ac48f601bc7..ba02455d309520 100644 --- a/css/css-variables/variable-supports-39.html +++ b/css/css-variables/variable-supports-39.html @@ -3,13 +3,13 @@ http://creativecommons.org/publicdomain/zero/1.0/ --> -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. +CSS Test: Test a property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment. diff --git a/css/css-variables/variable-supports-57.html b/css/css-variables/variable-supports-57.html index 5cb8b33643917d..88b448a6b5cf2d 100644 --- a/css/css-variables/variable-supports-57.html +++ b/css/css-variables/variable-supports-57.html @@ -9,7 +9,7 @@ diff --git a/css/cssom/serialize-variable-reference.html b/css/cssom/serialize-variable-reference.html index 2b7e23ba6923b8..1d3cbad9e62971 100644 --- a/css/cssom/serialize-variable-reference.html +++ b/css/cssom/serialize-variable-reference.html @@ -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')