wpt / css / css-overflow / scroll-markers / scroll-marker-active-unreached-target.html

Status: FAIL | Duration: 61ms | Subtests: 0/1 | Open test on wpt.live | wpt.fyi

TestTest Source

/css/css-overflow/scroll-markers/scroll-marker-active-unreached-target.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS Test: test that the scroll-marker of a target whose target position
    has not been reached only gets selected when it is within half a scroll
    port's distance from the current scroll offset</title>
  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#example-d2ca6884">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <script src="support/scroll-marker-support.js"></script>
  <script src="/dom/events/scrolling/scroll_support.js"></script>
</head>

<body>
  <style>
  .wrapper {
    display: grid;
    justify-content: center;
    position: relative;
  }

  .carousel {
    width: 600px;
    height: 512px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    list-style-type: none;
    scroll-behavior: smooth;
    border: solid 2px grey;
    padding-left: 0px;
    white-space: nowrap;
    position: relative;

    &>.item {
      height: 80%;
      width: 120px;
      border: 1px solid;
      place-content: center;
      background-color: white;
      margin-right: 1200px;
      display: inline-block;

      &::scroll-marker {
        content: ' ';
        width: 35px;
        height: 35px;
        border: 3px solid gray;
        border-radius: 50%;
        margin: 3px;
        background-color:red;
      }

      &::scroll-marker:target-current {
        background-color: green;
      }
    }

    scroll-marker-group: after;
    &::scroll-marker-group {
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: solid 1px black;
      border-radius: 30px;
    }
  }

  </style>
  <div id="wrapper" class="wrapper">
    <div class="carousel" id="carousel">
      <div class="item" id="item1" tabindex=0>1</div>
      <div class="item" id="item2" tabindex=0>2</div>
    </div>
  </div>
  <script>
    RED = "rgb(255, 0, 0)";
    GREEN = "rgb(0, 128, 0)";

    promise_test(async (t) => {
      await waitForCompositorCommit();
      const items = carousel.querySelectorAll(".item");

      assert_equals(carousel.scrollLeft, 0,  "carousel is not scrolled");
      verifySelectedMarker(0, items, GREEN, RED);

      // Scroll a bit, but not enough to bring item2 into view. Item1 should
      // still be selected.
      let pos = item2.offsetLeft - carousel.clientWidth - 10;
      await waitForScrollReset(t, carousel, pos);
      verifySelectedMarker(0, items, GREEN, RED);

      // Scroll a bit more; bring item2 into view but only into the second half
      // of the scroll port. Item1 should still be selected.
      pos = item2.offsetLeft - carousel.clientWidth + item2.offsetWidth;
      await waitForScrollReset(t, carousel, pos);
      verifySelectedMarker(0, items, GREEN, RED);

      // Scroll to place item2 within the half a scroll port's width from the
      // current scroll offset. Item2 should now be selected.
      pos += carousel.clientWidth / 2;
      await waitForScrollReset(t, carousel, pos);
      verifySelectedMarker(1, items, GREEN, RED);
    }, "target whose target position is not yet reached only get selected " +
       "when its less than half a scroll port away.");
  </script>
</body>

</html>