third_party/WebKit/LayoutTests/fast/css/clear-activechain-list-shadow-dom.html

   1 <!DOCTYPE html>
   2 <style>
   3   div {
   4     background-color: #00ffff;
   5     width: 100px;
   6     height: 100px;
   7   }
   8   span:active  {
   9     display: none;
  10   }
  11 </style>
  12
  13 <div>
  14 <div id='host'>
  15   <span>Click Me</span>
  16 </div>
  17 </div>
  18
  19 <pre id='description'></pre>
  20 <pre id='console'></pre>
  21
  22 <script src='../../resources/js-test.js'></script>
  23
  24 <script>
  25 var root = document.getElementById('host').createShadowRoot();
  26 root.innerHTML =
  27   '<style> div {background-color: #00ff00;}div:active {background-color: #ff0000;}</style><div id=shadowdom style="width: 100px; height: 100px"><content></content></div>'
  28
  29 function shouldHaveBackground(element, bg) {
  30   background = getComputedStyle(element, null).getPropertyValue('background-color');
  31   shouldBeEqualToString('background', bg);
  32 }
  33
  34 description('Chain of active elements should be cleared including the Shadow DOM elements');
  35
  36 if (window.testRunner) {
  37   var shadow = root.querySelector('#shadowdom');
  38
  39   eventSender.dragMode = false;
  40   // This mouse click seems to be required for WebKit's event handling to
  41   // pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264
  42   eventSender.mouseDown();
  43   eventSender.mouseUp();
  44
  45   var span = document.querySelector('span');
  46   var spanRect = span.getBoundingClientRect();
  47   // Mouse over the span.
  48   eventSender.mouseMoveTo(spanRect.left + 5, spanRect.top + 5);
  49   shouldHaveBackground(shadow, 'rgb(0, 255, 0)');
  50   eventSender.mouseDown();
  51   shouldHaveBackground(shadow, 'rgb(255, 0, 0)');
  52   eventSender.mouseUp();
  53   shouldHaveBackground(shadow, 'rgb(0, 255, 0)');
  54 }
  55 </script>