| OLD | NEW |
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 #target, #targetInShadow { | 5 #target, #targetInShadow { |
| 6 color: red; | 6 color: red; |
| 7 } | 7 } |
| 8 </style> | 8 </style> |
| 9 <script src="../../../resources/js-test.js"></script> | 9 <script src="../../../resources/js-test.js"></script> |
| 10 <script> | 10 <script> |
| (...skipping 28 matching lines...) Expand all Loading... |
| 39 styleForParent.scoped = true; | 39 styleForParent.scoped = true; |
| 40 styleForParent.innerHTML = "span { color: blue; }"; | 40 styleForParent.innerHTML = "span { color: blue; }"; |
| 41 document.getElementById("parent").appendChild(styleForParent); | 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."); | 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)"'); | 43 shouldBe("window.getComputedStyle(target).color", '"rgb(0, 0, 255)"'); |
| 44 | 44 |
| 45 var shadowRoot = target.createShadowRoot(); | 45 var shadowRoot = target.createShadowRoot(); |
| 46 shadowRoot.innerHTML = '<span id="targetInShadow" class="target"></span>'; | 46 shadowRoot.innerHTML = '<span id="targetInShadow" class="target"></span>'; |
| 47 var targetInShadow = shadowRoot.getElementById("targetInShadow"); | 47 var targetInShadow = shadowRoot.getElementById("targetInShadow"); |
| 48 shadowRoot.applyAuthorStyles = true; | 48 shadowRoot.applyAuthorStyles = true; |
| 49 // Disable style-inheritance from its shadow host to check whether rules match | |
| 50 // the span in the shadow tree or not. | |
| 51 shadowRoot.resetStyleInheritance = true; | |
| 52 debug("Test a span in some shadow dom tree. Since the span's host node is the ab
ove target, we have to see all inserted scoped styles and an author style to fin
d whether the styles have any matched rules or not."); | |
| 53 shouldBe("window.getComputedStyle(targetInShadow).color", '"rgb(0, 0, 255)"'); | |
| 54 | 49 |
| 55 var styleInShadow = document.createElement("style"); | 50 var styleInShadow = document.createElement("style"); |
| 56 styleInShadow.innerHTML = "span { color: lime; }"; | 51 styleInShadow.innerHTML = "span { color: lime; }"; |
| 57 shadowRoot.appendChild(styleInShadow); | 52 shadowRoot.appendChild(styleInShadow); |
| 58 debug("Append a new style element to the shadow root. The style's scoping elemen
t is the shadow root. Rules in the style should override other rules in ascendan
t (scoped) styles."); | 53 debug("Append a new style element to the shadow root. The style's scoping elemen
t is the shadow root. Rules in the style should override other rules in ascendan
t (scoped) styles."); |
| 59 shouldBe("window.getComputedStyle(targetInShadow).color", '"rgb(0, 255, 0)"'); | 54 shouldBe("window.getComputedStyle(targetInShadow).color", '"rgb(0, 255, 0)"'); |
| 60 | 55 |
| 61 </script> | 56 </script> |
| 62 </html> | 57 </html> |
| OLD | NEW |