diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref-b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref-b.html
new file mode 100644
index 000000000000..bcf56579c23c
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref-b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref.html
new file mode 100644
index 000000000000..ebb7972d3a9e
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1-ref.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1a.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1a.html
new file mode 100644
index 000000000000..c7147c01b110
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1a.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1b.html
new file mode 100644
index 000000000000..4cb4e16d5878
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1c.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1c.html
new file mode 100644
index 000000000000..d180d2616357
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-1c.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref-b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref-b.html
new file mode 100644
index 000000000000..eb13c69a4664
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref-b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref.html
new file mode 100644
index 000000000000..44318d939e4a
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2-ref.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2a.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2a.html
new file mode 100644
index 000000000000..b94890ae26aa
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2a.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2b.html
new file mode 100644
index 000000000000..87e6f91cf0e2
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2c.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2c.html
new file mode 100644
index 000000000000..889f61e059e9
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-2c.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3-ref.html
new file mode 100644
index 000000000000..98aa3dd23b47
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3-ref.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3a.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3a.html
new file mode 100644
index 000000000000..1f024fa5ca47
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3a.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3b.html
new file mode 100644
index 000000000000..78922be7eb55
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3c.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3c.html
new file mode 100644
index 000000000000..30adcafc0dd1
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-3c.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4-ref.html
new file mode 100644
index 000000000000..1357b0770394
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4-ref.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4a.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4a.html
new file mode 100644
index 000000000000..f626cfa44f45
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4a.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4b.html
new file mode 100644
index 000000000000..d62fe0e5afc9
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4c.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4c.html
new file mode 100644
index 000000000000..0005b0471e44
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-4c.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref-t.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref-t.html
new file mode 100644
index 000000000000..489d7f9d9878
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref-t.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref.html
new file mode 100644
index 000000000000..acd01a3a9350
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5-ref.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5a.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5a.html
new file mode 100644
index 000000000000..640c8fa43c5b
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5a.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5b.html
new file mode 100644
index 000000000000..9ea9d154f905
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5c.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5c.html
new file mode 100644
index 000000000000..2d7e087fe3af
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-5c.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref-t.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref-t.html
new file mode 100644
index 000000000000..3276137a99dc
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref-t.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref.html
new file mode 100644
index 000000000000..7a01152ec5ea
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6-ref.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6a.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6a.html
new file mode 100644
index 000000000000..dbe019fd349b
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6a.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6b.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6b.html
new file mode 100644
index 000000000000..9044587caf96
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6b.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6c.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6c.html
new file mode 100644
index 000000000000..292b268c0c5e
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-6c.html
@@ -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>
diff --git a/layout/reftests/async-scrolling/reftest.list b/layout/reftests/async-scrolling/reftest.list
index bc5556d94549..44ffd67abc3c 100644
--- a/layout/reftests/async-scrolling/reftest.list
+++ b/layout/reftests/async-scrolling/reftest.list
@@ -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
