OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 span { | |
6 background-color: green; | |
7 } | |
8 </style> | |
9 <script src="../../../resources/js-test.js"></script> | |
10 </head> | |
11 <body> | |
12 <div> | |
13 <div> | |
14 <style id="existingStyle" scoped> | |
15 .target { background-color: red; } | |
16 </style> | |
17 <span id="target" class="target">Hello, World!</span> | |
18 </div> | |
19 </div> | |
20 </body> | |
21 <script> | |
22 description("Tests that <style scoped> is correctly applied after DOM oper
ations, i.e. insertBefore, appendChild, and removeChild."); | |
23 | |
24 var target = document.getElementById('target'); | |
25 | |
26 var existingStyle = document.getElementById('existingStyle'); | |
27 var newStyle = document.createElement('style'); | |
28 | |
29 newStyle.setAttribute('scoped', 'scoped'); | |
30 newStyle.innerHTML = ".target { background-color: blue; }"; | |
31 | |
32 debug("Insert a new scoped style before an existing scoped style."); | |
33 existingStyle.parentNode.insertBefore(newStyle, existingStyle); | |
34 shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(255, 0, 0)"'); | |
35 | |
36 debug("Move an inserted scoped style after an existing scoped style."); | |
37 existingStyle.parentNode.appendChild(newStyle); | |
38 shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(0, 0, 255)"'); | |
39 | |
40 debug("Move an inserted scoped style into grandparent of an existing scoped styl
e."); | |
41 document.body.children[0].appendChild(newStyle); | |
42 shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(255, 0, 0)"'); | |
43 | |
44 debug("Remove an inserted scoped style."); | |
45 newStyle.parentNode.removeChild(newStyle); | |
46 shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(255, 0, 0)"'); | |
47 | |
48 debug("Remove an existing scoped style."); | |
49 existingStyle.parentNode.removeChild(existingStyle); | |
50 shouldBe("window.getComputedStyle(target).backgroundColor", '"rgb(0, 128, 0)"'); | |
51 </script> | |
52 </html> | |
OLD | NEW |