wpt / css / css-overflow / scroll-markers / targeted-column-scroll-marker-selection-004.html

Status: PASS | Duration: 8ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-overflow/scroll-markers/targeted-column-scroll-marker-selection-004.html

<!DOCTYPE html>
<html class="reftest-wait">

<head>
  <meta charset="utf-8">
  <title>CSS Test: scroll tracking for ::scroll-markers whose orignatin elements cannot be scroll-aligned </title>
  <link rel="match" href="targeted-column-scroll-marker-selection-004-ref.html">
  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
  <script src="/css/css-transitions/support/helper.js"></script>
  <script src="/dom/events/scrolling/scroll_support.js"></script>
  <script src="/common/reftest-wait.js"></script>
</head>

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

    .carousel {
      width: 800px;
      height: 200px;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      list-style-type: none;
      border: solid 2px grey;
      padding-top: 10%;
      text-align: center;
      counter-set: markeridx -1;
      columns: 2;

      /* Children 13 (index 12) and 16 (index 15) also generate scroll-markers.
      */
      &::column::scroll-marker,
      & >:nth-child(13)::scroll-marker,
      & >:nth-child(16)::scroll-marker {
        content: counter(markeridx);
        counter-increment: markeridx;
        align-content: center;
        text-align: center;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin: 3px;
        background-color: red;
      }
      &::column::scroll-marker:target-current {
        background-color: green;
      }
      &>:nth-child(13)::scroll-marker:target-current,
      &>:nth-child(16)::scroll-marker:target-current {
        background-color: lightgreen;
      }

      &>.item {
        scroll-snap-align: center;
        height: 80%;
        width: 158px;
        border: 1px solid;
        place-content: center;
        display: inline-block;
      }

      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 class="wrapper" id="wrapper">
    <div class="carousel" id="carousel">
      <div class="item item0" tabindex=0>0</div>
      <div class="item item1" tabindex=0>1</div>
      <div class="item item2" tabindex=0>2</div>
      <div class="item item3" tabindex=0>3</div>
      <div class="item item4" tabindex=0>4</div>
      <div class="item item5" tabindex=0>5</div>
      <div class="item item6" tabindex=0>6</div>
      <div class="item item7" tabindex=0>7</div>
      <div class="item item8" tabindex=0>8</div>
      <div class="item item9" tabindex=0>9</div>
      <div class="item item10" tabindex=0>10</div>
      <div class="item item11" tabindex=0>11</div>
      <div class="item item12" tabindex=0>12</div>
      <div class="item item13" tabindex=0>13</div>
      <div class="item item14" tabindex=0>14</div>
      <div class="item item15" tabindex=0>15</div>
    </div>
    <div id="buttons"></div>
  </div>
  <script>

    const items = document.querySelectorAll(".item");
    function runTest() {
      const item13 = items[13];
      item13.scrollIntoView();
      carousel.onscrollend = () => {
        takeScreenshot();
      };
    }
    waitForCompositorReady().then(runTest);
  </script>
</body>

</html>

/css/css-overflow/scroll-markers/targeted-column-scroll-marker-selection-004-ref.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CSS Test: scroll tracking for ::scroll-markers whose orignating elements cannot be scroll-aligned </title>
  <link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-container-scroll">
</head>

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

    .carousel {
      width: 800px;
      height: 200px;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
      list-style-type: none;
      border: solid 2px grey;
      padding-top: 10%;
      text-align: center;
      counter-set: markeridx -1;
      columns: 2;

      /* All odd-numbered children generate scroll-markers. For the test, we
         need 2 more cxhildren to generate scroll-markers. This uses children 2
         and 4.*/
      & > :nth-child(odd)::scroll-marker,
      & > :nth-child(2)::scroll-marker,
      & > :nth-child(4)::scroll-marker {
        counter-increment: markeridx;
        align-content: center;
        text-align: center;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin: 3px;
        background-color: red;
      }

      /* This lines up the scroll-markers' numbers to match the way Chromium
         lays out the scroll-markers which seems to be all
         element::scroll-markers first/leftmost and then,
         ::column-scroll-markers, despite the ::column::scroll-markers being
         numbered first. The numbers are not important for the test's
         functionality. They only help investigating the browser's behavior. */
      & > :nth-child(1)::scroll-marker {
        content: "8";
        /* In the test, item 13 (child 14) is the scrollIntoView target.
           Its sibling (item 12 (child 13)) generates a scroll-marker.The column
           containing both items 13 and 12 generates a scroll-marker, but item
           12's scroll-marker is to be preferred. Because of the layout quirk
           mentioned above, item 12's scroll-marker happens to be the leftmost
           one. */
        background-color: lightgreen;
      }
      & > :nth-child(3)::scroll-marker { content: "0"; }
      & > :nth-child(2)::scroll-marker { content: "9"; }
      & > :nth-child(4)::scroll-marker { content: "1"; }
      & > :nth-child(5)::scroll-marker { content: "2"; }
      & > :nth-child(7)::scroll-marker { content: "3"; }
      & > :nth-child(9)::scroll-marker { content: "4"; }
      & > :nth-child(11)::scroll-marker { content: "5"; }
      & > :nth-child(13)::scroll-marker { content: "6"; }
      & > :nth-child(15)::scroll-marker { content: "7"; }

      &>.item {
        scroll-snap-align: none;
        height: 80%;
        width: 158px;
        border: 1px solid;
        place-content: center;
        display: inline-block;
      }

      /* item13 is child 14. item13.scrollIntoView aligns to its center. */
      & > :nth-child(14){
        scroll-snap-align: center;
      }

      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 class="wrapper" id="wrapper">
    <div class="carousel" id="carousel">
      <div class="item item0" tabindex=0>0</div>
      <div class="item item1" tabindex=0>1</div>
      <div class="item item2" tabindex=0>2</div>
      <div class="item item3" tabindex=0>3</div>
      <div class="item item4" tabindex=0>4</div>
      <div class="item item5" tabindex=0>5</div>
      <div class="item item6" tabindex=0>6</div>
      <div class="item item7" tabindex=0>7</div>
      <div class="item item8" tabindex=0>8</div>
      <div class="item item9" tabindex=0>9</div>
      <div class="item item10" tabindex=0>10</div>
      <div class="item item11" tabindex=0>11</div>
      <div class="item item12" tabindex=0>12</div>
      <div class="item item13" tabindex=0>13</div>
      <div class="item item14" tabindex=0>14</div>
      <div class="item item15" tabindex=0>15</div>
    </div>
    <div id="buttons" style></div>
  </div>
</body>

</html>