<!DOCTYPE html>
<title>
  CSS Scroll Snap Reference
</title>

<style>

.wrapper {
  /* lay out in a nice grid */
  display: grid;
  gap: 0.25em;
  grid-template-columns: repeat(6, max-content);
}

.scroller {
  width: 50px;
  height: 50px;
  border: solid silver;
  border-block-start-color: blue;
  border-inline-start-color: blue;
  position: relative;
}

.target {
  width: 30px;
  height: 30px;
  background: orange;
  top: 0; left: 0; right: 0; bottom: 0;
  position: absolute;
}

.TB  { writing-mode: horizontal-tb; }
.LR  { writing-mode: vertical-lr; }
.RL  { writing-mode: vertical-rl; }
.ltr { direction: ltr; }
.rtl { direction: rtl; }

.TB.large.invert .target { top: auto; }
.LR.large.invert .target { left: auto; }
.RL.large.invert .target { right: auto; }

.TB.ltr.large.invert .target { left:   auto; }
.TB.rtl.large.invert .target { right:  auto; }
.LR.ltr.large.invert .target { top:    auto; }
.LR.rtl.large.invert .target { bottom: auto; }
.RL.ltr.large.invert .target { top:    auto; }
.RL.rtl.large.invert .target { bottom: auto; }

/* not absolutizing the border colors, so that the test passes even if css-logical is not supported; */
.large.invert {
  border: solid silver;
  border-block-end-color: blue;
  border-inline-end-color: blue;
}

</style>

<p>Test passes if there is an orange square tucked into each blue corner without gaps,
and there is no red.

<div class="wrapper">
<!-- Simple Small Cases -->

<div class="scroller TB ltr small">
  <div class="target"></div>
</div>

<div class="scroller LR ltr small">
  <div class="target"></div>
</div>

<div class="scroller RL ltr small">
  <div class="target"></div>
</div>

<div class="scroller TB rtl small">
  <div class="target"></div>
</div>

<div class="scroller LR rtl small">
  <div class="target"></div>
</div>

<div class="scroller RL rtl small">
  <div class="target"></div>
</div>

<!-- Target-inverted Small Cases
     This row should be identical to the previous. -->
<div class="scroller TB ltr small invert">
  <div class="target"></div>
</div>

<div class="scroller LR ltr small invert">
  <div class="target"></div>
</div>

<div class="scroller RL ltr small invert">
  <div class="target"></div>
</div>

<div class="scroller TB rtl small invert">
  <div class="target"></div>
</div>

<div class="scroller LR rtl small invert">
  <div class="target"></div>
</div>

<div class="scroller RL rtl small invert">
  <div class="target"></div>
</div>

<!-- Simple Large Cases -->

<div class="scroller TB ltr large">
  <div class="target"></div>
</div>

<div class="scroller LR ltr large">
  <div class="target"></div>
</div>

<div class="scroller RL ltr large">
  <div class="target"></div>
</div>

<div class="scroller TB rtl large">
  <div class="target"></div>
</div>

<div class="scroller LR rtl large">
  <div class="target"></div>
</div>

<div class="scroller RL rtl large">
  <div class="target"></div>
</div>

<!-- Target-inverted Large Cases
     This is the fun one. -->

<div class="scroller TB ltr large invert">
  <div class="target"></div>
</div>

<div class="scroller LR ltr large invert">
  <div class="target"></div>
</div>

<div class="scroller RL ltr large invert">
  <div class="target"></div>
</div>

<div class="scroller TB rtl large invert">
  <div class="target"></div>
</div>

<div class="scroller LR rtl large invert">
  <div class="target"></div>
</div>

<div class="scroller RL rtl large invert">
  <div class="target"></div>
</div>

</div> <!-- wrapper -->