| <!doctype html> |
| <html> |
| <head> |
| <style> |
| span { |
| text-align: top; |
| } |
| </style> |
| <script src="resources/polyfill.js"></script> |
| <script> |
| function testChildTextOfShadowRoot() { |
| var host = document.getElementById("host"); |
| var shadowRoot = host.webkitCreateShadowRoot(); |
| var span = document.createElement('span') |
| span.textContent = "foo"; |
| shadowRoot.appendChild(span); |
| shadowRoot.appendChild(document.createTextNode("bar")); |
| document.body.offsetLeft; |
| host.style.fontSize = '5em'; |
| } |
| |
| function testChildTextOfShadowRootWithResetStyleInheritance() { |
| var host = document.getElementById("hostResetStyleInheritance"); |
| var shadowRoot = host.webkitCreateShadowRoot(); |
| var span = document.createElement('span') |
| span.textContent = "foo"; |
| shadowRoot.appendChild(span); |
| shadowRoot.appendChild(document.createTextNode("bar")); |
| shadowRoot.resetStyleInheritance = true; |
| document.body.offsetLeft; |
| host.style.fontSize = '6em'; |
| } |
| |
| function testDistributedText() { |
| var host = document.getElementById("hostWithDistribution"); |
| var shadowRoot = host.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = "<span id='span1'><content></content></span>" |
| document.body.offsetLeft; |
| shadowRoot.getElementById("span1").style.fontSize = '5em'; |
| } |
| |
| function testDistributedTextWithResetStyleInheritance() { |
| var host = document.getElementById("hostResetStyleInheritanceWithDistribution"); |
| var shadowRoot = host.webkitCreateShadowRoot(); |
| shadowRoot.innerHTML = "<span id='span2'><content id='content'></content></span>" |
| shadowRoot.getElementById("content").resetStyleInheritance = true; |
| document.body.offsetLeft; |
| shadowRoot.getElementById("span2").style.fontSize = '6em'; |
| } |
| |
| function runTests() { |
| testChildTextOfShadowRoot(); |
| testChildTextOfShadowRootWithResetStyleInheritance(); |
| testDistributedText(); |
| testDistributedTextWithResetStyleInheritance(); |
| } |
| </script> |
| </head> |
| <body onload="runTests()"> |
| <!-- [bug 101116] Text nodes in shadow roots don't inherit style properly --> |
| <!-- https://bugs.webkit.org/show_bug.cgi?id=101116 --> |
| <div id="host"></div> |
| <div id="hostResetStyleInheritance"></div> |
| <div id="hostWithDistribution">Foo<span>Bar</span></div> |
| <div id="hostResetStyleInheritanceWithDistribution">Foo<span>Bar</span></div> |
| </body> |
| </html> |
