OLD | NEW |
(Empty) | |
| 1 <html> |
| 2 <body> |
| 3 <H1>Page for Shadow DOM chromedriver tests</H1> |
| 4 The page has a shadow root that in turn contains two shadow roots. So we can che
ck behaviour with both nested roots and younger/older sibling roots. |
| 5 <div id="outerDiv"> |
| 6 <div id="innerDiv"> |
| 7 stuff |
| 8 </div> |
| 9 </div> |
| 10 |
| 11 <template id="parentTemplate"> |
| 12 <div id="parentDiv""> |
| 13 <H3>Parent</H3> |
| 14 <H4>Contents</H4> |
| 15 <content></content> |
| 16 </div> |
| 17 </template> |
| 18 <template id="olderChildTemplate"> |
| 19 <div id="olderChildDiv""> |
| 20 <H3 id="olderHeading">Older Child</H3> |
| 21 As the older child of a nested shadow root, this is the most likely to go |
| 22 wrong bit of the page, so we'll concentrate our tests here. |
| 23 <H4>Contents</H4> |
| 24 <content></content> |
| 25 <input id="olderTextBox" type="text" value="foo"/> |
| 26 <input type="button" onClick="buttonWasClicked()" value="button" id="olderBu
tton" ); |
| 27 </div> |
| 28 </template> |
| 29 <template id="youngerChildTemplate"> |
| 30 <div id="youngerChildDiv"> |
| 31 <H3>Younger Child</H3> |
| 32 <H4>Contents</H4> |
| 33 <content></content> |
| 34 <H4>Shadow</H4> |
| 35 <shadow></shadow> |
| 36 </div> |
| 37 </template> |
| 38 <script>var CLOSURE_NO_DEPS=true</script> |
| 39 <script src="../../../third_party/chromevox/third_party/closure-library/closure/
goog/base.js"></script> |
| 40 <script> |
| 41 var parentShadowRoot = document.querySelector('#innerDiv').createShadowRoot(); |
| 42 parentShadowRoot.appendChild(document.querySelector('#parentTemplate').content.c
loneNode(true)); |
| 43 var olderShadowRoot = parentShadowRoot.querySelector("#parentDiv").createShadowR
oot(); |
| 44 olderShadowRoot.appendChild(document.querySelector('#olderChildTemplate').conten
t.cloneNode(true)); |
| 45 var youngerShadowRoot = parentShadowRoot.querySelector("#parentDiv").createShado
wRoot(); |
| 46 youngerShadowRoot.appendChild(document.querySelector('#youngerChildTemplate').co
ntent.cloneNode(true)); |
| 47 function buttonWasClicked() { |
| 48 document.querySelector("* /deep/ #olderTextBox").value="Button Was Clicked"; |
| 49 } |
| 50 </script> |
| 51 |
| 52 |
| 53 |
| 54 |
| 55 |
OLD | NEW |