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