test_variable_serialization_computed.html (3169B)
1 <!DOCTYPE html> 2 <title>Test serialization of computed 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 <div> 7 <span></span> 8 </div> 9 10 <script> 11 // Each entry is an entire declaration followed by the property to check and 12 // its expected computed value. 13 var values = [ 14 ["", "--z", "an-inherited-value"], 15 ["--a: ", "--a", ""], 16 ["--a: initial", "--a", ""], 17 ["--z: initial", "--z", ""], 18 ["--a: inherit", "--a", ""], 19 ["--z: inherit", "--z", "an-inherited-value"], 20 ["--a: unset", "--a", ""], 21 ["--z: unset", "--z", "an-inherited-value"], 22 ["--a: 1px", "--a", "1px"], 23 ["--a: var(--a)", "--a", ""], 24 ["--a: var(--b)", "--a", ""], 25 ["--a: var(--b); --b: 1px", "--a", "1px"], 26 ["--a: var(--b, 1px)", "--a", "1px"], 27 ["--a: var(--a, 1px)", "--a", ""], 28 ["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""], 29 ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", "something 3px url(whereever) calc(1em + 1px)"], 30 ["--a: var(--b, var(--c, var(--d, Black)))", "--a", "Black"], 31 ["--a: a var(--b) c; --b:b", "--a", "a b c"], 32 ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", "a b c d e"], 33 ["--a: var(--b)red; --b:orange;", "--a", "orange/**/red"], 34 ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", "orange/**/red"], 35 ["--a: var(--b)var(--c,red); --b:orange;", "--a", "orange/**/red"], 36 ["--a: var(--b,orange)var(--c); --c:red;", "--a", "orange/**/red"], 37 ["--a: var(--b)-; --b:-;", "--a", "-/**/-"], 38 ["--a: var(--b)--; --b:-;", "--a", "-/**/--"], 39 ["--a: var(--b)--x; --b:-;", "--a", "-/**/--x"], 40 ["--a: var(--b)var(--c); --b:-; --c:-;", "--a", "-/**/-"], 41 ["--a: var(--b)var(--c); --b:--; --c:-;", "--a", "--/**/-"], 42 ["--a: var(--b)var(--c); --b:--x; --c:-;", "--a", "--x/**/-"], 43 ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"], 44 ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", "('ab')[c]"], 45 ["--a: '", "--a", "''"], 46 ["--a: '\\", "--a", "''"], 47 ["--a: \\", "--a", "\\\ufffd"], 48 ["--a: \"", "--a", "\"\""], 49 ["--a: \"\\", "--a", "\"\""], 50 ["--a: url(http://example.org/", "--a", "url(http://example.org/)"], 51 ["--a: url(http://example.org/\\", "--a", "url(http://example.org/\\\ufffd)"], 52 ["--a: url('http://example.org/", "--a", "url('http://example.org/')"], 53 ["--a: url('http://example.org/\\", "--a", "url('http://example.org/')"], 54 ["--a: url(\"http://example.org/", "--a", "url(\"http://example.org/\")"], 55 ["--a: url(\"http://example.org/\\", "--a", "url(\"http://example.org/\")"] 56 ]; 57 58 function runTest() { 59 var div = document.querySelector("div"); 60 var span = document.querySelector("span"); 61 62 div.setAttribute("style", "--z:an-inherited-value"); 63 64 values.forEach(function(entry, i) { 65 var declaration = entry[0]; 66 var property = entry[1]; 67 var expected = entry[2]; 68 span.setAttribute("style", declaration); 69 var cs = getComputedStyle(span, ""); 70 is(cs.getPropertyValue(property), expected, `subtest #${i}: ${declaration}`); 71 }); 72 73 SimpleTest.finish(); 74 } 75 76 SimpleTest.waitForExplicitFinish(); 77 runTest(); 78 </script>