mirror of
https://github.com/servo/servo.git
synced 2025-06-27 02:23:41 +01:00
167 lines
3.4 KiB
HTML
167 lines
3.4 KiB
HTML
<!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 -->
|