hover-display-contents.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
  .contents {
    display: contents;
    border: 1px solid red;
  }
  .contents:hover {
    color: green;
  }
</style>
<div id="container1">
  <div id="target1" class="contents">Hovering this text should make it go green.
    There should be no red border at any time.</div>
</div>
<div id="container2">
  <div class="contents">
    <div id="target2">Hovering this text should make it go green.
      There should be no red border at any time.</div>
  </div>
</div>
<script>
  function hoverElement(element) {
    eventSender.mouseMoveTo(element.offsetLeft + 1, element.offsetTop + 1);
  }

  test(() => {
    assert_true(!!window.eventSender, "Check for window.eventSender");
  }, "Tests require window.eventSender for hovering.");

  test(() => {
    hoverElement(container1);
    assert_equals(getComputedStyle(target1).color, "rgb(0, 128, 0)",
        "Color should be green.");
  }, "Hover text with :hover style on display:contents parent.");

  test(() => {
    hoverElement(container2);
    assert_equals(getComputedStyle(target2).color, "rgb(0, 128, 0)",
        "Color should be green.");
  }, "Hover text with :hover style on display:contents ancestor.");
</script>
chromium/third_party/blink/web_tests/fast/css/hover-display-contents.html
