Blitz - WPT: targeted-column-scroll-marker-selection-002.html

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

/css/css-overflow/scroll-markers/targeted-column-scroll-marker-selection-002.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-002-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;

      &::column::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;
      }

      &>.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>
  <script>

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

</html>

/css/css-overflow/scroll-markers/targeted-column-scroll-marker-selection-002-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;

      & > :nth-child(odd)::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;
      }
      /* item 4 is child 5 */
      & > :nth-child(5)::scroll-marker {
        background-color: green;
      }

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

      /* item4 is child 5. item4.scrollIntoView aligns to its center. */
      & > :nth-child(5){
        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>
</body>

</html>