OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #target, #targetInShadow { | |
6 color: red; | |
7 } | |
8 </style> | |
9 <script src="../../../resources/js-test.js"></script> | |
10 <script> | |
11 if (window.testRunner) | |
12 testRunner.dumpAsText(); | |
13 </script> | |
14 </head> | |
15 <body> | |
16 <div id="grandparent"> | |
17 <div id="parent"> | |
18 <span class="target" id="target"></span> | |
19 </div> | |
20 </div> | |
21 </body> | |
22 <script> | |
23 debug("Test whether scoped styles are applied in the cascade order or not."); | |
24 debug("If this test passes, rules which are declared in descendant scoping eleme
nt are applied to a target element."); | |
25 debug("c.f. https://bugs.webkit.org/show_bug.cgi?id=103239"); | |
26 | |
27 var target = document.getElementById("target"); | |
28 debug("Only document.style is applied to the target."); | |
29 shouldBe("window.getComputedStyle(target).color", '"rgb(255, 0, 0)"'); | |
30 | |
31 var styleForGrandparent = document.createElement("style"); | |
32 styleForGrandparent.scoped = true; | |
33 styleForGrandparent.innerHTML = ".target { color: yellow; }"; | |
34 document.getElementById("grandparent").appendChild(styleForGrandparent); | |
35 debug("A new scoped style is inserted into the grandparent node of the target. A
class rule in the inserted scoped style wins an id rule in document.style."); | |
36 shouldBe("window.getComputedStyle(target).color", '"rgb(255, 255, 0)"'); | |
37 | |
38 var styleForParent = document.createElement("style"); | |
39 styleForParent.scoped = true; | |
40 styleForParent.innerHTML = "span { color: blue; }"; | |
41 document.getElementById("parent").appendChild(styleForParent); | |
42 debug("A new scoped style is inserted into the parent node of the target. A tag
rule in the inserted scoped style wins an id rule and a class rule in existing s
tyles."); | |
43 shouldBe("window.getComputedStyle(target).color", '"rgb(0, 0, 255)"'); | |
44 | |
45 </script> | |
46 </html> | |
OLD | NEW |