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 |