Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-25 05:41:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1628484 - Add a bunch of position:sticky reftests. r=ktaeleman

Browse Source 
Failures will be addressed in later bugs. Refer to the text in the reftest.list
file for a brief overview of how the tests are structured.

Depends on D70459

Differential Revision: https://phabricator.services.mozilla.com/D70460

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Kartikaya Gupta 2020-04-14 15:52:22 +00:00
parent d4434cef4f
commit 35d93025e5
29 changed files with 1239 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref-b.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: relative;
top: calc(-50px - 20px + 10px - 50px);
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: calc(-100px - 20px + 10px - 50px);
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 10;
</script>

39
layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: relative;
top: calc(-50px - 20px + 10px);
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: calc(-100px - 20px + 10px);
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 10;
</script>

42
layout/reftests/async-scrolling/dynamic-toolbar-sticky-1a.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 10;
</script>

43
layout/reftests/async-scrolling/dynamic-toolbar-sticky-1b.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="10">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>

46
layout/reftests/async-scrolling/dynamic-toolbar-sticky-1c.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="-1150"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="-1140">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax;
</script>

37
layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref-b.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: calc(-20px - 50px);
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 100;
</script>

37
layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: -20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 100;
</script>

42
layout/reftests/async-scrolling/dynamic-toolbar-sticky-2a.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 100;
</script>

43
layout/reftests/async-scrolling/dynamic-toolbar-sticky-2b.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="100">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>

46
layout/reftests/async-scrolling/dynamic-toolbar-sticky-2c.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="-1150"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="-1050">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax;
</script>

35
layout/reftests/async-scrolling/dynamic-toolbar-sticky-3-ref.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 130;
</script>

42
layout/reftests/async-scrolling/dynamic-toolbar-sticky-3a.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 130;
</script>

43
layout/reftests/async-scrolling/dynamic-toolbar-sticky-3b.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="130">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>

46
layout/reftests/async-scrolling/dynamic-toolbar-sticky-3c.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="-1150"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="-1020">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax;
</script>

35
layout/reftests/async-scrolling/dynamic-toolbar-sticky-4-ref.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1020;
</script>

42
layout/reftests/async-scrolling/dynamic-toolbar-sticky-4a.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1020;
</script>

43
layout/reftests/async-scrolling/dynamic-toolbar-sticky-4b.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="1020">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>

46
layout/reftests/async-scrolling/dynamic-toolbar-sticky-4c.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="-1150"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="-130">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax;
</script>

37
layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref-t.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: calc(20px + 50px);
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1050;
</script>

37
layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1050;
</script>

42
layout/reftests/async-scrolling/dynamic-toolbar-sticky-5a.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1050;
</script>

43
layout/reftests/async-scrolling/dynamic-toolbar-sticky-5b.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="1050">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>

46
layout/reftests/async-scrolling/dynamic-toolbar-sticky-5c.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="-1150"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="-100">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax;
</script>

39
layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref-t.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: calc(100px + 20px - 10px + 50px);
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: relative;
top: calc(50px + 20px - 10px + 50px);
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1140;
</script>

39
layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: relative;
top: calc(100px + 20px - 10px);
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: relative;
top: calc(50px + 20px - 10px);
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1140;
</script>

42
layout/reftests/async-scrolling/dynamic-toolbar-sticky-6a.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = 1140;
</script>

43
layout/reftests/async-scrolling/dynamic-toolbar-sticky-6b.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="0"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="1140">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>

46
layout/reftests/async-scrolling/dynamic-toolbar-sticky-6c.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html reftest-async-scroll
reftest-displayport-x="0" reftest-displayport-y="-1150"
reftest-displayport-w="800" reftest-displayport-h="2150"
reftest-async-scroll-x="0" reftest-async-scroll-y="-10">
<meta name="viewport" content="width=device-width">
<style>
html, body {
margin: 0;
scrollbar-width: none;
}
.spacer {
height: 100vh;
background-color: green;
}
.sticky_bottom {
position: sticky;
bottom: 20px;
height: 50px;
background-color: blue;
opacity: 50%;
}
.sticky_both {
position: sticky;
top: 20px;
bottom: 20px;
height: 50px;
background-color: purple;
opacity: 50%;
}
.sticky_top {
position: sticky;
top: 20px;
height: 50px;
background-color: red;
opacity: 50%;
}
</style>
<div class="spacer"></div>
<div class="sticky_bottom"></div>
<div class="sticky_both"></div>
<div class="sticky_top"></div>
<div class="spacer"></div>
<script>
document.scrollingElement.scrollTop = document.scrollingElement.scrollTopMax;
</script>

79
layout/reftests/async-scrolling/reftest.list
View File

@ -103,3 +103,82 @@ skip-if(!Android) pref(apz.allow_zooming,true) test-pref(apz.fixed-margin-overri
skip-if(!Android) pref(apz.allow_zooming,true) test-pref(apz.fixed-margin-override.enabled,true) test-pref(apz.fixed-margin-override.bottom,50) == dynamic-toolbar-sticky-bottom-1.html dynamic-toolbar-sticky-bottom-1-ref.html
skip-if(!Android) pref(apz.allow_zooming,true) test-pref(apz.fixed-margin-override.enabled,true) test-pref(apz.fixed-margin-override.top,50) == dynamic-toolbar-fixed-top-1.html dynamic-toolbar-fixed-top-1-ref.html
skip-if(!Android) pref(apz.allow_zooming,true) test-pref(apz.fixed-margin-override.enabled,true) test-pref(apz.fixed-margin-override.top,50) fails-if(geckoview&&!webrender) == dynamic-toolbar-sticky-top-1.html dynamic-toolbar-sticky-top-1-ref.html # bug 1627326 for geckoview&&!webrender
# The next block of tests are based on a single test page which has three
# sticky items (one sticky to the top, one sticky to the bottom, and one sticky
# to both top and bottom). It is tested at 6 different scroll offsets, such that
# a different subset of items is "stuck" at each scroll offset. And each scroll
# offset has three variants (a, b, and c) where "a" sets the scroll position
# using main-thread scroll, "b" sets the scroll position using async scroll,
# and "c" sets the main-thread scroll to the bottom of the page and async-scrolls
# back up to the desired scroll offset. Therefore the reference page for three
# variants is always the same.
defaults fuzzy(0-1,0-120000)
== dynamic-toolbar-sticky-1a.html dynamic-toolbar-sticky-1-ref.html
== dynamic-toolbar-sticky-1b.html dynamic-toolbar-sticky-1-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-1c.html dynamic-toolbar-sticky-1-ref.html
== dynamic-toolbar-sticky-2a.html dynamic-toolbar-sticky-2-ref.html
== dynamic-toolbar-sticky-2b.html dynamic-toolbar-sticky-2-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-2c.html dynamic-toolbar-sticky-2-ref.html
== dynamic-toolbar-sticky-3a.html dynamic-toolbar-sticky-3-ref.html
== dynamic-toolbar-sticky-3b.html dynamic-toolbar-sticky-3-ref.html
== dynamic-toolbar-sticky-3c.html dynamic-toolbar-sticky-3-ref.html
== dynamic-toolbar-sticky-4a.html dynamic-toolbar-sticky-4-ref.html
== dynamic-toolbar-sticky-4b.html dynamic-toolbar-sticky-4-ref.html
== dynamic-toolbar-sticky-4c.html dynamic-toolbar-sticky-4-ref.html
== dynamic-toolbar-sticky-5a.html dynamic-toolbar-sticky-5-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-5b.html dynamic-toolbar-sticky-5-ref.html
== dynamic-toolbar-sticky-5c.html dynamic-toolbar-sticky-5-ref.html
== dynamic-toolbar-sticky-6a.html dynamic-toolbar-sticky-6-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-6b.html dynamic-toolbar-sticky-6-ref.html
== dynamic-toolbar-sticky-6c.html dynamic-toolbar-sticky-6-ref.html
defaults
# Same as above block of tests, except with a simulated dynamic toolbar
# at the top. Only the -5 and -6 scroll offsets are impacted, so the
# reference pages for first 4 scroll offsets are the same as the baseline
# case.
defaults skip-if(!geckoview) pref(apz.allow_zooming,true) test-pref(apz.fixed-margin-override.enabled,true) test-pref(apz.fixed-margin-override.top,50) fuzzy(0-1,0-120000)
fails-if(webrender) == dynamic-toolbar-sticky-1a.html dynamic-toolbar-sticky-1-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-1b.html dynamic-toolbar-sticky-1-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-1c.html dynamic-toolbar-sticky-1-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-2a.html dynamic-toolbar-sticky-2-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-2b.html dynamic-toolbar-sticky-2-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-2c.html dynamic-toolbar-sticky-2-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-3a.html dynamic-toolbar-sticky-3-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-3b.html dynamic-toolbar-sticky-3-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-3c.html dynamic-toolbar-sticky-3-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-4a.html dynamic-toolbar-sticky-4-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-4b.html dynamic-toolbar-sticky-4-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-4c.html dynamic-toolbar-sticky-4-ref.html
fails == dynamic-toolbar-sticky-5a.html dynamic-toolbar-sticky-5-ref-t.html
fails == dynamic-toolbar-sticky-5b.html dynamic-toolbar-sticky-5-ref-t.html
fails == dynamic-toolbar-sticky-5c.html dynamic-toolbar-sticky-5-ref-t.html
fails == dynamic-toolbar-sticky-6a.html dynamic-toolbar-sticky-6-ref-t.html
fails == dynamic-toolbar-sticky-6b.html dynamic-toolbar-sticky-6-ref-t.html
fails == dynamic-toolbar-sticky-6c.html dynamic-toolbar-sticky-6-ref-t.html
defaults
# Same as above block of tests, except with the dynamic toolbar margin
# at the bottom of the page. This time the -1 and -2 scroll offsets are
# impacted.
defaults skip-if(!geckoview) pref(apz.allow_zooming,true) test-pref(apz.fixed-margin-override.enabled,true) test-pref(apz.fixed-margin-override.bottom,50) fuzzy(0-1,0-120000)
fails-if(webrender) == dynamic-toolbar-sticky-1a.html dynamic-toolbar-sticky-1-ref-b.html
fails-if(webrender) == dynamic-toolbar-sticky-1b.html dynamic-toolbar-sticky-1-ref-b.html
fails == dynamic-toolbar-sticky-1c.html dynamic-toolbar-sticky-1-ref-b.html
fails == dynamic-toolbar-sticky-2a.html dynamic-toolbar-sticky-2-ref-b.html
fails == dynamic-toolbar-sticky-2b.html dynamic-toolbar-sticky-2-ref-b.html
fails == dynamic-toolbar-sticky-2c.html dynamic-toolbar-sticky-2-ref-b.html
fails == dynamic-toolbar-sticky-3a.html dynamic-toolbar-sticky-3-ref.html
fails == dynamic-toolbar-sticky-3b.html dynamic-toolbar-sticky-3-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-3c.html dynamic-toolbar-sticky-3-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-4a.html dynamic-toolbar-sticky-4-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-4b.html dynamic-toolbar-sticky-4-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-4c.html dynamic-toolbar-sticky-4-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-5a.html dynamic-toolbar-sticky-5-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-5b.html dynamic-toolbar-sticky-5-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-5c.html dynamic-toolbar-sticky-5-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-6a.html dynamic-toolbar-sticky-6-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-6b.html dynamic-toolbar-sticky-6-ref.html
fails-if(webrender) == dynamic-toolbar-sticky-6c.html dynamic-toolbar-sticky-6-ref.html
defaults