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

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

19
tests/wpt/web-platform-tests/css/css-position/change-insets-inside-strict-containment-nested.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1286841">
<link rel="help" href="https://www.w3.org/TR/css-contain-1/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#insets">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="contain:strict; width:100px; height:100px; background:red;">
<div id="f1" style="position:fixed; left:100px; width:50px; height:100px; background:green;">
<div style="contain:strict; width:100px; height:100px;">
<div id="f2" style="position:fixed; left:100px; width:50px; height:100px; background:green;"></div>
</div>
</div>
</div>
<script>
document.body.offsetTop;
f1.style.left = "0";
f2.style.left = "50px";
</script>

52
tests/wpt/web-platform-tests/css/css-position/crashtests/scroll-tree-parent-construction.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE HTML>
<html class="test-wait">
<head>
<style>
#ifr { border: 5px solid #ddd; width: 200px; height: 150px; }
</style>
</head>
<body>
<iframe id=ifr srcdoc="
<style>
body { margin: 0 }
* { box-sizing: border-box }
.c1 { width: 90px; height: 300px; }
.f1 {
position: fixed;
background: #ddf;
left: 30px;
top: 10px;
width: 120px;
height: 120px;
}
.s1 {
overflow: scroll;
margin: 10px;
height: 100px;
width: 100px;
border: 5px solid gray;
}
</style>
<div class=c1>AAA</div>
<div class=f1>
<div class=s1>
<div class=c1>AAA</div>
</div>
</div>"></iframe>
<script>
raf = async () => {
return new Promise(resolve => {
requestAnimationFrame(resolve);
});
}
onload = async () => {
await raf();
await raf();
ifr.contentWindow.location.reload();
for (let i = 0; i < 10; i++)
await raf();
document.documentElement.className = "";
};
</script>
</body>
</html>

15
tests/wpt/web-platform-tests/css/css-position/position-absolute-multicol-001.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>CSS Positioned Layout Test: Absolute positioned element inside multicol</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-position/#valdef-position-absolute">
<link rel="match" href="/css/reference/pass_if_pass_below.html">
<meta name=assert content="Checks that an absolute positioned element inside multicol is rendered, when a previous absolute positioned element has been rendered already.">
<p>Test passes if there is the word "PASS" below.</p>
<div style="position: relative;">
<div style="position: absolute;">
</div>
<div style="column-count: 2;">
<div style="position: absolute;">PASS</div>
</div>
</div>

17
tests/wpt/web-platform-tests/css/css-position/position-fixed-dynamic-transformed-sibling-ref.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 0;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: blue;
}
</style>
<div class="fixed"></div>

40
tests/wpt/web-platform-tests/css/css-position/position-fixed-dynamic-transformed-sibling.html Normal file
View file

@ -0,0 +1,40 @@
<!doctype html>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<link rel="match" href="position-fixed-dynamic-transformed-sibling-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-position/#fixed-pos">
<link rel="help" href="https://bugzil.la/1797703">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<style>
body {
margin: 0;
}
.spacer {
height: 100px;
}
.transformed {
transform: translateX(0);
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: blue;
}
#target {
position: relative;
}
</style>
<div class="spacer"></div>
<div id="target" style="display: none">
<div class="transformed"></div>
<div class="fixed"></div>
</div>
<script>
let target = document.getElementById("target");
document.body.getBoundingClientRect();
target.style.display = "";
</script>

7
tests/wpt/web-platform-tests/css/css-position/position-fixed-video-controls-print.html Normal file
View file

@ -0,0 +1,7 @@
<!doctype html>
<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1764224">
<!-- Really a crashtest but since we can't really have print crashtests, we assert that we print something -->
<link rel="mismatch" href="/css/reference/blank.html">
<q style="page-break-after: left"></q>
<pre>a</pre>
<audio style="position: fixed" controls="controls">a</audio>

43
tests/wpt/web-platform-tests/css/css-position/position-relative-table-caption.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<title>position:relative should work on table captions</title>
<link rel="match" href="position-relative-table-top-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#rel-pos" />
<meta name="assert" content="This test checks that the position:relative top constraint behaves correctly for &lt;caption&gt; elements">
<style>
table {
border-collapse:collapse;
}
caption {
width: 50px;
height: 50px;
position: relative;
top: 100px;
background-color: green;
}
.group {
position: relative;
display: inline-block;
height: 200px;
}
.indicator {
position: absolute;
background-color: red;
left: 0;
top: 100px;
height: 50px;
width: 50px;
}
</style>
<div class="group">
<div class="indicator"></div>
<table>
<caption></caption>
</table>
</div>
<div>You should see a green box above. No red should be visible.</div>

121
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-bottom-002.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with bottom offset specified with px unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-bottom-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div#first-scrolling-container
{
background-position: left 75px;
}
div#second-scrolling-container
{
background-position: left 50px;
}
div#third-scrolling-container
{
background-position: left top;
}
div.vertical-spacer
{
height: 100px;
}
div.sticky
{
background-color: green;
bottom: 100px;
height: 100px;
position: sticky;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 25; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 100; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 200;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>

121
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-bottom-003.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with bottom offset specified with percentage unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-bottom-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div#first-scrolling-container
{
background-position: left 75px;
}
div#second-scrolling-container
{
background-position: left 50px;
}
div#third-scrolling-container
{
background-position: left top;
}
div.vertical-spacer
{
height: 100px;
}
div.sticky
{
background-color: green;
bottom: 40%;
height: 100px;
position: sticky;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 25; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 100; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 200;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>

2
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-escape-scroller-001-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<div style="width: 200px; height: 200px; background: green"></div>

18
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-escape-scroller-001.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Positioned Layout Test: a sticky element contained by fixed under a scroller not containing fixed</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://crbug.com/881555">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
<link rel="match" href="position-sticky-escape-scroller-001-ref.html">
<div id="scroller" style="width: 200px; height: 100px; overflow: hidden">
<div style="height: 100px; background: red"></div>
<div style="position: fixed; height: 400px">
<div style="position: sticky; top: 0; width: 200px; height: 100px; background: green"></div>
</div>
<div style="height: 100px; background: red"></div>
<div style="height: 100px; background: green"></div>
<div style="height: 1000px; background: red"></div>
</div>
<script>
scroller.scrollTop = 200;
</script>

9
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-escape-scroller-002-ref.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<style>body { margin: 0 }</style>
<div style="height: 3200px"></div>
<div style="position: fixed; top: 100px; left: 0;
width: 200px; height: 200px; background: green"></div>
<script>
window.scrollTo(0, 2000);
</script>

17
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-escape-scroller-002.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Positioned Layout Test: a sticky element contained by fixed under a scroller not containing fixed</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://crbug.com/881555">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
<link rel="match" href="position-sticky-escape-scroller-002-ref.html">
<style>body { margin: 0 }</style>
<div id="scroller" style="width: 200px; height: 200px; overflow: scroll">
<div style="position: fixed; top: 100px; height: 2000px">
<div style="position: sticky; top: 0; width: 200px; height: 200px; background: green"></div>
</div>
<div style="height: 1000px; background: red"></div>
</div>
<div style="height: 3000px"></div>
<script>
window.scrollTo(0, 2000);
</script>

18
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-escape-scroller-003.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Positioned Layout Test: a sticky element contained by absolute under a scroller not containing absolute</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://crbug.com/881555">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
<link rel="match" href="position-sticky-escape-scroller-001-ref.html">
<div id="scroller" style="width: 200px; height: 100px; overflow: hidden">
<div style="height: 100px; background: red"></div>
<div style="position: absolute; height: 400px">
<div style="position: sticky; top: 0; width: 200px; height: 100px; background: green"></div>
</div>
<div style="height: 100px; background: red"></div>
<div style="height: 100px; background: green"></div>
<div style="height: 1000px; background: red"></div>
</div>
<script>
scroller.scrollTop = 200;
</script>

9
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-escape-scroller-004-ref.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<style>body { margin: 0 }</style>
<div style="height: 3200px"></div>
<div style="position: fixed; top: 0; left: 0;
width: 200px; height: 200px; background: green"></div>
<script>
window.scrollTo(0, 1000);
</script>

17
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-escape-scroller-004.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Positioned Layout Test: a sticky element contained by absolute under a scroller not containing absolute</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="help" href="https://crbug.com/881555">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
<link rel="match" href="position-sticky-escape-scroller-004-ref.html">
<style>body { margin: 0 }</style>
<div id="scroller" style="width: 200px; height: 200px; overflow: scroll">
<div style="position: absolute; top: 100px; height: 2000px">
<div style="position: sticky; top: 0; width: 200px; height: 200px; background: green"></div>
</div>
<div style="height: 1000px; background: red"></div>
</div>
<div style="height: 3000px"></div>
<script>
window.scrollTo(0, 1000);
</script>

53
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-fixed-ancestor-002.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Positioned Layout Test: a sticky element inside a fixed ancestor</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/position-sticky-fixed-ancestor-002-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<meta name="flags" content="">
<style>
html, body, div
{
height: 100%;
margin: 0;
width: 100%;
}
div#positioned-container
{
background-color: red;
color: yellow;
font-size: 40vh;
position: absolute;
}
div#sticky
{
background-color: green;
bottom: 0;
color: white;
position: sticky;
}
</style>
<script type="text/javascript">
function startTest()
{
document.getElementById("positioned-container").style.position = "fixed";
}
</script>
<body onload="startTest();">
<div id="positioned-container">
<div id="vertical-spacer">FAIL</div>
<div id="sticky">PASS</div>
</div>

44
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-fixed-ancestor-003.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Positioned Layout Test: a sticky element inside a fixed ancestor</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/position-sticky-fixed-ancestor-002-ref.html">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<meta name="flags" content="">
<style>
html, body, div
{
height: 100%;
margin: 0;
width: 100%;
}
div#fixed-container
{
background-color: red;
color: yellow;
font-size: 40vh;
position: fixed;
}
div#sticky
{
background-color: green;
bottom: 0;
color: white;
position: sticky;
}
</style>
<div id="fixed-container">
<div id="vertical-spacer">FAIL</div>
<div id="sticky">PASS</div>
</div>

41
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-flex-item-001.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
<style>
#flex-scroller {
overflow: hidden;
inline-size: 100px;
block-size: 100px;
display: flex;
flex-direction: column;
background-color: green;
}
#non-sticky {
flex: 0 0 80px;
background-color: red;
}
#sticky {
position: sticky;
flex: 0 0 100px;
bottom: 0;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flex-scroller">
<div id="non-sticky"></div>
<div id="sticky"></div>
</div>
<script>
// Scroll the scroll container down to the bottom.
document.getElementById("flex-scroller").scrollTop="1000";
</script>

41
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-flex-item-002.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
<style>
#flex-scroller {
overflow: hidden;
inline-size: 100px;
block-size: 100px;
display: flex;
flex-direction: row;
background-color: green;
}
#non-sticky {
flex: 0 0 80px;
background-color: red;
}
#sticky {
position: sticky;
flex: 0 0 100px;
right: 0;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="flex-scroller">
<div id="non-sticky"></div>
<div id="sticky"></div>
</div>
<script>
// Scroll the scroll container to the far right.
document.getElementById("flex-scroller").scrollLeft="1000";
</script>

50
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-flex-item-003.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
<style>
#scroller {
overflow: hidden;
inline-size: 100px;
block-size: 100px;
background-color: green;
}
#flex {
display: flex;
flex-direction: column;
/* Use a small block-size so that the flex items overflow the flex container.
It's necessary to trigger the bug. */
block-size: 10px;
}
#non-sticky {
flex: 0 0 80px;
background-color: red;
}
#sticky {
position: sticky;
flex: 0 0 100px;
bottom: 0;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="scroller">
<div id="flex">
<div id="non-sticky"></div>
<div id="sticky"></div>
</div>
</div>
<script>
// Scroll the scroll container down to the bottom.
document.getElementById("scroller").scrollTop="1000";
</script>

51
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-flex-item-004.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
<style>
#scroller {
overflow: hidden;
inline-size: 100px;
block-size: 100px;
background-color: green;
}
#flex {
display: flex;
flex-direction: row;
/* Use a small inline-size so that the flex items overflow the flex container.
It's necessary to trigger the bug. */
inline-size: 10px;
block-size: 100px;
}
#non-sticky {
flex: 0 0 80px;
background-color: red;
}
#sticky {
position: sticky;
flex: 0 0 100px;
right: 0;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="scroller">
<div id="flex">
<div id="non-sticky"></div>
<div id="sticky"></div>
</div>
</div>
<script>
// Scroll the scroll container to the far right.
document.getElementById("scroller").scrollLeft="1000";
</script>

96
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-left-002.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with left offset specified with px unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-left-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
height: 150px;
margin-bottom: 30px;
overflow-y: hidden;
position: static;
white-space: nowrap;
width: 250px;
}
div#first-scrolling-container
{
background-position: right top;
}
div#second-scrolling-container
{
background-position: 100px top;
}
div#third-scrolling-container
{
background-position: 50px top;
}
div.horizontal-spacer
{
display: inline-block;
height: 100%;
width: 100px;
}
div.content
{
display: inline-block;
height: 100%;
width: 300px;
}
div.sticky
{
background-color: green;
display: inline-block;
height: 100px;
left: 100px;
position: sticky;
vertical-align: top;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollLeft = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollLeft = 150; document.getElementById(&quot;third-scrolling-container&quot;).scrollLeft = 300;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<div id="third-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>

96
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-left-003.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with left offset specified with percentage unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-left-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
height: 150px;
margin-bottom: 30px;
overflow-y: hidden;
position: static;
white-space: nowrap;
width: 250px;
}
div#first-scrolling-container
{
background-position: right top;
}
div#second-scrolling-container
{
background-position: 100px top;
}
div#third-scrolling-container
{
background-position: 50px top;
}
div.horizontal-spacer
{
display: inline-block;
height: 100%;
width: 100px;
}
div.content
{
display: inline-block;
height: 100%;
width: 300px;
}
div.sticky
{
background-color: green;
display: inline-block;
height: 100px;
left: 40%;
position: sticky;
vertical-align: top;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollLeft = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollLeft = 150; document.getElementById(&quot;third-scrolling-container&quot;).scrollLeft = 300;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<div id="third-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>

38
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-overflow-clip-container-ref.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<title>Sticky elements should not consider overflow: clip containers as possible scroll ancestor</title>
<style>
body {
margin: 0;
overflow: hidden; /* hide scrollbars */
}
#container {
height: 300px;
overflow-y: scroll;
}
#overflowClipContainer {
overflow: visible;
height: 600px;
}
#sticky {
position: sticky;
top: 0;
height: 50px;
background-color: yellow;
}
</style>
<script>
function doTest()
{
container.scrollTo(0, 50);
}
window.addEventListener('load', doTest, false);
</script>
<div id="container">
<div id="overflowClipContainer">
<div id="sticky"></div>
</div>
</div>

41
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-overflow-clip-container.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<title>Sticky elements should not consider overflow: clip containers as possible scroll ancestor</title>
<link rel="match" href="position-sticky-overflow-clip-container-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that sticky elements do not consider overflow:clip containers as possible scroll ancestor"/>
<style>
body {
margin: 0;
overflow: hidden; /* hide scrollbars */
}
#container {
height: 300px;
overflow: auto;
}
#overflowClipContainer {
overflow: clip;
height: 600px;
}
#sticky {
position: sticky;
top: 0;
height: 50px;
background-color: yellow;
}
</style>
<script>
function doTest()
{
container.scrollTo(0, 50);
}
window.addEventListener('load', doTest, false);
</script>
<div id="container">
<div id="overflowClipContainer">
<div id="sticky"></div>
</div>
</div>

96
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-right-002.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with right offset specified with px unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-right-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
height: 150px;
margin-bottom: 30px;
overflow-y: hidden;
position: static;
white-space: nowrap;
width: 250px;
}
div#first-scrolling-container
{
background-position: 75px top;
}
div#second-scrolling-container
{
background-position: 50px top;
}
div#third-scrolling-container
{
background-position: left top;
}
div.horizontal-spacer
{
display: inline-block;
height: 100%;
width: 100px;
}
div.content
{
display: inline-block;
height: 100%;
width: 300px;
}
div.sticky
{
background-color: green;
display: inline-block;
height: 100px;
position: sticky;
right: 100px;
vertical-align: top;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollLeft = 25; document.getElementById(&quot;second-scrolling-container&quot;).scrollLeft = 100; document.getElementById(&quot;third-scrolling-container&quot;).scrollLeft = 200;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<div id="third-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>

96
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-right-003.html Normal file
View file

@ -0,0 +1,96 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with right offset specified with percentage unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-right-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
height: 150px;
margin-bottom: 30px;
overflow-y: hidden;
position: static;
white-space: nowrap;
width: 250px;
}
div#first-scrolling-container
{
background-position: 75px top;
}
div#second-scrolling-container
{
background-position: 50px top;
}
div#third-scrolling-container
{
background-position: left top;
}
div.horizontal-spacer
{
display: inline-block;
height: 100%;
width: 100px;
}
div.content
{
display: inline-block;
height: 100%;
width: 300px;
}
div.sticky
{
background-color: green;
display: inline-block;
height: 100px;
position: sticky;
right: 40%;
vertical-align: top;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollLeft = 25; document.getElementById(&quot;second-scrolling-container&quot;).scrollLeft = 100; document.getElementById(&quot;third-scrolling-container&quot;).scrollLeft = 200;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>
<div id="third-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer"></div><div class="content"><div class="horizontal-spacer"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer"></div></div><div class="horizontal-spacer"></div>
</div>

118
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-scrolled-remove-sibling.html
View file

@ -1,21 +1,99 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<p>Test passes if there is a filled green square, and no scrollbars</p>
<div id="container" style="overflow:auto; width:100px; height:100px; background:red;">
<div style="position:sticky; top:0; height:100px; background:green;"></div>
<div id="bigItem" style="height:600px;"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
container.scrollTop = 600;
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
bigItem.style.display = "none";
test(()=> {
assert_equals(container.scrollHeight, 100);
}, "Sticky position and its overflow contribution");
});
});
</script>
<meta charset="UTF-8">
<title>CSS Positioned Layout Test: element with 'position: sticky' and removing a sibling in the vertical axis and in the horizontal axis</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<meta name="flags" content="">
<style>
div#scrollingContainerVert
{
background-color: red;
height: 100px;
overflow: auto;
width: 200px;
}
div#scrollingContainerHoriz
{
background-color: red;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
width: 200px;
}
div#elemStickyVert
{
background-color: green;
height: 100px;
position: sticky;
top: 0px;
}
div#scrollingContainerHoriz > div
{
display: inline-block;
height: 100%;
}
div#elemStickyHoriz
{
background-color: green;
left: 0px;
position: sticky;
width: 200px;
}
div#tallItem
{
height: 600px;
}
div#wideItem
{
width: 600px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<p>Test passes if there is a filled green square and <strong>no scrollbar</strong>.
<div id="scrollingContainerVert">
<div id="elemStickyVert"></div>
<div id="tallItem"></div>
</div>
<div id="scrollingContainerHoriz">
<div id="elemStickyHoriz"></div><div id="wideItem"></div>
</div>
<script>
test(()=> {
scrollingContainerVert.scrollTop = 600;
tallItem.style.display = "none";
assert_equals(scrollingContainerVert.scrollHeight, 100);
}, "Sticky position and its overflow contribution in the vertical axis");
test(()=> {
scrollingContainerHoriz.scrollLeft = 600;
wideItem.style.display = "none";
assert_equals(scrollingContainerHoriz.scrollWidth, 200);
}, "Sticky position and its overflow contribution in the horizontal axis");
</script>

47
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-stacking-context-002.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Positioned Layout Test: an element with 'position: sticky' creates a stacking context</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<meta name="assert" content="This test checks that an element with 'position: sticky' creates a stacking context. In this test, the first 2 divs have the same 'auto' z-index value but since div#sticky is last in document tree order, then it must overlap div#overlapped-red. The final div#overlap-bottom-half-of-sticky exists to make sure that the div#sticky is squeezed, is 'sandwiched' between the other 2.">
<style>
div
{
height: 100px;
width: 100px;
}
div#overlapped-red
{
background-color: red;
position: absolute;
}
div#sticky
{
background: linear-gradient(to bottom, green 51%, red 49%);
position: sticky;
}
div#overlap-bottom-half-of-sticky
{
background-color: green;
bottom: 50px;
height: 50px;
position: relative;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.
<div id="overlapped-red"></div>
<div id="sticky"></div>
<div id="overlap-bottom-half-of-sticky"></div>

121
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-top-002.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with top offset specified with px unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-top-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div#first-scrolling-container
{
background-position: left bottom;
}
div#second-scrolling-container
{
background-position: left 100px;
}
div#third-scrolling-container
{
background-position: left 50px;
}
div.vertical-spacer
{
height: 100px;
}
div.sticky
{
background-color: green;
height: 100px;
position: sticky;
top: 100px;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 200; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 300;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>

121
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-top-003.html Normal file
View file

@ -0,0 +1,121 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with top offset specified with percentage unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-top-002-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div#first-scrolling-container
{
background-position: left bottom;
}
div#second-scrolling-container
{
background-position: left 100px;
}
div#third-scrolling-container
{
background-position: left 50px;
}
div.vertical-spacer
{
height: 100px;
}
div.sticky
{
background-color: green;
height: 100px;
position: sticky;
top: 40%;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 200; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 300;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: before reaching the sticking point
-->
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<!--
second-scrolling-container: when reaching the sticking point and beyond
-->
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div class="content">
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>
<div class="vertical-spacer"></div> <!-- 150w x 100h -->
</div>

102
tests/wpt/web-platform-tests/css/css-position/sticky/position-sticky-top-and-bottom-003.html Normal file
View file

@ -0,0 +1,102 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Position Test: sticky element with top and bottom offsets specified with percentage unit</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
<link rel="match" href="reference/position-sticky-top-and-bottom-003-ref.html">
<meta name="flags" content="">
<style>
div.scrolling-container
{
background-image: url("support/100x100-red.png");
background-repeat: no-repeat;
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div#first-scrolling-container
{
background-position: left 125px;
}
div#second-scrolling-container
{
background-position: left 50px;
}
div#third-scrolling-container
{
background-position: left 25px;
}
div.vertical-spacer
{
height: 200px;
}
div.sticky
{
background-color: green;
bottom: 10%;
height: 100px;
position: sticky;
top: 10%;
width: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 150; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 250;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<!--
first-scrolling-container: when reaching the first (top) sticking point
-->
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 200h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 200h -->
</div>
<!--
second-scrolling-container: between both sticking points
-->
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 200h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 200h -->
</div>
<!--
third-scrolling-container: when reaching the second (bottom) sticking point
-->
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 150w x 200h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 150w x 200h -->
</div>

78
tests/wpt/web-platform-tests/css/css-position/sticky/reference/position-sticky-bottom-002-ref.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div.scrolling-container
{
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div.vertical-spacer-200
{
height: 200px;
}
div.sticky
{
background-color: green;
height: 100px;
position: relative;
width: 100px;
}
div#first-sticky
{
bottom: 100px;
}
div#second-sticky
{
bottom: 50px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 25; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 100; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 200;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
</div>
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
</div>
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
</div>

20
tests/wpt/web-platform-tests/css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reference File</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
html, body, div
{
background-color: green;
color: white;
font-size: 40vh;
height: 100%;
margin: 0;
}
</style>
<div>PASS</div>

74
tests/wpt/web-platform-tests/css/css-position/sticky/reference/position-sticky-left-002-ref.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div.scrolling-container
{
height: 150px;
margin-bottom: 30px;
overflow-y: hidden;
position: static;
white-space: nowrap;
width: 250px;
}
div.horizontal-spacer-200
{
display: inline-block;
height: 100%;
width: 200px;
}
div.sticky
{
background-color: green;
display: inline-block;
height: 100px;
position: relative;
vertical-align: top;
width: 100px;
}
div#first-sticky
{
left: 0px;
}
div#second-sticky
{
left: 50px;
}
div#third-sticky
{
left: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollLeft = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollLeft = 150; document.getElementById(&quot;third-scrolling-container&quot;).scrollLeft = 300;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<div id="first-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer-200"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div>
</div>
<div id="second-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer-200"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div>
</div>
<div id="third-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer-200"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div>
</div>

68
tests/wpt/web-platform-tests/css/css-position/sticky/reference/position-sticky-right-002-ref.html Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div.scrolling-container
{
height: 150px;
margin-bottom: 30px;
overflow-y: hidden;
position: static;
white-space: nowrap;
width: 250px;
}
div.horizontal-spacer-200
{
display: inline-block;
height: 100%;
width: 200px;
}
div.sticky
{
background-color: green;
display: inline-block;
height: 100px;
position: relative;
vertical-align: top;
width: 100px;
}
div#first-sticky
{
right: 100px;
}
div#second-sticky
{
right: 50px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollLeft = 25; document.getElementById(&quot;second-scrolling-container&quot;).scrollLeft = 100; document.getElementById(&quot;third-scrolling-container&quot;).scrollLeft = 200;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<div id="first-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer-200"></div><div id="first-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div>
</div>
<div id="second-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer-200"></div><div id="second-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div>
</div>
<div id="third-scrolling-container" class="scrolling-container">
<div class="horizontal-spacer-200"></div><div id="third-sticky" class="sticky"></div><div class="horizontal-spacer-200"></div>
</div>

83
tests/wpt/web-platform-tests/css/css-position/sticky/reference/position-sticky-top-002-ref.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div.scrolling-container
{
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div.vertical-spacer-200
{
height: 200px;
}
div.sticky
{
background-color: green;
height: 100px;
position: relative;
width: 100px;
}
div#first-sticky
{
top: 0px;
}
div#second-sticky
{
top: 100px;
}
div#third-sticky
{
top: 100px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 200; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 300;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
</div>
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
</div>
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer-200"></div> <!-- 100w x 200h -->
</div>

83
tests/wpt/web-platform-tests/css/css-position/sticky/reference/position-sticky-top-and-bottom-003-ref.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div.scrolling-container
{
display: inline-block;
height: 250px;
margin-right: 30px;
overflow: auto;
position: static;
width: 150px;
}
div.vertical-spacer
{
height: 200px;
}
div.sticky
{
background-color: green;
height: 100px;
position: relative;
width: 100px;
}
div#first-sticky
{
bottom: 25px;
}
div#second-sticky
{
top: 0px;
}
div#third-sticky
{
top: 75px;
}
</style>
<body onload="document.getElementById(&quot;first-scrolling-container&quot;).scrollTop = 50; document.getElementById(&quot;second-scrolling-container&quot;).scrollTop = 150; document.getElementById(&quot;third-scrolling-container&quot;).scrollTop = 250;">
<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.
<div id="first-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 100w x 200h -->
<div id="first-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 100w x 200h -->
</div>
<div id="second-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 100w x 200h -->
<div id="second-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 100w x 200h -->
</div>
<div id="third-scrolling-container" class="scrolling-container"> <!-- 150w x 250h viewport -->
<div class="vertical-spacer"></div> <!-- 100w x 200h -->
<div id="third-sticky" class="sticky"></div> <!-- 100w x 100h -->
<div class="vertical-spacer"></div> <!-- 100w x 200h -->
</div>

BIN
tests/wpt/web-platform-tests/css/css-position/sticky/support/100x100-red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 510 B