| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div.resetTest { |
| background-color: #eef; |
| color: #fee; |
| } |
| </style> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="resources/polyfill.js"></script> |
| <script> |
| function testNoResetStyleInheritance() { |
| debug("Test case: no reset-style-inheritance. color value should be inherited from the shadow host."); |
| var div = document.getElementById('no-reset-style-inheritance'); |
| |
| var shadowRoot = div.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = '<content id="content"></content>'; |
| |
| shadowRoot.getElementById('content').resetStyleInheritance = false; |
| shouldBe('window.getComputedStyle(document.getElementById("no-reset-style-inheritance").firstChild).color', '"rgb(255, 238, 238)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("no-reset-style-inheritance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function testResetStyleInheritance() { |
| debug("Test case: reset-style-inhertiace basic test. color value should be initial because insertion point's resetStyleInheritance is true."); |
| var div = document.getElementById('reset-style-inheritance'); |
| |
| var shadowRoot = div.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = '<content id="content"></content>'; |
| |
| shadowRoot.getElementById('content').resetStyleInheritance = true; |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance").firstChild).color', '"rgb(0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function testResetStyleInheritanceWithAttribute() { |
| debug("Test case: make a content element reset-style-inhertiace by using its attribute. color value should be initial because insertion point's resetStyleInheritance is true."); |
| var div = document.getElementById('reset-style-inheritance'); |
| |
| var shadowRoot = div.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = '<content id="content" reset-style-inheritance></content>'; |
| |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance").firstChild).color', '"rgb(0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function testShadowResetStyleInheritanceWithAttribute() { |
| debug("Test case: make a shadow element reset-style-inhertiace by using its attribute. color value should be initial because insertion point's resetStyleInheritance is true."); |
| var div = document.getElementById('reset-style-inheritance'); |
| |
| var shadowRoot = div.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = '<shadow id="content" reset-style-inheritance></content>'; |
| |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance").firstChild).color', '"rgb(0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function testResetStyleInheritanceDynamic() { |
| debug("Test case: reset-style-inhertiace changes dynamically. Firstly color value should be inherited. Next, initial. At last, inherited."); |
| var div = document.getElementById('reset-style-inheritance-dynamic'); |
| |
| var shadowRoot = div.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = '<content id="content"></content>'; |
| |
| shadowRoot.getElementById('content').resetStyleInheritance = false; |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance-dynamic").firstChild).color', '"rgb(255, 238, 238)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance-dynamic").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| |
| shadowRoot.getElementById('content').resetStyleInheritance = true; |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance-dynamic").firstChild).color', '"rgb(0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance-dynamic").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| |
| shadowRoot.getElementById('content').resetStyleInheritance = false; |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance-dynamic").firstChild).color', '"rgb(255, 238, 238)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("reset-style-inheritance-dynamic").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function testResetStyleInheritanceWithoutCrossingUpperBoundary() { |
| debug("Test case: the parent node of the distributed node is in the same shadow dom subtree as the insertion point. color value should be initial. reset-style-inheritance doesn't depend on whether parent style node is in the same treescope or not."); |
| var div = document.getElementById('reset-but-not-cross-upper-boundary'); |
| var shadowRoot = div.webkitCreateShadowRoot(); |
| |
| shadowRoot.innerHTML = '<div style="color:blue; background-color:green;"><content id="content"></content></div>'; |
| |
| shadowRoot.getElementById('content').resetStyleInheritance = true; |
| shouldBe('window.getComputedStyle(document.getElementById("reset-but-not-cross-upper-boundary").firstChild).color', '"rgb(0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("reset-but-not-cross-upper-boundary").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function testResetStyleInheritanceWithMultipleShadowRoots() { |
| 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."); |
| var div = document.getElementById('multiple-shadow-roots'); |
| var oldestShadowRoot = div.webkitCreateShadowRoot(); |
| oldestShadowRoot.innerHTML = '<content id="content"></content>'; |
| |
| var youngerShadowRoot = div.webkitCreateShadowRoot(); |
| youngerShadowRoot.innerHTML = '<shadow id="shadow"></shadow>'; |
| |
| var youngestShadowRoot = div.webkitCreateShadowRoot(); |
| youngestShadowRoot.innerHTML = '<shadow id="shadow"></shadow>'; |
| |
| oldestShadowRoot.getElementById('content').resetStyleInheritance = false; |
| youngerShadowRoot.getElementById('shadow').resetStyleInheritance = false; |
| youngestShadowRoot.getElementById('shadow').resetStyleInheritance = true; |
| shouldBe('window.getComputedStyle(document.getElementById("multiple-shadow-roots").firstChild).color', '"rgb(0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("multiple-shadow-roots").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function testResetStyleInheritanceWithMultipleInsertionPoints() { |
| debug("Test case: multiple insertion points in the same shadow dom subtree.. Each reset-style-inheritance should be checked."); |
| var div = document.getElementById('multiple-insertion-points'); |
| var oldestShadowRoot = div.webkitCreateShadowRoot(); |
| oldestShadowRoot.innerHTML = '<content id="content"></content>'; |
| |
| var youngestShadowRoot = div.webkitCreateShadowRoot(); |
| youngestShadowRoot.innerHTML = '<content select=":first-child" id="content"></content><shadow id="shadow"></shadow>'; |
| |
| youngestShadowRoot.getElementById('content').resetStyleInheritance = false; |
| youngestShadowRoot.getElementById('shadow').resetStyleInheritance = true; |
| |
| shouldBe('window.getComputedStyle(document.getElementById("multiple-insertion-points").firstChild).color', '"rgb(255, 238, 238)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("multiple-insertion-points").firstChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("multiple-insertion-points").lastChild).color', '"rgb(0, 0, 0)"'); |
| shouldBe('window.getComputedStyle(document.getElementById("multiple-insertion-points").lastChild).backgroundColor', '"rgba(0, 0, 0, 0)"'); |
| } |
| |
| function runTests() { |
| testNoResetStyleInheritance(); |
| testResetStyleInheritance(); |
| testResetStyleInheritanceWithAttribute(); |
| testShadowResetStyleInheritanceWithAttribute(); |
| testResetStyleInheritanceDynamic(); |
| testResetStyleInheritanceWithoutCrossingUpperBoundary() |
| testResetStyleInheritanceWithMultipleShadowRoots(); |
| testResetStyleInheritanceWithMultipleInsertionPoints(); |
| document.getElementById('test-cases').innerHTML = 'DONE'; |
| } |
| </script> |
| </head> |
| <body onload="runTests()"> |
| <div id="test-cases"> |
| <div id="no-reset-style-inheritance" class="resetTest"><span>first-child</span></div> |
| <div id="reset-style-inheritance" class="resetTest"><span>first-child</span></div> |
| <div id="reset-style-inheritance-dynamic" class="resetTest"><span>first-child</span></div> |
| <div id="reset-but-not-cross-upper-boundary" class="resetTest"><span>first-child</span></div> |
| <div id="multiple-shadow-roots" class="resetTest"><span>first-child</span></div> |
| <div id="multiple-insertion-points" class="resetTest"><span>first-child</span><span>last-child</span></div> |
| </div> |
| </body> |
| </html> |
