test_variable_legal_values.html (4157B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Variables Allowed Syntax</title> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables"> 8 <meta name="assert" content='The <value> type used in the syntax above is defined as anything matching the "value" production in CSS 2.1 Chapter 4.1 [CSS21].'> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <style id="style"></style> 12 </head> 13 <body onload="run()"> 14 <div id=log></div> 15 <div id="test"></div> 16 <script> 17 setup({ "explicit_done": true }); 18 19 function run() { 20 // Setup the iframe 21 var style = document.getElementById("style"); 22 var styleText = document.createTextNode(""); 23 style.appendChild(styleText); 24 var test_cs = window.getComputedStyle(document.getElementById("test"), ""); 25 26 var initial_cs = test_cs.backgroundColor; 27 styleText.data = "#test { background-color: green }"; 28 var green_cs = test_cs.backgroundColor; 29 styleText.data = "#test { background-color: red }"; 30 var red_cs = test_cs.backgroundColor; 31 32 function description_to_name(description) { 33 return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, ""); 34 } 35 36 function assert_allowed_variable_value(value, description) { 37 test(function() { 38 styleText.data = "#test { \n" + 39 " --test: red;\n" + 40 " --test: " + value + ";\n" + 41 " background-color: red;\n" + 42 " background-color: var(--test);\n" + 43 "}"; 44 assert_not_equals(initial_cs, red_cs); 45 assert_equals(initial_cs, test_cs.backgroundColor); 46 }, 47 description_to_name(description)); 48 } 49 50 function assert_disallowed_balanced_variable_value(value, description) { 51 test(function() { 52 styleText.data = "#test { \n" + 53 " --test: green;\n" + 54 " --test: " + value + ";\n" + 55 " background-color: red;\n" + 56 " background-color: var(--test);\n" + 57 "}"; 58 assert_not_equals(green_cs, red_cs); 59 assert_equals(green_cs, test_cs.backgroundColor); 60 }, 61 description_to_name(description)); 62 } 63 64 assert_allowed_variable_value("25%", "percentage"); 65 assert_allowed_variable_value("37", "number"); 66 assert_allowed_variable_value("12em", "length"); 67 assert_allowed_variable_value("75ms", "time"); 68 assert_allowed_variable_value("foo()", "function"); 69 assert_allowed_variable_value("foo(bar())", "nested function"); 70 assert_allowed_variable_value("( )", "parentheses"); 71 assert_allowed_variable_value("{ }", "braces"); 72 assert_allowed_variable_value("[ ]", "brackets"); 73 assert_allowed_variable_value("@foobar", "at-keyword (unknown)"); 74 assert_allowed_variable_value("@media", "at-keyword (known)"); 75 assert_allowed_variable_value("@foobar {}", "at-keyword (unknown) and block"); 76 assert_allowed_variable_value("@media {}", "at-keyword (known) and block"); 77 assert_disallowed_balanced_variable_value("]", "unbalanced close bracket at toplevel"); 78 assert_disallowed_balanced_variable_value(")", "unbalanced close paren at toplevel"); 79 assert_disallowed_balanced_variable_value("(])", "unbalanced close bracket in something balanced"); 80 assert_disallowed_balanced_variable_value("[)]", "unbalanced close paren in something balanced"); 81 assert_disallowed_balanced_variable_value("(})", "unbalanced close brace in something balanced"); 82 assert_allowed_variable_value("<!--", "CDO at top level"); 83 assert_allowed_variable_value("-->", "CDC at top level"); 84 assert_allowed_variable_value("(;)", "semicolon not at top level (value -> unused)"); 85 assert_allowed_variable_value("(<!--)", "CDO not at top level (value -> unused)"); 86 assert_allowed_variable_value("(-->)", "CDC not at top level (value -> unused)"); 87 88 done(); 89 } 90 91 </script> 92 </body> 93 </html>