| 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 |