| OLD | NEW |
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <head><script src="../../js/resources/js-test-pre.js"></script></head> |
| 2 | 3 |
| 3 <pre style="var-a: override me; var-a: apple; var-b: banana;"></pre> | 4 <div id="test-target" style="var-a: override me; var-a: apple; var-b: banana;"><
/div> |
| 4 | 5 |
| 5 <script> | 6 <script> |
| 6 if (window.testRunner) { | 7 description('This tests Javascript read access to CSS variables in inline styles
.'); |
| 7 window.testRunner.dumpAsText(); | |
| 8 } | |
| 9 | 8 |
| 10 var pre = document.querySelector("pre"); | 9 var div = document.querySelector('#test-target'); |
| 11 | 10 |
| 12 pre.innerText += "Inline style CSS text: " + pre.style.cssText + "\n"; | 11 shouldBeEqualToString('div.style.var.toString()', '[object CSSVariablesMap]'); |
| 13 pre.innerText += "\n"; | 12 shouldBe('div.style.var === div.style.var', 'true'); |
| 14 | 13 shouldBeEqualToString('div.style.cssText', 'var-a: apple; var-b: banana;'); |
| 15 pre.innerText += "Count vars: " + pre.style.var.size + "\n"; | 14 shouldBe('div.style.var.size', '2'); |
| 16 pre.innerText += "\n"; | 15 shouldBeEqualToString('div.style.var.get("a")', 'apple'); |
| 17 | 16 shouldBeEqualToString('div.style.var.get("b")', 'banana'); |
| 18 pre.innerText += "Access vars directly:\n"; | 17 shouldBeEqualToString('div.style.var.get("nonexistant")', ''); |
| 19 pre.innerText += "a: " + pre.style.var.get("a") + "\n"; | |
| 20 pre.innerText += "b: " + pre.style.var.get("b") + "\n"; | |
| 21 pre.innerText += "\n"; | |
| 22 | |
| 23 pre.innerText += "Access non existent var:\n"; | |
| 24 pre.innerText += "z: " + pre.style.var.get("z") + "\n"; | |
| 25 pre.innerText += "\n"; | |
| 26 | |
| 27 pre.innerText += "Setting c to carrot and d to dog...\n"; | |
| 28 pre.style.var.set("c", "carrot"); | |
| 29 pre.style.var.set("d", "dog"); | |
| 30 pre.innerText += "\n"; | |
| 31 | |
| 32 pre.innerText += "Count vars: " + pre.style.var.size + "\n"; | |
| 33 pre.innerText += "\n"; | |
| 34 | |
| 35 pre.innerText += "Access vars directly:\n"; | |
| 36 pre.innerText += "a: " + pre.style.var.get("a") + "\n"; | |
| 37 pre.innerText += "b: " + pre.style.var.get("b") + "\n"; | |
| 38 pre.innerText += "c: " + pre.style.var.get("c") + "\n"; | |
| 39 pre.innerText += "d: " + pre.style.var.get("d") + "\n"; | |
| 40 | 18 |
| 41 </script> | 19 </script> |
| 20 <script src="../../js/resources/js-test-post.js"></script> |
| OLD | NEW |