| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <script src="../../dom/shadow/resources/polyfill.js"></script> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| shouldBeDefined("window.internals"); |
| |
| function dumpComputedStyle(node) |
| { |
| debug(node.id + ": " + document.defaultView.getComputedStyle(node, null).getPropertyValue('color')); |
| } |
| |
| function testScopedStyleInShadow() |
| { |
| debug("test a scoped style in shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style scoped>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testStyleInShadow() |
| { |
| debug("test a style in shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><div id='E'>EEE</div><style>div { color: red; }</style></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testStyleInMultipleShadow() |
| { |
| debug("test styles in multiple shadow subtrees."); |
| var div = document.createElement("div"); |
| |
| var shadow1 = div.webkitCreateShadowRoot(); |
| shadow1.innerHTML = "<div><style>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| |
| var shadow2 = div.webkitCreateShadowRoot(); |
| shadow2.innerHTML = "<div><style scoped>div { color: blue }</style><shadow></shadow><div id='G'>GGG</div></div>"; |
| |
| document.body.appendChild(div); |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow1.getElementById("E")); |
| dumpComputedStyle(shadow1.getElementById("F")); |
| dumpComputedStyle(shadow2.getElementById("G")); |
| document.body.removeChild(div); |
| } |
| |
| function testScopedStyleInNestedShadow() |
| { |
| debug("test a scoped style in nested shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow1 = div.webkitCreateShadowRoot(); |
| shadow1.innerHTML = "<div><style scoped>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| var e = shadow1.getElementById("E"); |
| var shadow2 = e.webkitCreateShadowRoot(); |
| shadow2.innerHTML = "<div><style scoped>div { color: blue; }</style><div id='G'>GGGG</div></div><div id='H'>HHHH</div>"; |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow1.getElementById("E")); |
| dumpComputedStyle(shadow1.getElementById("F")); |
| dumpComputedStyle(shadow2.getElementById("G")); |
| dumpComputedStyle(shadow2.getElementById("H")); |
| document.body.removeChild(div); |
| } |
| |
| function testStyleInNestedShadow() |
| { |
| debug("test a style in nested shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow1 = div.webkitCreateShadowRoot(); |
| shadow1.innerHTML = "<div><style>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| var e = shadow1.getElementById("E"); |
| var shadow2 = e.webkitCreateShadowRoot(); |
| shadow2.innerHTML = "<div><style>div { color: blue; }</style><div id='G'>GGGG</div></div><div id='H'>HHHH</div>"; |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow1.getElementById("E")); |
| dumpComputedStyle(shadow1.getElementById("F")); |
| dumpComputedStyle(shadow2.getElementById("G")); |
| dumpComputedStyle(shadow2.getElementById("H")); |
| document.body.removeChild(div); |
| } |
| |
| function testChangeScopedToScoped() |
| { |
| debug("test changing a style in shadow subtree from scoped to scoped."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| // before |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| |
| shadow.getElementById("style-in-shadow").setAttribute("scoped", "scoped"); |
| document.body.offsetLeft; |
| |
| // after |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testChangeScopedToNotScoped() |
| { |
| debug("test changing a style in shadow subtree from scoped to not-scoped."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| // before |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| |
| shadow.getElementById("style-in-shadow").removeAttribute("scoped"); |
| document.body.offsetLeft; |
| |
| // after |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testChangeNotScopedToScoped() |
| { |
| debug("test changing a style in shadow subtree from not-scoped to scoped."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| // before |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| |
| shadow.getElementById("style-in-shadow").setAttribute("scoped", "scoped"); |
| document.body.offsetLeft; |
| |
| // after |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testRemoveScopedStyleFromDocument() |
| { |
| debug("test removing a scoped style from shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| // before |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| |
| var styleInShadow = shadow.getElementById("style-in-shadow"); |
| styleInShadow.parentNode.removeChild(styleInShadow); |
| document.body.offsetLeft; |
| |
| // after |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testRemoveStyleFromDocument() |
| { |
| debug("test removing a style from shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| // before |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| |
| var styleInShadow = shadow.getElementById("style-in-shadow"); |
| styleInShadow.parentNode.removeChild(styleInShadow); |
| document.body.offsetLeft; |
| |
| // after |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testInsertScopedStyleIntoDocument() |
| { |
| debug("test inserting a scoped style into shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| var style = document.createElement("style"); |
| style.innerHTML = "div { color: red; }"; |
| style.setAttribute("scoped", "scoped"); |
| shadow.getElementById("E").parentNode.appendChild(style); |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testInsertStyleIntoDocument() |
| { |
| debug("test inserting a style into shadow subtree."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| var style = document.createElement("style"); |
| style.innerHTML = "div { color: red; }"; |
| shadow.getElementById("E").parentNode.appendChild(style); |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testChangeScopedToNotScopedNotInDocument() |
| { |
| debug("test re-inserting a style after changing scoped to not scoped offline."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style scoped id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| var style = shadow.getElementById("style-in-shadow"); |
| style.parentNode.removeChild(style); |
| style.removeAttribute("scoped"); |
| shadow.getElementById("E").parentNode.appendChild(style); |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function testChangeNotScopedToScopedNotInDocument() |
| { |
| debug("test re-inserting a style after changing not scoped to scoped offline."); |
| var div = document.createElement("div"); |
| document.body.appendChild(div); |
| var shadow = div.webkitCreateShadowRoot(); |
| shadow.innerHTML = "<div><style id='style-in-shadow'>div { color: red; }</style><div id='E'>EEE</div></div><div id='F'>FFF</div>"; |
| document.body.offsetLeft; |
| |
| var style = shadow.getElementById("style-in-shadow"); |
| style.parentNode.removeChild(style); |
| style.setAttribute("scoped", "scoped"); |
| shadow.getElementById("E").parentNode.appendChild(style); |
| document.body.offsetLeft; |
| |
| dumpComputedStyle(shadow.getElementById("E")); |
| dumpComputedStyle(shadow.getElementById("F")); |
| document.body.removeChild(div); |
| } |
| |
| function runTests() |
| { |
| testScopedStyleInShadow(); |
| testStyleInShadow(); |
| testStyleInMultipleShadow(); |
| testScopedStyleInNestedShadow(); |
| testStyleInNestedShadow(); |
| testChangeScopedToScoped(); |
| testChangeScopedToNotScoped(); |
| testChangeNotScopedToScoped(); |
| testRemoveScopedStyleFromDocument(); |
| testRemoveStyleFromDocument(); |
| testInsertScopedStyleIntoDocument(); |
| testInsertStyleIntoDocument(); |
| testChangeScopedToNotScopedNotInDocument(); |
| testChangeNotScopedToScopedNotInDocument(); |
| } |
| </script> |
| </head> |
| <body onload="runTests()"> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
