layout/reftests/webcomponents/nested-insertion-point-1.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4   <script>
   5     function tweak() {
   6       // div with style "border: 10px solid green"
   7       var outerShadow = document.createElement("div");
   8       outerShadow.style.border = "10px solid green";
   9
  10       var outerInsertionPoint = document.createElement("slot");
  11       outerShadow.appendChild(outerInsertionPoint);
  12
  13       // div with style "border: 10px solid orange"
  14       var innerShadow = document.createElement("div");
  15       innerShadow.style.border = "10px solid orange";
  16
  17       var slot = document.createElement("slot");
  18       innerShadow.appendChild(slot);
  19
  20       outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow);
  21
  22       var shadowRoot =
  23         document.getElementById('outer').attachShadow({mode: 'open'});
  24       shadowRoot.appendChild(outerShadow);
  25     }
  26   </script>
  27 </head>
  28 <body onload="tweak()">
  29 <div id="outer">Hello</div>
  30 </body>
  31 </html>