Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 06:25:32 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision a184aa4fd5cd8f92eb87ce0035f257f2a4c7c0b2

Browse source
This commit is contained in:
WPT Sync Bot 2021-01-17 08:22:00 +00:00
parent e1065fa22a
commit c7e8937c37
84 changed files with 2653 additions and 218 deletions
Download patch file Download diff file Expand all files Collapse all files

5
tests/wpt/web-platform-tests/css/css-scroll-snap/no-red-ref.html Normal file
View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<html>
<title>CSS Reference: No Red</title>
<p>Test passes if there is no red.

22
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-root-001-ref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<title>CSS Scroll Snap Reference</title>
<style>
html, body { margin: 0; padding: 0; }
:root {
overflow: hidden; /* hide scrollbars for reftest analysis */
}
#target {
position: absolute;
top: 25%;
width: 100%;
margin: 25vh 0;
border-top: solid blue;
}
</style>
<div id="target">
<div>Test passes if the blue line above is centered in the viewport.</div>
</div>

43
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-root-001.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<title>scroll-snap-type + scroll-padding propagates root to viewport</title>
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type'>
<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding'>
<link rel='match' href='scroll-snap-root-001-ref.html'>
<meta name='assert'
content="Test passes if scroll snap properties on root are applied to viewport.">
<style type='text/css'>
html, body { margin: 0; padding: 0; }
:root {
scroll-snap-type: block mandatory;
scroll-padding: 25%;
overflow: hidden; /* hide scrollbars for reftest analysis */
}
#fail {
font: bold 2em;
background: red;
height: 120vh;
margin-bottom: 60vh;
}
#target {
margin-bottom: 120vh;
scroll-margin: 25vh;
scroll-snap-align: start;
border-top: solid blue;
}
</style>
<div id="fail">FAIL</div>
<div id="target">
<div>Test passes if the blue line above is centered in the viewport.</div>
</div>
<script>
document.getElementById('target').scrollIntoView();
</script>

18
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-root-002-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<title>CSS Scroll Snap Reference</title>
<style type='text/css'>
html, body { margin: 0; padding: 0; }
#target {
border-bottom: solid orange thick;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
<div id="target">
<div>Test passes if the orange stripe below is exactly at the bottom of the viewport.</div>
</div>

44
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-root-002.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<title>scroll-padding does not propagate body to viewport</title>
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type'>
<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding'>
<link rel='match' href='scroll-snap-root-002-ref.html'>
<meta name='assert'
content="Test passes if scroll-snap-padding on body is not applied to viewport.">
<style type='text/css'>
html, body { margin: 0; padding: 0; }
:root {
scroll-snap-type: block mandatory;
overflow: hidden; /* hide scrollbars for reftest analysis */
}
body {
scroll-padding: 25%;
}
#fail {
height: 120vh;
font: bold 2em;
background: red;
}
#target {
margin: 120vh 0;
scroll-snap-align: end;
border-bottom: solid orange thick;
}
</style>
<div id="fail">FAIL</div>
<div id="target">
<div>Test passes if the orange stripe below is exactly at the bottom of the viewport.</div>
</div>
<script>
document.getElementById('target').scrollIntoView();
</script>

35
tests/wpt/web-platform-tests/css/css-scroll-snap/scroll-snap-root-003.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<title>scroll-snap-type does not propagate body to viewport</title>
<link rel='author' title='Elika J. Etemad' href='http://fantasai.inkedblade.net/contact'>
<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type'>
<link rel='help' href='https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding'>
<link rel='match' href='no-red-ref.html'>
<meta name='assert'
content="Test passes if scroll-snap-type on body is not applied to viewport.">
<style type='text/css'>
:root {
overflow: hidden; /* hide scrollbars for reftest analysis */
}
body {
scroll-snap-type: block mandatory;
}
#pass {
height: 120vh;
}
#target {
scroll-snap-align: start;
height: 100vh;
background: red;
}
</style>
<p id="pass">Test passes if there is no red.
<div id="target">
<div>FAIL</div>
</div>

167
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000-ref.html Normal file
View file

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

237
tests/wpt/web-platform-tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-writing-mode-000.html Normal file
View file

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