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 24 matching lines...) Expand all Loading... |
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."); | 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)"'); | 36 shouldBe("window.getComputedStyle(target).color", '"rgb(255, 255, 0)"'); |
37 | 37 |
38 var styleForParent = document.createElement("style"); | 38 var styleForParent = document.createElement("style"); |
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(); | |
46 shadowRoot.innerHTML = '<span id="targetInShadow" class="target"></span>'; | |
47 var targetInShadow = shadowRoot.getElementById("targetInShadow"); | |
48 shadowRoot.applyAuthorStyles = true; | |
49 | |
50 var styleInShadow = document.createElement("style"); | |
51 styleInShadow.innerHTML = "span { color: lime; }"; | |
52 shadowRoot.appendChild(styleInShadow); | |
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."); | |
54 shouldBe("window.getComputedStyle(targetInShadow).color", '"rgb(0, 255, 0)"'); | |
55 | |
56 </script> | 45 </script> |
57 </html> | 46 </html> |
OLD | NEW |