OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <head><script src="../../../resources/js-test.js"></script></head> | 2 <head><script src="../../../resources/js-test.js"></script></head> |
3 | 3 |
4 <style> | 4 <style> |
5 #test-target { | 5 #test-target { |
6 var-stylesheet: pass; | 6 var-stylesheet: pass; |
7 } | 7 } |
8 </style> | 8 </style> |
9 | 9 |
10 <body> | 10 <body> |
11 <div style="var-inherited: pass"><div id="test-target" style="var-inline: pass">
</div></div> | 11 <div style="var-inherited: pass"><div id="test-target" style="var-inline: pass">
</div></div> |
12 </body> | 12 </body> |
13 | 13 |
14 <script> | 14 <script> |
15 description('This tests Javascript access to CSS variables via getComputedStyle.
'); | 15 description('This tests Javascript access to CSS variables via getComputedStyle.
'); |
16 | 16 |
17 var computedStyle = getComputedStyle(document.querySelector("#test-target")); | 17 var computedStyle = getComputedStyle(document.querySelector("#test-target")); |
18 var computedBodyStyle = getComputedStyle(document.querySelector("body")); | 18 var computedBodyStyle = getComputedStyle(document.querySelector("body")); |
19 | 19 |
20 shouldBeEqualToString('computedStyle.var.toString()', '[object CSSVariablesMap]'
); | 20 shouldBeEqualToString('computedStyle.var.toString()', '[object CSSVariablesMap]'
); |
21 shouldBe('computedStyle.var === computedStyle.var', 'true'); | 21 shouldBe('computedStyle.var === computedStyle.var', 'true'); |
22 shouldThrow('computedStyle.var.set("create", "test")', '"NoModificationAllowedEr
ror: Failed to set the \'create\' property on a computed \'CSSStyleDeclaration\'
: computed styles are read-only."'); | 22 shouldThrow('computedStyle.var.set("create", "test")', '"NoModificationAllowedEr
ror: Failed to execute \'set\' on \'CSSVariablesMap\': These styles are computed
, and therefore the \'create\' property is read-only."'); |
23 shouldBe('computedStyle.var.size', '3'); | 23 shouldBe('computedStyle.var.size', '3'); |
24 shouldBe('computedBodyStyle.var.size', '0'); | 24 shouldBe('computedBodyStyle.var.size', '0'); |
25 shouldBeEqualToString('computedStyle.var.get("stylesheet")', 'pass'); | 25 shouldBeEqualToString('computedStyle.var.get("stylesheet")', 'pass'); |
26 shouldBeEqualToString('computedStyle.var.get("inherited")', 'pass'); | 26 shouldBeEqualToString('computedStyle.var.get("inherited")', 'pass'); |
27 shouldBeEqualToString('computedStyle.var.get("inline")', 'pass'); | 27 shouldBeEqualToString('computedStyle.var.get("inline")', 'pass'); |
28 shouldBeEqualToString('computedBodyStyle.var.get("non-existent")', ''); | 28 shouldBeEqualToString('computedBodyStyle.var.get("non-existent")', ''); |
29 | 29 |
30 var forEachIterations = []; | 30 var forEachIterations = []; |
31 computedStyle.var.forEach(function(value, name, map) { | 31 computedStyle.var.forEach(function(value, name, map) { |
32 forEachIterations.push([value, name, map.toString()]); | 32 forEachIterations.push([value, name, map.toString()]); |
33 }); | 33 }); |
34 forEachIterations.sort(); | 34 forEachIterations.sort(); |
35 shouldBe('forEachIterations[0]', '["pass", "inherited", "[object CSSVariablesMap
]"]'); | 35 shouldBe('forEachIterations[0]', '["pass", "inherited", "[object CSSVariablesMap
]"]'); |
36 shouldBe('forEachIterations[1]', '["pass", "inline", "[object CSSVariablesMap]"]
'); | 36 shouldBe('forEachIterations[1]', '["pass", "inline", "[object CSSVariablesMap]"]
'); |
37 shouldBe('forEachIterations[2]', '["pass", "stylesheet", "[object CSSVariablesMa
p]"]'); | 37 shouldBe('forEachIterations[2]', '["pass", "stylesheet", "[object CSSVariablesMa
p]"]'); |
38 shouldBe('forEachIterations.length', '3'); | 38 shouldBe('forEachIterations.length', '3'); |
39 | 39 |
40 var emptyVarForEachIterations = []; | 40 var emptyVarForEachIterations = []; |
41 computedBodyStyle.var.forEach(function(value, name, map) { | 41 computedBodyStyle.var.forEach(function(value, name, map) { |
42 emptyVarForEachIterations.push([value, name, map.toString()]); | 42 emptyVarForEachIterations.push([value, name, map.toString()]); |
43 }); | 43 }); |
44 shouldBe('emptyVarForEachIterations.length', '0'); | 44 shouldBe('emptyVarForEachIterations.length', '0'); |
45 | 45 |
46 shouldThrow('computedStyle.var.set("inline", "fail")', '"NoModificationAllowedEr
ror: Failed to set the \'inline\' property on a computed \'CSSStyleDeclaration\'
: computed styles are read-only."'); | 46 shouldThrow('computedStyle.var.set("inline", "fail")', '"NoModificationAllowedEr
ror: Failed to execute \'set\' on \'CSSVariablesMap\': These styles are computed
, and therefore the \'inline\' property is read-only."'); |
47 shouldThrow('computedStyle.var.clear()', '"NoModificationAllowedError: Failed to
clear variables from a computed \'CSSStyleDeclaration\': computed styles are re
ad-only."'); | 47 shouldThrow('computedStyle.var.clear()', '"NoModificationAllowedError: Failed to
execute \'clear\' on \'CSSVariablesMap\': These styles are computed, and theref
ore variables may not be cleared."'); |
48 shouldBe('computedStyle.var.delete("inline")', 'false'); | 48 shouldBe('computedStyle.var.delete("inline")', 'false'); |
49 shouldBeEqualToString('computedStyle.var.get("inline")', 'pass'); | 49 shouldBeEqualToString('computedStyle.var.get("inline")', 'pass'); |
50 </script> | 50 </script> |
OLD | NEW |