LayoutTests/fast/css/shadow-dom-scope.html

   1 <html>
   2 <head>
   3 <title>Selectors and Shadow Scopes</title>
   4 <style>
   5     input[type=range] {
   6         -webkit-appearance: none;
   7     }
   8 </style>
   9 <script>
  10
  11 if (window.layoutTestController)
  12     layoutTestController.dumpAsText();
  13
  14 var head;
  15 var input;
  16 var logDiv;
  17 var SELECTOR_TEST_PROPERTIES = ' { height: 1px; -webkit-appearance: none; }';
  18
  19 // convenience constants
  20 var MATCH = true;
  21 var NO_MATCH = false;
  22
  23 function log(msg, success)
  24 {
  25     logDiv.appendChild(document.createElement('div')).innerHTML = msg + ': ' + (success ? 'PASS' : 'FAIL');
  26 }
  27
  28 function runSelectorTest(matchExpected, selector)
  29 {
  30     var style = document.createElement('style');
  31     style.textContent = selector + SELECTOR_TEST_PROPERTIES;
  32     head.appendChild(style);
  33     var matched = input.offsetHeight == 1;
  34     log('<code>' + selector + '</code> <strong>should' + (matchExpected ? '' : ' not') + '</strong> match', matchExpected ? matched : !matched);
  35     head.removeChild(style);
  36 }
  37
  38 function runTest()
  39 {
  40     head = document.getElementsByTagName('head')[0];
  41     input = document.getElementsByTagName('input')[0];
  42     logDiv = document.getElementById('log');
  43     runSelectorTest(NO_MATCH, 'div');
  44     runSelectorTest(NO_MATCH, '*');
  45     runSelectorTest(NO_MATCH, 'body *');
  46     document.body.removeChild(input);
  47 }
  48
  49 </script>
  50 </head>
  51 <body onload="runTest()">
  52     <p>Tests whether and how selectors cross shadow DOM scopes.</p>
  53     <input id="foo" class="bar" style="height:auto" type="range">
  54     <div id="log"></div>
  55 </body>
  56 </html>