Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-position] Added 4 new sticky tests #32612

Merged
merged 6 commits into from
Jun 22, 2022
Merged

[css-position] Added 4 new sticky tests #32612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f145668
Added 4 new sticky tests
TalbotG Jan 31, 2022
1f3a462
Improving position-sticky-fixed-ancestor-002/003 tests
TalbotG Apr 3, 2022
9bbc380
Merged 2 (both axis) tests into position-sticky-scrolled-remove-sibli…
TalbotG Apr 3, 2022
fe4b478
Improved position-sticky-stacking-context-002.html according to revie…
TalbotG Apr 3, 2022
f76f1e0
Tweaked position-sticky-stacking-context-002.html
TalbotG Apr 3, 2022
9e92741
Adjusted position-sticky-stacking-context-002 according to review com…
TalbotG May 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions css/css-position/sticky/position-sticky-fixed-ancestor-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 44 additions & 0 deletions css/css-position/sticky/position-sticky-fixed-ancestor-003.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
118 changes: 98 additions & 20 deletions css/css-position/sticky/position-sticky-scrolled-remove-sibling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 47 additions & 0 deletions css/css-position/sticky/position-sticky-stacking-context-002.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 20 additions & 0 deletions css/css-position/sticky/reference/position-sticky-fixed-ancestor-002-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>