LayoutTests/imported/w3c/csswg-test/css-scoping-1/css-scoping-shadow-with-rules-no-style-leak.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>CSS Scoping Module Level 1 - a style rule inside a shadow tree doesn't affect the normal dom</title>
   5     <link rel="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"/>
   6     <link rel="help" href="http://www.w3.org/TR/css-scoping-1/#selectors-data-model">
   7     <link rel="match" href="reference/green-box.html"/>
   8 </head>
   9 <body>
  10     <style>
  11     my-host {
  12         display: block;
  13     }
  14     div {
  15         width: 100px;
  16         height: 100px;
  17         background: green;
  18         color:green;
  19     }
  20     </style>
  21     <p>Test passes if you see a single 100px by 100px green box below.</p>
  22     <my-host>
  23     </my-host>
  24     <div>FAIL</div>
  25     <script>
  26
  27     try {
  28         var shadowHost = document.querySelector('my-host');
  29         shadowRoot = shadowHost.attachShadow({mode: 'open'});
  30         shadowRoot.innerHTML = '<style> div { background: red; } </style>';
  31     } catch (exception) {
  32         document.body.appendChild(document.createTextNode(exception));
  33     }
  34
  35     </script>
  36 </body>
  37 </html>