shadow_dom_test.html | Explore in Territory

<html>
<body>
<H1>Page for Shadow DOM chromedriver tests</H1>
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.
Default to pushing the content off the first screen, to test that scrolling to the elements works.
<div id="padding"></div>
<script>
document.getElementById('padding').style.height = window.innerHeight;
</script>
<div id="outerDiv">
  <div id="innerDiv" style="border-style:solid;border-color:yellow">
    <span id="hostContent" slot="parentSlot">stuff</span>
  </div>
</div>

<template id="parentTemplate">
<div id="parentDiv">
  <div slot="childSlot">
    <div style="border-style:solid;border-color:green">
    <H3>Parent</H3>
    <H4>Parent Contents</H4>
    <slot name="parentSlot"></slot>
    </div>
  </div>
</div>
</template>
<template id="childTemplate">
<div id="childDiv">
    <div style="border-style:solid;border-color:red">
        <H3 id="heading">Child</H3>
        <H4>Child Contents</H3>
        <slot name="childSlot"></slot>
        <input id="textBox" type="text" value="foo"/>
        <input type="button" onClick="buttonWasClicked()" onMouseOver="buttonWasHoveredOver()" value="button" id="button"/>
    </div>
</div>
</template>
<script type="text/javascript">
var parentShadowRoot = document.querySelector('#innerDiv').attachShadow({mode: 'open'});
parentShadowRoot.appendChild(document.querySelector('#parentTemplate').content.cloneNode(true));
var childShadowRoot = parentShadowRoot.querySelector("#parentDiv").attachShadow({mode: 'open'});
childShadowRoot.appendChild(document.querySelector('#childTemplate').content.cloneNode(true));
function buttonWasClicked() {
  childShadowRoot.querySelector("#textBox").value="Button Was Clicked";
}
function buttonWasHoveredOver() {
  childShadowRoot.querySelector("#textBox").value="Button Was Hovered Over";
}
</script>
</body>
</html>
chromium/chrome/test/data/chromedriver/shadow_dom_test.html
