clear-activechain-list.html | Explore in Territory

<!DOCTYPE html>
<style>
  div { background: rgb(0, 0, 0); }
  div:active { background: rgb(0, 255, 0); }
  div {
    width: 200px;
    height: 200px;
    border: 2px solid rgb(0, 0, 255);
  }
  div span {
    color: rgb(255, 255, 255);
  }
  div:active span {
    color: rgb(255, 0, 0);
    display: none;
  }
</style>

<div id="box"><span>Text in a span</span></div>
<pre id="description"></pre>
<pre id="console"></pre>

<script src="../../resources/js-test.js"></script>
<script>
  function shouldHaveBackground(element, bg) {
    background = getComputedStyle(element, null).getPropertyValue("background-color");
    shouldBeEqualToString('background', bg);
  }

  function shouldHaveTextColor(element, textColor) {
    color = getComputedStyle(element, null).getPropertyValue("color");
    shouldBeEqualToString('color', textColor);
  }

  description("Chain of active elements should be cleared, even if style :active sets display: none on the current active element");

  if (window.testRunner) {
    var box = document.getElementById('box');

    eventSender.dragMode = false;
    // This mouse click seems to be required for WebKit's event handling to
    // pick up the :hover class. See https://bugs.webkit.org/show_bug.cgi?id=74264
    eventSender.mouseDown();
    eventSender.mouseUp();

    var span = document.querySelector('span');
    var spanRect = span.getBoundingClientRect();
    // Move into the first box.
    eventSender.mouseMoveTo(spanRect.left + 5, spanRect.top + 5);
    eventSender.mouseDown();
    shouldHaveBackground(box, 'rgb(0, 255, 0)');
    eventSender.mouseUp();
    shouldHaveTextColor(span, 'rgb(255, 255, 255)');
  }
</script>
chromium/third_party/blink/web_tests/fast/css/clear-activechain-list.html
