LayoutTests/fast/css/unknown-pseudo-element-matching.html

   1 <html>
   2 <head>
   3 <title>Pseudo Element Matching in Shadow DOM</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 NAMESPACE_DECLARATION = '@namespace "http://example.com/foo/namespace";\n@namespace html "http://www.w3.org/1999/xhtml";\n';
  18 var SELECTOR_TEST_PROPERTIES = ' { height: 1px; -webkit-appearance: none; }';
  19 var SELECTORS = [
  20 '::-webkit-slider-thumb',
  21 'input::-webkit-slider-thumb',
  22 '#foo::-webkit-slider-thumb',
  23 'input#foo::-webkit-slider-thumb',
  24 'input.bar::-webkit-slider-thumb',
  25 'input[type=range]::-webkit-slider-thumb'
  26 ];
  27 var DISABLED_SELECTORS = SELECTORS.map(function(selector) { return selector + ':disabled'; });
  28 var HOVER_SELECTORS = SELECTORS.map(function(selector) { return selector + ':hover'; });
  29 var DESCENDANT_ID_SELECTORS = SELECTORS.map(function(selector) { return '#baz ' + selector; });
  30 DESCENDANT_ID_SELECTORS.shift();
  31 var DESCENDANT_CLASS_SELECTORS = SELECTORS.map(function(selector) { return '.qux ' + selector; });
  32 DESCENDANT_CLASS_SELECTORS.shift();
  33
  34 // convenience constants
  35 var MATCH = true;
  36 var NO_MATCH = false;
  37 var WITH_NAMESPACES = true;
  38
  39 function log(msg, success)
  40 {
  41     logDiv.appendChild(document.createElement('div')).innerHTML = msg + (arguments.length == 1 ? '' : (': ' + (success ? 'PASS' : 'FAIL')));
  42 }
  43
  44 function hoverOverSliderThumb()
  45 {
  46     if (!window.eventSender)
  47         return false;
  48
  49     var x = input.offsetLeft + input.offsetWidth / 2;
  50     var y = input.offsetTop + input.offsetHeight / 2;
  51     eventSender.mouseMoveTo(x, y);
  52     return true;
  53 }
  54
  55 function runSelectorTest(matchExpected, selector, useNamespaces)
  56 {
  57     var style = document.createElement('style');
  58     style.textContent = (useNamespaces ? NAMESPACE_DECLARATION : '') + selector + SELECTOR_TEST_PROPERTIES;
  59     head.appendChild(style);
  60     var matched = input.offsetHeight == 1;
  61     log('<code>' + selector + '</code>' + (useNamespaces ? ', where  HTML is not default namespace' : '') + ' <strong>should' + (matchExpected ? '' : ' not') + '</strong> match', matchExpected ? matched : !matched);
  62     head.removeChild(style);
  63 }
  64
  65 function runTest()
  66 {
  67     head = document.getElementsByTagName('head')[0];
  68     input = document.getElementsByTagName('input')[0];
  69     logDiv = document.getElementById('log');
  70     log('Basic selector tests:');
  71     runSelectorTest(MATCH, '::-webkit-slider-thumb');
  72     runSelectorTest(NO_MATCH, '::-webkit-slider-thumb', WITH_NAMESPACES);
  73     runSelectorTest(MATCH, '*|::-webkit-slider-thumb', WITH_NAMESPACES);
  74     runSelectorTest(MATCH, 'html|::-webkit-slider-thumb', WITH_NAMESPACES);
  75     runSelectorTest(MATCH, '#foo::-webkit-slider-thumb');
  76     runSelectorTest(MATCH, '.bar::-webkit-slider-thumb');
  77     runSelectorTest(NO_MATCH, '#foo::-webkit-slider-thumb', WITH_NAMESPACES);
  78     runSelectorTest(NO_MATCH, '.bar::-webkit-slider-thumb', WITH_NAMESPACES);
  79     runSelectorTest(MATCH, 'html|#foo::-webkit-slider-thumb', WITH_NAMESPACES);
  80     runSelectorTest(MATCH, 'html|.bar::-webkit-slider-thumb', WITH_NAMESPACES);
  81     runSelectorTest(MATCH, '*|#foo::-webkit-slider-thumb', WITH_NAMESPACES);
  82     runSelectorTest(MATCH, 'input::-webkit-slider-thumb');
  83     runSelectorTest(MATCH, 'input#foo::-webkit-slider-thumb');
  84     runSelectorTest(MATCH, 'input.bar::-webkit-slider-thumb');
  85     runSelectorTest(NO_MATCH, 'input::-webkit-slider-thumb', WITH_NAMESPACES);
  86     runSelectorTest(NO_MATCH, 'input#foo::-webkit-slider-thumb', WITH_NAMESPACES);
  87     runSelectorTest(NO_MATCH, 'input.bar::-webkit-slider-thumb', WITH_NAMESPACES);
  88     runSelectorTest(MATCH, 'html|input::-webkit-slider-thumb', WITH_NAMESPACES);
  89     runSelectorTest(MATCH, 'html|input#foo::-webkit-slider-thumb', WITH_NAMESPACES);
  90     runSelectorTest(MATCH, 'html|input.bar::-webkit-slider-thumb', WITH_NAMESPACES);
  91     runSelectorTest(MATCH, '*|input#foo::-webkit-slider-thumb', WITH_NAMESPACES);
  92     runSelectorTest(MATCH, 'input[type=range]::-webkit-slider-thumb');
  93     runSelectorTest(MATCH, 'input#foo[type=range]::-webkit-slider-thumb');
  94     runSelectorTest(MATCH, 'input.bar[type=range]::-webkit-slider-thumb');
  95     log('<br>Shouldn\'t ignore selector after the unknown pseudo element:');
  96     DISABLED_SELECTORS.forEach(expectNoMatch);
  97     input.disabled = true;
  98     log('<br>Should not match disabled input, because the disabled state is on the input, not the thumb:');
  99     DISABLED_SELECTORS.forEach(expectNoMatch);
 100     input.disabled = false;
 101     if (!hoverOverSliderThumb()) {
 102         log(':hover tests require DRT');
 103         return;
 104     }
 105     log('<br>Should match :hover when the mouse is over the slider thumb:');
 106     HOVER_SELECTORS.forEach(expectMatch);
 107     log('<br>Should match when combined with descendant selectors:');
 108     DESCENDANT_ID_SELECTORS.forEach(expectMatch);
 109     DESCENDANT_CLASS_SELECTORS.forEach(expectMatch);
 110     input.parentNode.removeChild(input);
 111 }
 112
 113 function expectNoMatch(selector) {
 114     runSelectorTest(NO_MATCH, selector);
 115 }
 116
 117 function expectMatch(selector) {
 118     runSelectorTest(MATCH, selector);
 119 }
 120
 121 </script>
 122 </head>
 123 <body onload="runTest()">
 124     <p>Tests various selector combinations, containing unknown pseudo element selectors.</p>
 125     <div id="baz" class="qux">
 126         <input id="foo" class="bar" type="range">
 127     </div>
 128     <div id="log"></div>
 129 </body>
 130 </html>