mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update web-platform-tests to revision a184aa4fd5cd8f92eb87ce0035f257f2a4c7c0b2
This commit is contained in:
WPT Sync Bot
parent
e1065fa22a
commit
c7e8937c37
84 changed files with 2653 additions and 218 deletions
|
|
@ -0,0 +1,167 @@
|
|||
<!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.invert .target { top: auto; }
|
||||
.LR.invert .target { left: auto; }
|
||||
.RL.invert .target { right: auto; }
|
||||
|
||||
.TB.ltr.invert .target { left: auto; }
|
||||
.TB.rtl.invert .target { right: auto; }
|
||||
.LR.ltr.invert .target { top: auto; }
|
||||
.LR.rtl.invert .target { bottom: auto; }
|
||||
.RL.ltr.invert .target { top: auto; }
|
||||
.RL.rtl.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 -->
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
<!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 -->
|
||||
Loading…
Add table
Add a link
Reference in a new issue