scroll-marker-active-unreached-target.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/scroll-marker-active-unreached-target.html - WPT Dashboard Interop Dashboard

<!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>