| <!DOCTYPE html> |
| <title> |
| scroll-snap-align vs writing-mode |
| </title> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align"> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> |
| <link rel="match" href="scroll-snap-writing-mode-000-ref.html"> |
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> |
| <style> |
| |
| .wrapper { |
| /* lay out in a nice grid */ |
| display: grid; |
| gap: 0.25em; |
| grid-template-columns: repeat(6, max-content); |
| } |
| |
| .scroller { |
| scroll-snap-type: both mandatory; |
| overflow: hidden; |
| scroll-padding: 0; |
| width: 50px; |
| height: 50px; |
| border: solid silver; |
| border-block-start-color: blue; |
| border-inline-start-color: blue; |
| } |
| .area { |
| width: 200px; |
| height: 200px; |
| } |
| |
| .target { |
| margin: 5px; |
| scroll-snap-align: start; |
| } |
| |
| .small .target { |
| width: 30px; |
| height: 30px; |
| background: orange; |
| } |
| |
| .large .target { |
| width: 51px; |
| height: 51px; |
| border-block-end: 20px solid red; |
| border-inline-end: 20px solid red; |
| } |
| |
| .large .target::before { |
| content: ''; |
| display: block; |
| width: 30px; |
| height: 30px; |
| background: orange; |
| } |
| |
| .TB { writing-mode: horizontal-tb; } |
| .LR { writing-mode: vertical-lr; } |
| .RL { writing-mode: vertical-rl; } |
| .ltr { direction: ltr; } |
| .rtl { direction: rtl; } |
| |
| .TB.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; } |
| .TB.rtl.invert .target { writing-mode: vertical-lr; direction: rtl; } |
| .LR.ltr.invert .target { writing-mode: vertical-rl; direction: rtl; } |
| .LR.rtl.invert .target { writing-mode: vertical-rl; direction: ltr; } |
| .RL.ltr.invert .target { writing-mode: vertical-lr; direction: rtl; } |
| .RL.rtl.invert .target { writing-mode: horizontal-tb; direction: ltr; } |
| |
| .large.invert { |
| /* key off target‘s writing mode, which we just inverted */ |
| 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="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR ltr small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL ltr small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller TB rtl small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR rtl small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL rtl small"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <!-- Target-inverted Small Cases |
| This row should be identical to the previous. --> |
| <div class="scroller TB ltr small invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR ltr small invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL ltr small invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller TB rtl small invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR rtl small invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL rtl small invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <!-- Simple Large Cases --> |
| |
| <div class="scroller TB ltr large"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR ltr large"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL ltr large"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller TB rtl large"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR rtl large"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL rtl large"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <!-- Target-inverted Large Cases |
| This is the fun one. --> |
| |
| <div class="scroller TB ltr large invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR ltr large invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL ltr large invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller TB rtl large invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller LR rtl large invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| <div class="scroller RL rtl large invert"> |
| <div class="area"> |
| <div class="target"></div> |
| </div> |
| </div> |
| |
| </div> <!-- wrapper --> |