chrome/test/data/chromedriver/shadow_dom_test.html

   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 check behaviour with both nested roots and younger/older sibling roots.
   5 Default to pushing the content off the first screen, to test that scrolling to the elements works.
   6 <div id="padding"></div>
   7 <script>
   8 document.getElementById('padding').style.height = window.innerHeight;
   9 </script>
  10 <div id="outerDiv">
  11   <div id="innerDiv" style="border-style:solid;border-color:yellow">
  12     stuff
  13   </div>
  14 </div>
  15
  16 <template id="parentTemplate">
  17 <div id="parentDiv">
  18     <div style="border-style:solid;border-color:green">
  19     <H3>Parent</H3>
  20     <H4>Parent Contents</H4>
  21     <content></content>
  22     </div>
  23 </div>
  24 </template>
  25 <template id="olderChildTemplate">
  26 <div id="olderChildDiv">
  27     <div style="border-style:solid;border-color:red">
  28         <H3 id="olderHeading">Older Child</H3>
  29         As the older child of a nested shadow root, this is the most likely to go
  30         wrong bit of the page, so we'll concentrate our tests here.
  31         <H4>Older Child Contents Begin</H4>
  32         <content></content>
  33         <input id="olderTextBox" type="text" value="foo"/>
  34         <input type="button" onClick="buttonWasClicked()" onMouseOver="buttonWasHoveredOver()" value="button" id="olderButton"/>
  35     </div>
  36 </div>
  37 </template>
  38 <template id="youngerChildTemplate">
  39 <div id="youngerChildDiv">
  40     <div style="border-style:solid;border-color:blue">
  41         <H3>Younger Child</H3>
  42         <div style="border-style:dotted;border-color:blue">
  43             <H4>Younger Child Contents</H4>
  44             <content></content>
  45         </div>
  46         <div style="border-style:dashed;border-color:blue">
  47             <H4>Younger Child Shadow</H4>
  48             <shadow></shadow>
  49         </div>
  50     </div>
  51 </div>
  52 </template>
  53 <script type="text/javascript">var CLOSURE_NO_DEPS=true</script>
  54 <script type="text/javascript" src="../../../third_party/chromevox/third_party/closure-library/closure/goog/base.js"></script>
  55 <script type="text/javascript">
  56 var parentShadowRoot = document.querySelector('#innerDiv').createShadowRoot();
  57 parentShadowRoot.appendChild(document.querySelector('#parentTemplate').content.cloneNode(true));
  58 var olderShadowRoot = parentShadowRoot.querySelector("#parentDiv").createShadowRoot();
  59 olderShadowRoot.appendChild(document.querySelector('#olderChildTemplate').content.cloneNode(true));
  60 var youngerShadowRoot = parentShadowRoot.querySelector("#parentDiv").createShadowRoot();
  61 youngerShadowRoot.appendChild(document.querySelector('#youngerChildTemplate').content.cloneNode(true));
  62 function buttonWasClicked() {
  63   document.querySelector("* /deep/ #olderTextBox").value="Button Was Clicked";
  64 }
  65 function buttonWasHoveredOver() {
  66   document.querySelector("* /deep/ #olderTextBox").value="Button Was Hovered Over";
  67 }
  68 </script>
  69 </body>
  70 </html>