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

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