test_variable_serialization_specified.html (4656B)
1 <!DOCTYPE html> 2 <title>Test serialization of specified CSS variable values</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css"> 5 6 <style id=style1>#test { }</style> 7 <style id=style2></style> 8 9 <script> 10 // Values that should be serialized back to the same string. 11 var values_with_unchanged_specified_value_serialization = [ 12 "var(--a)", 13 "var(--a)", 14 "var(--a, )", 15 "var(--a,/**/a)", 16 "1px var(--a)", 17 "var(--a) 1px", 18 "something 3px url(whereever) calc(var(--a) + 1px)", 19 "var(--a)", 20 "var(--a)var(--b)", 21 "var(--a, var(--b, var(--c, black)))", 22 "var(--a) <!--", 23 "--> var(--a)", 24 "{ [ var(--a) ] }", 25 "[;] var(--a)", 26 "var(--a,(;))", 27 "VAR(--a)", 28 "var(--0)", 29 "var(--\\30)", 30 "var(--\\d800)", 31 "var(--\\ffffff)", 32 ]; 33 34 var values_with_changed_specified_value_serialization = [ 35 // Values expected to be removed during the serialization process. 36 ["var(--a) ", "var(--a)"], 37 ["var( --a ) ", "var( --a )"], 38 // Values that serialize differently, due to additional implied closing 39 // characters at EOF. 40 ["var(--a", "var(--a)"], 41 ["var(--a , ", "var(--a , )"], 42 ["var(--a, ", "var(--a, )"], 43 ["var(--a, var(--b", "var(--a, var(--b))"], 44 ["var(--a /* unclosed comment", "var(--a /* unclosed comment*/)"], 45 ["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"], 46 ["[{(((var(--a", "[{(((var(--a))))}]"], 47 ["var(--a, \"unclosed string", "var(--a, \"unclosed string\")"], 48 ["var(--a, 'unclosed string", "var(--a, 'unclosed string')"], 49 ["var(--a) \"unclosed string\\", "var(--a) \"unclosed string\""], 50 ["var(--a) 'unclosed string\\", "var(--a) 'unclosed string'"], 51 ["var(--a) \\", "var(--a) \\\ufffd"], 52 ["var(--a) url(unclosedurl", "var(--a) url(unclosedurl)"], 53 ["var(--a) url('unclosedurl", "var(--a) url('unclosedurl')"], 54 ["var(--a) url(\"unclosedurl", "var(--a) url(\"unclosedurl\")"], 55 ["var(--a) url(unclosedurl\\", "var(--a) url(unclosedurl\\\ufffd)"], 56 ["var(--a) url('unclosedurl\\", "var(--a) url('unclosedurl')"], 57 ["var(--a) url(\"unclosedurl\\", "var(--a) url(\"unclosedurl\")"], 58 ]; 59 60 var style1 = document.getElementById("style1"); 61 var style2 = document.getElementById("style2"); 62 63 var decl = style1.sheet.cssRules[0].style; 64 65 function test_specified_value_serialization(value, expected) { 66 // Test setting value on a custom property with setProperty. 67 decl.setProperty("--test", value, ""); 68 is(decl.getPropertyValue("--test"), expected, 69 "value with identical serialization set on custom property with setProperty"); 70 71 // Test setting value on a custom property via style sheet parsing. 72 style2.textContent = "#test { --test:" + value; 73 is(style2.sheet.cssRules[0].style.getPropertyValue("--test"), expected, 74 "value with identical serialization set on custom property via parsing"); 75 76 // Test setting value on a non-custom longhand property with setProperty. 77 decl.setProperty("color", value, ""); 78 is(decl.getPropertyValue("color"), expected, 79 "value with identical serialization set on non-custom longhand property with setProperty"); 80 81 // Test setting value on a non-custom longhand property via style sheet parsing. 82 style2.textContent = "#test { color:" + value; 83 is(style2.sheet.cssRules[0].style.getPropertyValue("color"), expected, 84 "value with identical serialization set on non-custom longhand property via parsing"); 85 86 // Test setting value on a non-custom shorthand property with setProperty. 87 decl.setProperty("margin", value, ""); 88 is(decl.getPropertyValue("margin"), expected, 89 "value with identical serialization set on non-custom shorthand property with setProperty"); 90 91 // Test setting value on a non-custom shorthand property via style sheet parsing. 92 style2.textContent = "#test { margin:" + value; 93 is(style2.sheet.cssRules[0].style.getPropertyValue("margin"), expected, 94 "value with identical serialization set on non-custom shorthand property via parsing"); 95 96 // Clean up. 97 decl.removeProperty("--test"); 98 decl.removeProperty("color"); 99 decl.removeProperty("margin"); 100 } 101 102 function runTest() { 103 values_with_unchanged_specified_value_serialization.forEach(function(value) { 104 test_specified_value_serialization(value, value); 105 }); 106 107 values_with_changed_specified_value_serialization.forEach(function(pair) { 108 test_specified_value_serialization(pair[0], pair[1]); 109 }); 110 111 SimpleTest.finish(); 112 } 113 114 SimpleTest.waitForExplicitFinish(); 115 runTest(); 116 </script>