OLD | NEW |
1 <script> | 1 <!doctype html> |
2 if (window.testRunner) | 2 <head><script src="../../js/resources/js-test-pre.js"></script></head> |
3 testRunner.dumpAsText(); | |
4 </script> | |
5 | 3 |
6 <style> | 4 <style> |
7 pre { | 5 #test-target { |
8 var-stylesheet: pass; | 6 var-stylesheet: pass; |
9 } | 7 } |
10 </style> | 8 </style> |
11 | 9 |
12 <body> | 10 <body> |
13 | 11 <div style="var-inherited: pass"><div id="test-target" style="var-inline: pass">
</div></div> |
14 <pre style="var-inherited: pass"><pre id="pre" style="var-inline: pass"></pre></
pre> | |
15 | |
16 </body> | 12 </body> |
17 | 13 |
18 <script> | 14 <script> |
19 var pre = document.querySelector("#pre"); | 15 description('This tests Javascript access to CSS variables via getComputedStyle.
'); |
20 var preStyle = getComputedStyle(pre); | |
21 var bodyStyle = getComputedStyle(document.querySelector("body")); | |
22 pre.innerText += "Computed variables declaration: " + preStyle.var + "\n"; | |
23 | 16 |
24 pre.innerText += "Create variable: "; | 17 var computedStyle = getComputedStyle(document.querySelector("#test-target")); |
25 try { | 18 var computedBodyStyle = getComputedStyle(document.querySelector("body")); |
26 preStyle.var.set("create", "test"); | |
27 pre.innerText += "No exception thrown.\n"; | |
28 } | |
29 catch (exception) { | |
30 pre.innerText += exception + "\n"; | |
31 } | |
32 | 19 |
33 pre.innerText += "Count variables: " + preStyle.var.size + "\n"; | 20 shouldBeEqualToString('computedStyle.var.toString()', '[object CSSVariablesMap]'
); |
34 pre.innerText += "Count empty variables: " + bodyStyle.var.size + "\n"; | 21 shouldBe('computedStyle.var === computedStyle.var', 'true'); |
35 pre.innerText += "Read stylesheet variable: " + preStyle.var.get("stylesheet") +
"\n"; | 22 shouldThrow('computedStyle.var.set("create", "test")', '"NoModificationAllowedEr
ror: Failed to set the \'create\' property on a computed \'CSSStyleDeclaration\'
: computed styles are read-only."'); |
36 pre.innerText += "Read inherited variable: " + preStyle.var.get("inherited") + "
\n"; | 23 shouldBe('computedStyle.var.size', '3'); |
37 pre.innerText += "Read inline variable: " + preStyle.var.get("inline") + "\n"; | 24 shouldBe('computedBodyStyle.var.size', '0'); |
38 pre.innerText += "Read non-existent variable: " + (bodyStyle.var.get("test") ? "
fail" : "pass") + "\n"; | 25 shouldBeEqualToString('computedStyle.var.get("stylesheet")', 'pass'); |
| 26 shouldBeEqualToString('computedStyle.var.get("inherited")', 'pass'); |
| 27 shouldBeEqualToString('computedStyle.var.get("inline")', 'pass'); |
| 28 shouldBeEqualToString('computedBodyStyle.var.get("non-existent")', ''); |
39 | 29 |
40 pre.innerText += "Update variable: "; | 30 var forEachIterations = []; |
41 try { | 31 computedStyle.var.forEach(function(value, name, map) { |
42 preStyle.var.set("inline", "test"); | 32 forEachIterations.push([value, name, map.toString()]); |
43 pre.innerText += "No exception thrown (fail).\n"; | 33 }); |
44 } | 34 forEachIterations.sort(); |
45 catch (exception) { | 35 shouldBe('forEachIterations[0]', '["pass", "inherited", "[object CSSVariablesMap
]"]'); |
46 pre.innerText += exception + "\n"; | 36 shouldBe('forEachIterations[1]', '["pass", "inline", "[object CSSVariablesMap]"]
'); |
47 } | 37 shouldBe('forEachIterations[2]', '["pass", "stylesheet", "[object CSSVariablesMa
p]"]'); |
| 38 shouldBe('forEachIterations.length', '3'); |
48 | 39 |
49 pre.innerText += "Delete variable: " + (preStyle.var.delete("inline") ? "Deleted
" : "Not deleted") + "\n"; | 40 var emptyVarForEachIterations = []; |
| 41 computedBodyStyle.var.forEach(function(value, name, map) { |
| 42 emptyVarForEachIterations.push([value, name, map.toString()]); |
| 43 }); |
| 44 shouldBe('emptyVarForEachIterations.length', '0'); |
50 | 45 |
51 pre.innerText += "Clear variables: "; | 46 shouldThrow('computedStyle.var.set("inline", "fail")', '"NoModificationAllowedEr
ror: Failed to set the \'inline\' property on a computed \'CSSStyleDeclaration\'
: computed styles are read-only."'); |
52 try { | 47 shouldThrow('computedStyle.var.clear()', '"NoModificationAllowedError: Failed to
clear variables from a computed \'CSSStyleDeclaration\': computed styles are re
ad-only."'); |
53 preStyle.var.clear(); | 48 shouldBe('computedStyle.var.delete("inline")', 'false'); |
54 pre.innerText += "No exception thrown (fail).\n"; | 49 shouldBeEqualToString('computedStyle.var.get("inline")', 'pass'); |
55 } | |
56 catch (exception) { | |
57 pre.innerText += exception + "\n"; | |
58 } | |
59 | |
60 pre.innerText += "Set cssText: "; | |
61 try { | |
62 preStyle.cssText = "yay: !important;"; | |
63 pre.innerText += "No exception thrown (fail).\n"; | |
64 } | |
65 catch (exception) { | |
66 pre.innerText += exception + "\n"; | |
67 } | |
68 | |
69 pre.innerText += "Read deleted variable: " + preStyle.var.get("inline") + "\n"; | |
70 </script> | 50 </script> |
| 51 <script src="../../js/resources/js-test-post.js"></script> |
OLD | NEW |