content/test/data/accessibility/css/carousel-with-wrapped-column-tabs-dynamic.html

<!--
@WAIT-FOR:Done
-->
<!doctype html>

<style>
.carousel {
  height: 200px;
  width: 200px;
  columns: 1;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after tabs;

  &::scroll-marker-group {
    height: 1rem;
    width: 100%;
    text-align: center;
  }

  &::column {
    scroll-snap-align: center;
  }

  &::column::scroll-marker {
    display: inline-block;
    content: '';
    width: 1rem;
    height: 1rem;
    border: 1px solid black;
  }

  &::column::scroll-marker:target-current {
    background: blue;
  }

  & div {
    position: relative;
    height: 100%;
  }

  & div div {
    display: inline-flex;
    width: 30%;
    height: 100%;
  }
}
</style>

<div id="scroller" class=carousel>
  <div>
    <div id="1">One</div>
    <div id="2">Two</div>
    <div id="3">Three</div>
    <div id="4">Four</div>
    <div id="5">Five</div>
    <div id="6">Six</div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const a11ySyncTimeMs = 1000;
    document.documentElement.offsetTop;
    scroller.scrollLeft = 400;
    document.documentElement.offsetTop;
    setTimeout(() => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.documentElement.offsetTop;
          // Signal the end of the test.
          document.title = "Done";
        });
      });
    }, a11ySyncTimeMs);
  });
</script>