src/third_party/WebKit/LayoutTests/w3c/web-platform-tests/shadow-dom/shadow-trees/nested-shadow-trees/nested_tree_reftest.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8" >
   5     <title>Shadow DOM Test - Tests nested shadow tree.</title>
   6     <link rel="match" href="nested_tree_reftest-ref.html" >
   7     <link rel="author" title="shingo.miyazawa" href="mailto:kumatronik@gmail.com" >
   8     <link rel="help" href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#nested-shadow-trees" >
   9     <script src="../../testcommon.js"></script>
  10     <meta name="assert" content="nested shadow tree style is valid." >
  11     <style>
  12       #host {
  13         width: 100px;
  14         height: 100px;
  15         background-color: red;
  16       }
  17     </style>
  18   </head>
  19   <body>
  20     <p>The test passes if there is a green square. Test failed if there is a red square.</p>
  21     <div id='host'>
  22     </div>
  23     <script>
  24       var shadowRoot = document.getElementById('host').createShadowRoot();
  25       shadowRoot.innerHTML = '<div id="sub" style="width: 100%;height:100%;"></div>';
  26       var nestedRoot = shadowRoot.getElementById('sub').createShadowRoot();
  27       nestedRoot.innerHTML = '<div style="width:100%; height:100%;background-color: green;"></div>';
  28     </script>
  29   </body>
  30 </html>