| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 div.resetTest { | |
| 6 background-color: #eef; | |
| 7 color: #fee; | |
| 8 } | |
| 9 </style> | |
| 10 <script src="../../../resources/js-test.js"></script> | |
| 11 <script> | |
| 12 function testNoResetStyleInheritance() { | |
| 13 debug("Test case: no reset-style-inheritance. color value should be inherite
d from the shadow host."); | |
| 14 var div = document.getElementById('no-reset-style-inheritance'); | |
| 15 | |
| 16 var shadowRoot = div.createShadowRoot(); | |
| 17 shadowRoot.innerHTML = '<content id="content"></content>'; | |
| 18 | |
| 19 shadowRoot.getElementById('content').resetStyleInheritance = false; | |
| 20 shouldBe('window.getComputedStyle(document.getElementById("no-reset-style-in
heritance").firstChild).color', '"rgb(255, 238, 238)"'); | |
| 21 shouldBe('window.getComputedStyle(document.getElementById("no-reset-style-in
heritance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 22 } | |
| 23 | |
| 24 function testResetStyleInheritance() { | |
| 25 debug("Test case: reset-style-inhertiace basic test. color value should be i
nitial because insertion point's resetStyleInheritance is true."); | |
| 26 var div = document.getElementById('reset-style-inheritance'); | |
| 27 | |
| 28 var shadowRoot = div.createShadowRoot(); | |
| 29 shadowRoot.innerHTML = '<content id="content"></content>'; | |
| 30 | |
| 31 shadowRoot.getElementById('content').resetStyleInheritance = true; | |
| 32 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance").firstChild).color', '"rgb(0, 0, 0)"'); | |
| 33 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 34 } | |
| 35 | |
| 36 function testResetStyleInheritanceWithAttribute() { | |
| 37 debug("Test case: make a content element reset-style-inhertiace by using its
attribute. color value should be initial because insertion point's resetStyleIn
heritance is true."); | |
| 38 var div = document.getElementById('reset-style-inheritance'); | |
| 39 | |
| 40 var shadowRoot = div.createShadowRoot(); | |
| 41 shadowRoot.innerHTML = '<content id="content" reset-style-inheritance></cont
ent>'; | |
| 42 | |
| 43 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance").firstChild).color', '"rgb(0, 0, 0)"'); | |
| 44 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 45 } | |
| 46 | |
| 47 function testShadowResetStyleInheritanceWithAttribute() { | |
| 48 debug("Test case: make a shadow element reset-style-inhertiace by using its
attribute. color value should be initial because insertion point's resetStyleInh
eritance is true."); | |
| 49 var div = document.getElementById('reset-style-inheritance'); | |
| 50 | |
| 51 var shadowRoot = div.createShadowRoot(); | |
| 52 shadowRoot.innerHTML = '<shadow id="content" reset-style-inheritance><conten
t></content></shadow>'; | |
| 53 | |
| 54 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance").firstChild).color', '"rgb(0, 0, 0)"'); | |
| 55 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 56 } | |
| 57 | |
| 58 function testResetStyleInheritanceDynamic() { | |
| 59 debug("Test case: reset-style-inhertiace changes dynamically. Firstly color
value should be inherited. Next, initial. At last, inherited."); | |
| 60 var div = document.getElementById('reset-style-inheritance-dynamic'); | |
| 61 | |
| 62 var shadowRoot = div.createShadowRoot(); | |
| 63 shadowRoot.innerHTML = '<content id="content"></content>'; | |
| 64 | |
| 65 shadowRoot.getElementById('content').resetStyleInheritance = false; | |
| 66 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance-dynamic").firstChild).color', '"rgb(255, 238, 238)"'); | |
| 67 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance-dynamic").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 68 | |
| 69 shadowRoot.getElementById('content').resetStyleInheritance = true; | |
| 70 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance-dynamic").firstChild).color', '"rgb(0, 0, 0)"'); | |
| 71 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance-dynamic").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 72 | |
| 73 shadowRoot.getElementById('content').resetStyleInheritance = false; | |
| 74 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance-dynamic").firstChild).color', '"rgb(255, 238, 238)"'); | |
| 75 shouldBe('window.getComputedStyle(document.getElementById("reset-style-inher
itance-dynamic").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 76 } | |
| 77 | |
| 78 function testResetStyleInheritanceWithoutCrossingUpperBoundary() { | |
| 79 debug("Test case: the parent node of the distributed node is in the same sha
dow dom subtree as the insertion point. color value should be initial. reset-sty
le-inheritance doesn't depend on whether parent style node is in the same treesc
ope or not."); | |
| 80 var div = document.getElementById('reset-but-not-cross-upper-boundary'); | |
| 81 var shadowRoot = div.createShadowRoot(); | |
| 82 | |
| 83 shadowRoot.innerHTML = '<div style="color:blue; background-color:green;"><co
ntent id="content"></content></div>'; | |
| 84 | |
| 85 shadowRoot.getElementById('content').resetStyleInheritance = true; | |
| 86 shouldBe('window.getComputedStyle(document.getElementById("reset-but-not-cro
ss-upper-boundary").firstChild).color', '"rgb(0, 0, 0)"'); | |
| 87 shouldBe('window.getComputedStyle(document.getElementById("reset-but-not-cro
ss-upper-boundary").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 88 } | |
| 89 | |
| 90 function testResetStyleInheritanceWithMultipleShadowRoots() { | |
| 91 debug("Test case: reset-style-inheritance with multiple shadow roots. color
value should be initial, because reset-style-inheritance of the insertion point
in the youngest shadow root is true."); | |
| 92 var div = document.getElementById('multiple-shadow-roots'); | |
| 93 var oldestShadowRoot = div.createShadowRoot(); | |
| 94 oldestShadowRoot.innerHTML = '<content id="content"></content>'; | |
| 95 | |
| 96 var youngerShadowRoot = div.createShadowRoot(); | |
| 97 youngerShadowRoot.innerHTML = '<shadow id="shadow"><content></content></shad
ow>'; | |
| 98 | |
| 99 var youngestShadowRoot = div.createShadowRoot(); | |
| 100 youngestShadowRoot.innerHTML = '<shadow id="shadow"><content></content></sha
dow>'; | |
| 101 | |
| 102 oldestShadowRoot.getElementById('content').resetStyleInheritance = false; | |
| 103 youngerShadowRoot.getElementById('shadow').resetStyleInheritance = false; | |
| 104 youngestShadowRoot.getElementById('shadow').resetStyleInheritance = true; | |
| 105 shouldBe('window.getComputedStyle(document.getElementById("multiple-shadow-r
oots").firstChild).color', '"rgb(0, 0, 0)"'); | |
| 106 shouldBe('window.getComputedStyle(document.getElementById("multiple-shadow-r
oots").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 107 } | |
| 108 | |
| 109 function testResetStyleInheritanceWithMultipleInsertionPoints() { | |
| 110 debug("Test case: multiple insertion points in the same shadow dom subtree..
Each reset-style-inheritance should be checked."); | |
| 111 var div = document.getElementById('multiple-insertion-points'); | |
| 112 var oldestShadowRoot = div.createShadowRoot(); | |
| 113 oldestShadowRoot.innerHTML = '<content id="content"></content>'; | |
| 114 | |
| 115 var youngestShadowRoot = div.createShadowRoot(); | |
| 116 youngestShadowRoot.innerHTML = '<content select=":first-child" id="content">
</content><shadow id="shadow"><content></content></shadow>'; | |
| 117 | |
| 118 youngestShadowRoot.getElementById('content').resetStyleInheritance = false; | |
| 119 youngestShadowRoot.getElementById('shadow').resetStyleInheritance = true; | |
| 120 | |
| 121 shouldBe('window.getComputedStyle(document.getElementById("multiple-insertio
n-points").firstChild).color', '"rgb(255, 238, 238)"'); | |
| 122 shouldBe('window.getComputedStyle(document.getElementById("multiple-insertio
n-points").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 123 shouldBe('window.getComputedStyle(document.getElementById("multiple-insertio
n-points").lastChild).color', '"rgb(0, 0, 0)"'); | |
| 124 shouldBe('window.getComputedStyle(document.getElementById("multiple-insertio
n-points").lastChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); | |
| 125 } | |
| 126 | |
| 127 function runTests() { | |
| 128 testNoResetStyleInheritance(); | |
| 129 testResetStyleInheritance(); | |
| 130 testResetStyleInheritanceWithAttribute(); | |
| 131 testShadowResetStyleInheritanceWithAttribute(); | |
| 132 testResetStyleInheritanceDynamic(); | |
| 133 testResetStyleInheritanceWithoutCrossingUpperBoundary() | |
| 134 testResetStyleInheritanceWithMultipleShadowRoots(); | |
| 135 testResetStyleInheritanceWithMultipleInsertionPoints(); | |
| 136 document.getElementById('test-cases').innerHTML = 'DONE'; | |
| 137 } | |
| 138 </script> | |
| 139 </head> | |
| 140 <body onload="runTests()"> | |
| 141 <div id="test-cases"> | |
| 142 <div id="no-reset-style-inheritance" class="resetTest"><span>first-child</span
></div> | |
| 143 <div id="reset-style-inheritance" class="resetTest"><span>first-child</span></
div> | |
| 144 <div id="reset-style-inheritance-dynamic" class="resetTest"><span>first-child<
/span></div> | |
| 145 <div id="reset-but-not-cross-upper-boundary" class="resetTest"><span>first-chi
ld</span></div> | |
| 146 <div id="multiple-shadow-roots" class="resetTest"><span>first-child</span></di
v> | |
| 147 <div id="multiple-insertion-points" class="resetTest"><span>first-child</span>
<span>last-child</span></div> | |
| 148 </div> | |
| 149 </body> | |
| 150 </html> | |
| OLD | NEW |