4 <title>Parse, store, and serialize CSS variable references
</title>
6 <meta rel=
"author" title=
"Kevin Babbitt">
7 <meta rel=
"author" title=
"Greg Whitworth">
8 <link rel=
"author" title=
"Microsoft Corporation" href=
"http://microsoft.com" />
9 <link rel=
"help" href=
"http://www.w3.org/TR/css-variables-1/#using-variables">
11 <script src=
"/resources/testharness.js"></script>
12 <script src=
"/resources/testharnessreport.js"></script>
15 https://drafts.csswg.org/css-syntax/#error-handling
16 If the stylesheet ends while any rule, declaration, function, string, etc. are still open, everything is automatically closed.
18 <style id=
"variable-reference-left-open">
21 width: var(--prop
</style>
25 <script type=
"text/javascript">
29 { cssText
: "width: var(--prop);", expectedPropertyValue
: "var(--prop)" },
30 { cssText
: "width: var(--prop) !important;", expectedPropertyValue
: "var(--prop)" },
31 { cssText
: "width: var(--prop, );", expectedPropertyValue
: "var(--prop, )" },
32 { cssText
: "width: var(--prop, 20px);", expectedPropertyValue
: "var(--prop, 20px)" },
33 { cssText
: "width: var(--prop, blue);", expectedPropertyValue
: "var(--prop, blue)" },
34 { cssText
: "width: var(--prop1, var(--prop2));", expectedPropertyValue
: "var(--prop1, var(--prop2))" },
35 { cssText
: "width: var(--prop1, var(--prop2, var(--prop3, auto)));", expectedPropertyValue
: "var(--prop1, var(--prop2, var(--prop3, auto)))" },
36 { cssText
: "width: var(--prop1) var(--prop2)", expectedPropertyValue
: "var(--prop1) var(--prop2)" },
38 { cssText
: "width: var();", expectedPropertyValue
: "" },
39 { cssText
: "width: var(prop);", expectedPropertyValue
: "" },
40 { cssText
: "width: var(-prop);", expectedPropertyValue
: "" },
41 { cssText
: "width: var(--prop,);", expectedPropertyValue
: "" },
42 { cssText
: "width: var(--prop 20px);", expectedPropertyValue
: "" },
43 { cssText
: "width: var(--prop, var(prop));", expectedPropertyValue
: "" },
44 { cssText
: "width: var(--prop, var(-prop));", expectedPropertyValue
: "" },
45 { cssText
: "width: var(20px);", expectedPropertyValue
: "" },
46 { cssText
: "width: var(var(--prop));", expectedPropertyValue
: "" },
49 testcases
.forEach(function (testcase
) {
51 var div
= document
.createElement("div");
52 document
.body
.appendChild(div
);
53 div
.style
.cssText
= testcase
.cssText
;
54 var actualPropertyValue
= div
.style
.getPropertyValue("width").trim();
55 assert_equals(actualPropertyValue
, testcase
.expectedPropertyValue
);
56 document
.body
.removeChild(div
);
61 var actualPropertyValue
= document
.getElementById("variable-reference-left-open").sheet
.cssRules
[0].style
.getPropertyValue("width").trim();
62 assert_equals(actualPropertyValue
, "var(--prop");
63 }, "Variable reference left open at end of stylesheet");