variable-reference.html (3395B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Parse, store, and serialize CSS variable references</title> 5 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"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 14 <!-- 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. 17 --> 18 <style id="variable-reference-left-open"> 19 div 20 { 21 width: var(--prop</style> 22 </head> 23 <body> 24 25 <script type="text/javascript"> 26 "use strict"; 27 28 var testcases = [ 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)" }, 37 { cssText: "width: var(--prop,);", expectedPropertyValue: "var(--prop,)" }, 38 39 { cssText: "width: var();", 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: "" }, 47 ]; 48 49 testcases.forEach(function (testcase) { 50 test( function () { 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); 57 }, testcase.cssText); 58 }); 59 60 test( function() { 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"); 64 </script> 65 66 </body> 67 </html>