| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #host { |
| color: gray; |
| } |
| </style> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="resources/polyfill.js"></script> |
| <script> |
| function dumpComputedStyle(node) |
| { |
| debug(node.id + ": " + document.defaultView.getComputedStyle(node, null).getPropertyValue('color')); |
| } |
| |
| function preprocessForTest() |
| { |
| var parent = document.getElementById("parent"); |
| parent.innerHTML = '<div id="host"><span>Hello</span></div>'; |
| } |
| |
| function testSimpleContentCase() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var shadow = host.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testSimpleShadowCase() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var shadow = host.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<style>@host { div { color: red; } }</style><shadow></shadow>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testHostWithSelector() |
| { |
| var parent = document.getElementById("parent"); |
| parent.innerHTML = "<style scoped> .host { color: gray };</style>" |
| + "<div id='hostA' class='host'><span>Hello</span></div>" |
| + "<span id='hostB' class='host'><span>World</span></span>"; |
| |
| var hostA = document.getElementById("hostA"); |
| var shadowA = hostA.webkitCreateShadowRoot(); |
| var style = "<style>@host { div { color: red; } span { color: blue; } }</style>"; |
| shadowA.innerHTML = style + "<shadow></shadow>"; |
| |
| var hostB = document.getElementById("hostB"); |
| var shadowB = hostB.webkitCreateShadowRoot(); |
| shadowB.innerHTML = style + "<shadow></shadow>"; |
| |
| dumpComputedStyle(hostA); |
| dumpComputedStyle(hostB); |
| } |
| |
| function testPseudoHostWithScoped() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var shadow = host.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style scoped>@host { div { color: red; } }</style><shadow></shadow><div><style scoped>@host { div { color: blue; } }</style></div></div>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testPseudoHostWithFallbackShadow() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var oldestShadow = host.webkitCreateShadowRoot(); |
| var youngestShadow = host.webkitCreateShadowRoot(); |
| oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>"; |
| youngestShadow.innerHTML = "<content><shadow></shadow></content>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testTwoShadowRootsCase() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var oldestShadow = host.webkitCreateShadowRoot(); |
| var youngestShadow = host.webkitCreateShadowRoot(); |
| oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>"; |
| youngestShadow.innerHTML = "<style>@host { div { color: blue; } }</style><shadow></shadow>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testTwoShadowRootsCreatingDifferentOrderCase() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var oldestShadow = host.webkitCreateShadowRoot(); |
| var youngestShadow = host.webkitCreateShadowRoot(); |
| youngestShadow.innerHTML = "<style>@host { div { color: blue; } }</style><shadow></shadow>"; |
| oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testMultipleShadowRootsWithInertShadowContent() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var oldestShadow = host.webkitCreateShadowRoot(); |
| var olderShadow = host.webkitCreateShadowRoot(); |
| var youngerShadow = host.webkitCreateShadowRoot(); |
| var youngestShadow = host.webkitCreateShadowRoot(); |
| |
| youngestShadow.innerHTML = "<shadow></shadow>"; |
| youngerShadow.innerHTML = "<content></content>"; |
| olderShadow.innerHTML = "<style>@host { div { color: green; } }</style><shadow></shadow>"; |
| oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testMultipleShadowRootsWithInertShadow() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var oldestShadow = host.webkitCreateShadowRoot(); |
| var olderShadow = host.webkitCreateShadowRoot(); |
| var youngerShadow = host.webkitCreateShadowRoot(); |
| var youngestShadow = host.webkitCreateShadowRoot(); |
| |
| youngestShadow.innerHTML = "<style>@host { div { color: yellow; } }</style><shadow></shadow>"; |
| youngerShadow.innerHTML = "<style>@host { div { color: blue; } }</style><div>inert</div>"; |
| olderShadow.innerHTML = "<style>@host { div { color: green; } }</style><shadow></shadow>"; |
| oldestShadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testNestedCase() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| var outerShadow = host.webkitCreateShadowRoot(); |
| outerShadow.innerHTML = '<style>@host { div { color: red; } }</style><div id="nestedHost">InnerShadow</div>'; |
| var nested = outerShadow.getElementById("nestedHost"); |
| var innerShadow = nested.webkitCreateShadowRoot(); |
| innerShadow.innerHTML = '<style>@host { div { color: blue; } }</style>Show <shadow></shadow> in outer.'; |
| dumpComputedStyle(host); |
| dumpComputedStyle(nested); |
| } |
| |
| function testHostVsScopedStyle() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| host.innerHTML = "<style scoped>#host { color: yellow; }</style><span>Hello</span>"; |
| var shadow = host.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<style>@host { #host { color: red; } }</style><content></content>"; |
| dumpComputedStyle(host); |
| } |
| |
| function testHostVsInlineStyle() |
| { |
| preprocessForTest(); |
| var host = document.getElementById("host"); |
| host.style.color = "yellow"; |
| host.innerHTML = "<span>Hello</span>"; |
| var shadow = host.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<style>@host { div { color: red; } }</style><content></content>"; |
| dumpComputedStyle(host); |
| } |
| |
| function runTests() |
| { |
| testSimpleContentCase(); |
| testSimpleShadowCase(); |
| testHostWithSelector(); |
| testPseudoHostWithScoped(); |
| testPseudoHostWithFallbackShadow(); |
| testTwoShadowRootsCase(); |
| testTwoShadowRootsCreatingDifferentOrderCase(); |
| testMultipleShadowRootsWithInertShadowContent(); |
| testMultipleShadowRootsWithInertShadow(); |
| testNestedCase(); |
| testHostVsScopedStyle(); |
| testHostVsInlineStyle(); |
| } |
| </script> |
| </head> |
| <body onload="runTests()"> |
| <div id="parent"> |
| </div> |
| </body> |
| </html> |
