| <html> |
| <head> |
| <title>Selectors and Shadow Scopes</title> |
| <style> |
| input[type=range] { |
| -webkit-appearance: none; |
| } |
| </style> |
| <script> |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var head; |
| var input; |
| var logDiv; |
| var SELECTOR_TEST_PROPERTIES = ' { height: 1px; -webkit-appearance: none; }'; |
| |
| // convenience constants |
| var MATCH = true; |
| var NO_MATCH = false; |
| |
| function log(msg, success) |
| { |
| logDiv.appendChild(document.createElement('div')).innerHTML = msg + ': ' + (success ? 'PASS' : 'FAIL'); |
| } |
| |
| function runSelectorTest(matchExpected, selector) |
| { |
| var style = document.createElement('style'); |
| style.textContent = selector + SELECTOR_TEST_PROPERTIES; |
| head.appendChild(style); |
| var matched = input.offsetHeight == 1; |
| log('<code>' + selector + '</code> <strong>should' + (matchExpected ? '' : ' not') + '</strong> match', matchExpected ? matched : !matched); |
| head.removeChild(style); |
| } |
| |
| function runTest() |
| { |
| head = document.getElementsByTagName('head')[0]; |
| input = document.getElementsByTagName('input')[0]; |
| logDiv = document.getElementById('log'); |
| runSelectorTest(NO_MATCH, 'div'); |
| runSelectorTest(NO_MATCH, '*'); |
| runSelectorTest(NO_MATCH, 'body *'); |
| document.body.removeChild(input); |
| } |
| |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests whether and how selectors cross shadow DOM scopes.</p> |
| <input id="foo" class="bar" style="height:auto" type="range"> |
| <div id="log"></div> |
| </body> |
| </html> |
