Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 00:47:55 +0000
commit: 26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree: f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/async-scrolling
parent: Initial commit. (diff)
download: firefox-upstream/124.0.1.tar.xz
firefox-upstream/124.0.1.zip
218 files changed, 6063 insertions, 0 deletions
diff --git a/layout/reftests/async-scrolling/async-scroll-and-zoom-ref.html b/layout/reftests/async-scrolling/async-scroll-and-zoom-ref.html
new file mode 100644
index 0000000000..ecc40d5090
--- /dev/null
+++ b/layout/reftests/async-scrolling/async-scroll-and-zoom-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: -100px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/async-scroll-and-zoom.html b/layout/reftests/async-scrolling/async-scroll-and-zoom.html
new file mode 100644
index 0000000000..a7795a54d6
--- /dev/null
+++ b/layout/reftests/async-scrolling/async-scroll-and-zoom.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="550"
+      reftest-async-zoom="2.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 500px;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that both layout and visual viewport scroll offsets are correctly applied.
+
+       An async scroll of 550 CSS pixels at 2.0x async zoom will ensure that
+       the visual viewport is scrolled beyond the bottom of the previous
+       layout viewport, meaning that the layout viewport is also scrolled so
+       that it contains the visual viewport.
+
+       Content should be scrolled by both the layout and visual offsets, in the
+       correct co-ordinate space for each, which should result the top half of
+       the div being scrolled out of view. -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/background-blend-mode-1-ref.html b/layout/reftests/async-scrolling/background-blend-mode-1-ref.html
new file mode 100644
index 0000000000..b5a9e0c12d
--- /dev/null
+++ b/layout/reftests/async-scrolling/background-blend-mode-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: Bug 1248913 - Keep background-attachment:fixed image fixed under APZ scrolling even when a background-blend-mode is applied.</title>
+
+<style>
+
+html {
+  background: radial-gradient(circle 200px at 400px 400px, lime 100px, transparent 0) scroll,
+              radial-gradient(circle 200px at 400px 300px, blue 100px, transparent 0) scroll
+               white no-repeat;
+  background-blend-mode: multiply;
+  height: 100%;
+}
+
+</style>
+
+<div></div>
diff --git a/layout/reftests/async-scrolling/background-blend-mode-1.html b/layout/reftests/async-scrolling/background-blend-mode-1.html
new file mode 100644
index 0000000000..33a8498cec
--- /dev/null
+++ b/layout/reftests/async-scrolling/background-blend-mode-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="1000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+
+<meta charset="utf-8">
+<title>Bug 1248913 - Keep background-attachment:fixed image fixed under APZ scrolling even when a background-blend-mode is applied.</title>
+
+<style>
+
+html {
+  background: radial-gradient(circle 200px at 400px 400px, lime 100px, transparent 0) fixed,
+              radial-gradient(circle 200px at 400px 400px, blue 100px, transparent 0) scroll
+               white no-repeat;
+  background-blend-mode: multiply;
+  scrollbar-width: none;
+}
+
+body {
+  height: 4000px;
+}
+
+</style>
+
+<div></div>
diff --git a/layout/reftests/async-scrolling/bg-fixed-1-ref.html b/layout/reftests/async-scrolling/bg-fixed-1-ref.html
new file mode 100644
index 0000000000..f8f0aef054
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background-image:url(repeatable-diagonal-gradient.png);
+             background-repeat:no-repeat;
+             background-position:top left;">
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-1.html b/layout/reftests/async-scrolling/bg-fixed-1.html
new file mode 100644
index 0000000000..15a00dc272
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px;
+             background-image:url(repeatable-diagonal-gradient.png);
+             background-attachment:fixed;
+             background-repeat:no-repeat;
+             background-position:top left;">
+  <!-- test that background-attachment:fixed backgrounds don't move with async scrolling -->
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-clip-1.html b/layout/reftests/async-scrolling/bg-fixed-child-clip-1.html
new file mode 100644
index 0000000000..9d9795de71
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px; margin:0;">
+  <div style="margin-top: 100px; height: 100px;
+              background-image:url(repeatable-diagonal-gradient.png);
+              background-attachment:fixed;
+              background-repeat:no-repeat;
+              background-position:top left;">
+  </div>
+  <!-- test that the clip of a background-attachment:fixed background of a
+       child element moves correctly during async scrolling -->
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-clip-2.html b/layout/reftests/async-scrolling/bg-fixed-child-clip-2.html
new file mode 100644
index 0000000000..ce0ab6cc9c
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px; margin:0;">
+  <div style="margin-top: 100px; height: 100px;
+              position: relative;">
+    <div style="position: absolute;
+                top: 0; right: 0; bottom: 0; left: 0;
+                background-image:url(repeatable-diagonal-gradient.png);
+                background-attachment:fixed;
+                background-repeat:no-repeat;
+                background-position:top left;">
+    </div>
+  </div>
+  <!-- test that the clip of a background-attachment:fixed background of a
+       child element moves correctly during async scrolling -->
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html
new file mode 100644
index 0000000000..7ae3847742
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; margin:0;">
+  <div style="margin-top: 50px; height: 100px;
+              background-image:url(repeatable-diagonal-gradient.png);
+              background-attachment:fixed;
+              background-repeat:no-repeat;
+              background-position:top left;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html
new file mode 100644
index 0000000000..c71b15b434
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; margin:0;">
+  <div style="margin-top: 50px; height: 100px;
+              background-image:url(repeatable-diagonal-gradient.png);
+              background-repeat:no-repeat;
+              background-position:0px -50px;
+              border-radius:50px;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-mask.html b/layout/reftests/async-scrolling/bg-fixed-child-mask.html
new file mode 100644
index 0000000000..a6fab8218e
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-mask.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px; margin:0;">
+  <div style="margin-top: 100px; height: 100px;
+              background-image:url(repeatable-diagonal-gradient.png);
+              background-attachment:fixed;
+              background-repeat:no-repeat;
+              background-position:top left;
+              border-radius:50px;">
+  </div>
+  <!-- test that the clip of a background-attachment:fixed background of a
+       child element moves correctly during async scrolling -->
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html
new file mode 100644
index 0000000000..8f647b7c9e
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; margin:0;">
+  <div style="height: 100px;
+              background-image:url(repeatable-diagonal-gradient.png);
+              background-attachment:fixed;
+              background-repeat:no-repeat;
+              background-position:top left;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html
new file mode 100644
index 0000000000..123334cbdd
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px; margin:0;">
+  <div style="height: 50px; position: relative;
+              background:url(repeatable-diagonal-gradient.png) top left fixed no-repeat;">
+  </div>
+  <div style="height: 100px;
+              background:url(repeatable-diagonal-gradient.png) top left fixed no-repeat;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html
new file mode 100644
index 0000000000..d5595cd827
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; margin:0;">
+  <div style="width: 200px; height: 100px; background: lime; margin-top: 200px;"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html
new file mode 100644
index 0000000000..be3487d4fc
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="1000"
+      style="scrollbar-width:none">
+<body style="height: 3000px; margin: 0;">
+  <div style="height: 1200px;
+              background: linear-gradient(white, white) top left fixed no-repeat;">
+  </div>
+  <div style="width: 200px; height: 100px; background: lime;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-3-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-3-ref.html
new file mode 100644
index 0000000000..7f864457f6
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-3-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; margin:0;">
+  <div style="width: 200px; height: 100px; background: lime;"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-3.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-3.html
new file mode 100644
index 0000000000..fb0616ff3b
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-3.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="-150"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-150"
+      style="scrollbar-width: none; background: linear-gradient(white, white) top left fixed no-repeat;">
+<body style="height: 3000px; margin: 0;">
+  <div style="width: 200px; height: 100px; background: lime;"></div>
+
+  <script>
+    document.documentElement.scrollTop = 150;
+  </script>
+
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-ref.html
new file mode 100644
index 0000000000..9ca02365f1
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; margin:0;">
+  <div style="height: 1000px;
+              background-image:url(repeatable-diagonal-gradient.png);
+              background-repeat:no-repeat;
+              background-position:top left;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-child.html b/layout/reftests/async-scrolling/bg-fixed-child.html
new file mode 100644
index 0000000000..b90179433b
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px; margin:0;">
+  <div style="height: 1000px;
+              background-image:url(repeatable-diagonal-gradient.png);
+              background-attachment:fixed;
+              background-repeat:no-repeat;
+              background-position:top left;">
+  </div>
+  <!-- test that background-attachment:fixed backgrounds of child elements don't move with async scrolling -->
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html b/layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html
new file mode 100644
index 0000000000..b5efcc7412
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; height:3000px;
+             background-image:url(repeatable-diagonal-gradient.png);
+             background-repeat:no-repeat;
+             background-position:0 300px;">
+  <div style="position:absolute; background:black; top:0; left:0; width:500px; height:400px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-1.html b/layout/reftests/async-scrolling/bg-fixed-cover-1.html
new file mode 100644
index 0000000000..b125cfd7af
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="400"
+      style="scrollbar-width:none">
+<body style="height:3000px;
+             background-image:url(repeatable-diagonal-gradient.png);
+             background-attachment:fixed;
+             background-repeat:no-repeat;
+             background-position:0 300px;">
+  <!-- Test that background-attachment:fixed content covered by scrolling content gets rendered
+       properly -->
+  <div style="position:absolute; background:black; top:200px; left:0; width:500px; height:600px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html b/layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html
new file mode 100644
index 0000000000..8d9601f2a8
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; height:3000px;
+             background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
+             background-repeat:no-repeat;
+             background-position:0 300px, 0 0;">
+  <!-- Test that scrolling content covered by background-attachment:fixed content
+       gets rendered properly -->
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-2.html b/layout/reftests/async-scrolling/bg-fixed-cover-2.html
new file mode 100644
index 0000000000..416a7481a4
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="300"
+      style="scrollbar-width:none">
+<body style="height:3000px;
+             background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
+             background-attachment:fixed, scroll;
+             background-repeat:no-repeat;
+             background-position:0 300px;">
+  <!-- Test that scrolling content covered by background-attachment:fixed content
+       gets rendered properly -->
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html b/layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html
new file mode 100644
index 0000000000..eb87febce8
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; height:3000px;
+             background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
+             background-repeat:no-repeat;
+             background-position:0 300px, 0 0;">
+  <!-- Test that scrolling content above background-attachment:fixed content but not
+       intersecting it doesn't get moved down to a layer below the
+       background-attachment:fixed content -->
+  <div style="position:absolute; background:black; left:0; top:300px; width:500px; height:200px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-3.html b/layout/reftests/async-scrolling/bg-fixed-cover-3.html
new file mode 100644
index 0000000000..b363e5ded2
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-3.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="300"
+      style="scrollbar-width:none">
+<body style="height:3000px;
+             background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png);
+             background-attachment:fixed, scroll;
+             background-repeat:no-repeat;
+             background-position:0 300px;">
+  <!-- Test that scrolling content above background-attachment:fixed content but not
+       intersecting it doesn't get moved down to a layer below the
+       background-attachment:fixed content -->
+  <div style="position:absolute; background:black; left:0; top:600px; width:500px; height:200px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-in-css-filter-ref.html b/layout/reftests/async-scrolling/bg-fixed-in-css-filter-ref.html
new file mode 100644
index 0000000000..8dee2b2412
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-in-css-filter-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Fixed background inside blur filter</title>
+    <style>
+        .scrollable {
+            width: 100px;
+            height: 100px;
+            overflow: hidden;
+        }
+        .bg {
+            width: 100px;
+            height: 100px;
+            background-image: url("repeatable-diagonal-gradient.png");
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }
+        .blur {
+            filter: blur(10px);
+        }
+    </style>
+</head>
+<body>
+<div class="scrollable">
+    <div class="bg blur"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-in-css-filter.html b/layout/reftests/async-scrolling/bg-fixed-in-css-filter.html
new file mode 100644
index 0000000000..4f02252c66
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-in-css-filter.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<head>
+    <meta charset="UTF-8">
+    <title>Fixed background inside blur filter</title>
+    <style>
+        .scrollable {
+            width: 100px;
+            height: 100px;
+            overflow: scroll;
+            scrollbar-width: none;
+        }
+        .bg {
+            width: 100px;
+            height: 100px;
+            background-image: url("repeatable-diagonal-gradient.png");
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }
+        .blur {
+            filter: blur(10px);
+        }
+    </style>
+</head>
+<body>
+<div class="scrollable"
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="100" reftest-displayport-h="200"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+    <div class="bg"></div>
+    <div class="bg blur"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html b/layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html
new file mode 100644
index 0000000000..9d54bd8139
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html reftest-async-scroll >
+<style>
+
+body {
+  margin: 0px;
+  position: relative;
+  height: 1200.23px;
+  overflow: hidden;
+}
+
+.fixed-background {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 100px;
+  background: linear-gradient(blue, blue) no-repeat fixed 0px 200px;
+  background-size: 100px 100px;
+  opacity: 0.5;
+}
+
+</style>
+<div style="overflow: hidden;" class="fixed-background"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-in-opacity.html b/layout/reftests/async-scrolling/bg-fixed-in-opacity.html
new file mode 100644
index 0000000000..e565487c7c
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-in-opacity.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50.23">
+<style>
+
+html {
+  scrollbar-width: none;
+}
+
+body {
+  margin: 0px;
+  position: relative;
+  height: 1200.23px;
+}
+
+.fixed-background {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 100px;
+  background: linear-gradient(blue, blue) no-repeat fixed 0px 200px;
+  background-size: 100px 100px;
+  opacity: 0.5;
+}
+
+</style>
+<div style="overflow: hidden;" class="fixed-background"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html b/layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html
new file mode 100644
index 0000000000..a59d053c49
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<style>
+
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+div {
+  height: 1400px;
+  background: url(repeatable-diagonal-gradient.png) top left / 512px 512px no-repeat
+}
+
+</style>
+
+<div></div>
+</html>
diff --git a/layout/reftests/async-scrolling/bg-fixed-transformed-image.html b/layout/reftests/async-scrolling/bg-fixed-transformed-image.html
new file mode 100644
index 0000000000..40ff239b3b
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-transformed-image.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+<style>
+
+html {
+  scrollbar-width: none;
+}
+
+body {
+  margin: 0;
+}
+
+div {
+  height: 1400px;
+  background: url(repeatable-diagonal-gradient.png) top left / 512px 512px fixed no-repeat
+}
+
+</style>
+
+<div></div>
+</html>
diff --git a/layout/reftests/async-scrolling/checkerboard-1-ref.html b/layout/reftests/async-scrolling/checkerboard-1-ref.html
new file mode 100644
index 0000000000..1c3a1e4555
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-1-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background-color: green; overflow:hidden">
+  <div style="position:absolute; left: 0px; top: 0px; width: 100px; height: 200px; background-color: red"></div>
+</body>
diff --git a/layout/reftests/async-scrolling/checkerboard-1.html b/layout/reftests/async-scrolling/checkerboard-1.html
new file mode 100644
index 0000000000..b41f745bb7
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="1800"
+      style="scrollbar-width:none">
+<!-- This is a simple test where we set the async-scroll position so that it
+     extends outside the displayport, and ensure that the checkerboarded area
+     is filled with the expected background color. -->
+<body style="background-color: green; height: 5000px">
+  <div style="position:absolute; left: 0px; top: 1800px; width: 100px; height: 400px; background-color: red"></div>
+</body>
diff --git a/layout/reftests/async-scrolling/checkerboard-2-ref.html b/layout/reftests/async-scrolling/checkerboard-2-ref.html
new file mode 100644
index 0000000000..6a12210c05
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-2-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background-color: green; overflow:hidden">
+  <div style="position:fixed; left: 0px; top: 0px; width: 100px; height: 500px; background-color: purple; z-index: -1"></div>
+  <div style="position:absolute; left: 0px; top: 0px; background-color: yellow; width: 100px; height: 200px"></div>
+  <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div>
+</body>
diff --git a/layout/reftests/async-scrolling/checkerboard-2.html b/layout/reftests/async-scrolling/checkerboard-2.html
new file mode 100644
index 0000000000..170705ba26
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="1800"
+      style="scrollbar-width: none">
+<!-- This is a test where we set the async-scroll position so that it
+     extends outside the displayport, but also have some fixed-position
+     elements in the mix. In particular, the purple element is below
+     (in z-order) the main scrolling content and should not be made visible
+     while checkerboarding; the checkerboarding code should cover it up
+     with the appropriate background color. -->
+<body style="background-color: green; height: 5000px">
+  <div style="position:fixed; left: 0px; top: 0px; width: 100px; height: 500px; background-color: purple; z-index: -1"></div>
+  <div style="position:absolute; left: 0px; top: 500px; background-color: yellow; width: 100px; height: 4500px"></div>
+  <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div>
+</body>
diff --git a/layout/reftests/async-scrolling/checkerboard-3-ref.html b/layout/reftests/async-scrolling/checkerboard-3-ref.html
new file mode 100644
index 0000000000..d00946ada6
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-3-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background-color: green; overflow:hidden">
+  <div style="position:fixed; left: 0px; top: 0px; width: 100px; height: 500px; background-color: purple; z-index: -1"></div>
+  <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div>
+</body>
diff --git a/layout/reftests/async-scrolling/checkerboard-3.html b/layout/reftests/async-scrolling/checkerboard-3.html
new file mode 100644
index 0000000000..4d3e7214a6
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-3.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="2100"
+      style="scrollbar-width: none">
+<!-- This is the exact same test as checkerboard-2.html, but we put
+     the scroll position entirely outside of the displayport. This ensures
+     that even we do the proper checkerboarding even if the layer would
+     otherwise be culled out in the compositor because it is not on-screen. -->
+<body style="background-color: green; height: 5000px">
+  <div style="position:fixed; left: 0px; top: 0px; width: 100px; height: 500px; background-color: purple; z-index: -1"></div>
+  <div style="position:absolute; left: 0px; top: 500px; background-color: yellow; width: 100px; height: 4500px"></div>
+  <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div>
+</body>
diff --git a/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1-ref.html b/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1-ref.html
new file mode 100644
index 0000000000..e125681101
--- /dev/null
+++ b/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:200px;
+              border:2px solid black; background: lime;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1.html b/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1.html
new file mode 100644
index 0000000000..471258a265
--- /dev/null
+++ b/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <div style="width:400px; height:200px; overflow:scroll;
+              scrollbar-width: none;
+              border:2px solid black; background: red;
+              contain:paint;"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+    <!-- This element is what we're hoping will fill the scrollport
+         when the reftest snapshot is taken: -->
+    <div style="background: lime; margin-top: 100px; height: 600px"></div>
+
+    <!-- This element is just to be sure the scrollframe's "contain:paint"
+         styling is actually having an effect. "contain:paint" should make the
+         scrollframe become a containing block for this fixed-pos element, and
+         then this element will position itself off the bottom of the
+         scrollframe and will be entirely clipped. If we fail to honor
+         "contain:paint" for some reason, then this element will instead use
+         the *viewport* as its containing block, and it'll show up in the
+         reftest snapshot and cause the reftest to fail. -->
+    <div style="position: fixed; top: 320px; width: 50px; height: 50px;
+                background: purple;"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/culling-1-ref.html b/layout/reftests/async-scrolling/culling-1-ref.html
new file mode 100644
index 0000000000..5a827ddb8c
--- /dev/null
+++ b/layout/reftests/async-scrolling/culling-1-ref.html
@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <title>Culling Test</title>
+    <meta name="viewport" content="width=device-width">
+  </head>
+  <body style="background:red" onload="loaded()">
+    <div style="height:390px; width:300px; overflow-y:auto; background:red; scrollbar-width:none">
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin-top:15px; width:300px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+    </div>
+    <script>
+      function loaded() {
+        var scrollableDiv = document.querySelector("div");
+        scrollableDiv.scrollTop = 10;
+      }
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/async-scrolling/culling-1.html b/layout/reftests/async-scrolling/culling-1.html
new file mode 100644
index 0000000000..c8a62602a4
--- /dev/null
+++ b/layout/reftests/async-scrolling/culling-1.html
@@ -0,0 +1,20 @@
+<html reftest-async-scroll>
+  <head>
+    <title>Culling Test</title>
+    <meta name="viewport" content="width=device-width">
+  </head>
+  <body style="background:red">
+    <div style="height:390px; width:300px; overflow-y:auto; background:red; scrollbar-width:none"
+         reftest-displayport-x="0" reftest-displayport-y="0"
+         reftest-displayport-w="300" reftest-displayport-h="400"
+         reftest-async-scroll-x="0" reftest-async-scroll-y="10">
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin-top:15px; width:300px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+      <div style="margin:15px; width:200px; height:40px; background:blue"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/async-scrolling/curtain-effect-1-ref.html b/layout/reftests/async-scrolling/curtain-effect-1-ref.html
new file mode 100644
index 0000000000..003cd019c5
--- /dev/null
+++ b/layout/reftests/async-scrolling/curtain-effect-1-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html style="margin: 0; padding: 0; z-index: 0">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body style="margin: 0; padding: 0; z-index: 0" onload="scrollTo(0,400)">
+
+<div style="height: 100vh">
+<div style="width: 100%;
+            height: 100vh;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 2">
+<div style="position: absolute;
+            width: 100%;
+            height: 100vh;
+            left: 0;
+            top: 0;
+            z-index: 3">
+<div style="position: relative;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(lime, blue);">
+</div></div></div></div>
+
+<div style="height: 100vh;
+            position: relative;
+            background: black;">
+<div style="position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            clip: rect(0, auto, auto, 0);">
+<div style="width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            position: fixed;
+            transform: translateZ(0);
+            z-index: 3">
+<div style="position: relative;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(yellow, red);">
+</div></div></div></div>
+</body></html>
diff --git a/layout/reftests/async-scrolling/curtain-effect-1.html b/layout/reftests/async-scrolling/curtain-effect-1.html
new file mode 100644
index 0000000000..09d57c23b1
--- /dev/null
+++ b/layout/reftests/async-scrolling/curtain-effect-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html style="margin: 0; padding: 0; z-index: 0" reftest-async-scroll reftest-async-scroll-y="400">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+</head>
+<body style="margin: 0; padding: 0; z-index: 0">
+
+<div style="height: 100vh">
+<div style="width: 100%;
+            height: 100vh;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 2">
+<div style="position: absolute;
+            width: 100%;
+            height: 100vh;
+            left: 0;
+            top: 0;
+            z-index: 3">
+<div style="position: relative;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(lime, blue);">
+</div></div></div></div>
+
+<div style="height: 100vh;
+            position: relative;
+            background: black;">
+<div style="position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            clip: rect(0, auto, auto, 0);">
+<div style="width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            position: fixed;
+            transform: translateZ(0);
+            z-index: 3">
+<div style="position: relative;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(yellow, red);">
+</div></div></div></div>
+</body></html>
diff --git a/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html b/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html
new file mode 100644
index 0000000000..9948693471
--- /dev/null
+++ b/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Check that the apz.disable_for_sle_pages pref behaves as expected</title>
+ </head>
+ <body style="height: 5000px; background-image:url(repeatable-diagonal-gradient.png);">
+  <div id="fake-fixed" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: green"></div>
+ </body>
+</html>
diff --git a/layout/reftests/async-scrolling/disable-apz-for-sle-pages.html b/layout/reftests/async-scrolling/disable-apz-for-sle-pages.html
new file mode 100644
index 0000000000..8db572f7a7
--- /dev/null
+++ b/layout/reftests/async-scrolling/disable-apz-for-sle-pages.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-snapshot-all reftest-no-flush" reftest-async-scroll
+      reftest-async-scroll-y="200">
+ <head>
+  <title>Check that the apz.disable_for_sle_pages pref behaves as expected</title>
+  <script>
+    // Upon load, this page invokes scrollTo() for a transparent element
+    // repeatedly. It triggers scroll events, which run the scroll listener
+    // below. The scroll listener updates the background-position-x of the div
+    // to make the div a scroll-linked-effect. The scroll-linked effect detector
+    // should then report that the document contains such an effect, which will
+    // disable APZ on the page. That in turn will cause the
+    // reftest-async-scroll-y to get ignored, and that's what the reftest checks
+    // for.
+
+    function start() {
+        let scrollPosition = 1;
+
+        scroller.addEventListener('scroll', function() {
+            // NOTE: Changing background-position-x doesn't change rendering for
+            // this element.
+            document.getElementById('scroll-linked-effect').style.backgroundPositionX =
+                scroller.scrollTop + "px";
+            if (scrollPosition == 1) {
+              setTimeout(done, 0);
+            }
+            scrollPosition++;
+            scroller.scrollTo(0, scrollPosition);
+        });
+
+        scroller.scrollTo(0, scrollPosition);
+    }
+    addEventListener('load', start, false);
+
+    function done() {
+        document.documentElement.classList.remove('reftest-wait');
+    }
+  </script>
+ </head>
+ <body style="height: 5000px; background-image:url(repeatable-diagonal-gradient.png);">
+  <div id="scroller" style="overflow: auto; width: 100px; height: 100px; scrollbar-width: none;">
+    <div style="height: 5000px;"></div>
+  </div>
+  <div id="scroll-linked-effect" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: green"></div>
+ </body>
+</html>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1-ref.html
new file mode 100644
index 0000000000..bbac8734d5
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    height: 2000px;
+    width: 100%;
+}
+#fixed {
+    width: 100%;
+    height: 200px;
+    position: fixed;
+    bottom: 0;
+    background: red;
+    margin-bottom: 50px;
+}
+</style>
+<body>
+  <div id="scrolled"></div>
+  <div id="fixed"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1.html b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1.html
new file mode 100644
index 0000000000..4f980e271c
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<!--
+  Tests that setting a fixed bottom margin in the compositor results
+  in the margin being applied to an element fixed to the bottom.
+
+  The fixed margin is specified as a test-pref in reftest.list.
+
+  The purpose of the fixed margin is to compensate for the transform that the
+  dynamic toolbar applies to the entire content area. We don't have a way of
+  simulating that transform in a reftest, so the fixed margin in isolation will
+  cause the fixed element to be offset from the bottom of the screen, and in
+  the ref page we use a regular CSS "margin-bottom" to match the rendering.
+-->
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    height: 2000px;
+    width: 100%;
+}
+#fixed {
+    width: 100%;
+    height: 200px;
+    position: fixed;
+    bottom: 0;
+    background: red;
+}
+</style>
+<body>
+  <div id="scrolled"></div>
+  <div id="fixed"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1-ref.html
new file mode 100644
index 0000000000..0fe473de2a
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    height: 2000px;
+    width: 100%;
+}
+#fixed {
+    width: 100%;
+    height: 200px;
+    position: fixed;
+    top: 0;
+    background: red;
+    margin-top: 50px;
+}
+</style>
+<body>
+  <div id="scrolled"></div>
+  <div id="fixed"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1.html b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1.html
new file mode 100644
index 0000000000..6123371f5f
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<!--
+  Tests that setting a fixed top margin in the compositor results
+  in the margin being applied to an element fixed to the top.
+
+  The fixed margin is specified as a test-pref in reftest.list.
+
+  The purpose of the fixed margin is to compensate for the transform that the
+  dynamic toolbar applies to the entire content area. We don't have a way of
+  simulating that transform in a reftest, so the fixed margin in isolation will
+  cause the fixed element to be offset from the top of the screen, and in
+  the ref page we use a regular CSS "margin-top" to match the rendering.
+-->
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    height: 2000px;
+    width: 100%;
+}
+#fixed {
+    width: 100%;
+    height: 200px;
+    position: fixed;
+    top: 0;
+    background: red;
+}
+</style>
+<body>
+  <div id="scrolled"></div>
+  <div id="fixed"></div>
+</body>
+</html>
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 0000000000..bcf56579c2
--- /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 0000000000..ebb7972d3a
--- /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 0000000000..c7147c01b1
--- /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 0000000000..4cb4e16d58
--- /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 0000000000..d180d26163
--- /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 0000000000..eb13c69a46
--- /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 0000000000..44318d939e
--- /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 0000000000..b94890ae26
--- /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 0000000000..87e6f91cf0
--- /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 0000000000..889f61e059
--- /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 0000000000..98aa3dd23b
--- /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 0000000000..1f024fa5ca
--- /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 0000000000..78922be7eb
--- /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 0000000000..30adcafc0d
--- /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 0000000000..1357b07703
--- /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 0000000000..f626cfa44f
--- /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 0000000000..d62fe0e5af
--- /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 0000000000..0005b0471e
--- /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 0000000000..489d7f9d98
--- /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 0000000000..acd01a3a93
--- /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 0000000000..640c8fa43c
--- /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 0000000000..9ea9d154f9
--- /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 0000000000..2d7e087fe3
--- /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 0000000000..3276137a99
--- /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 0000000000..7a01152ec5
--- /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 0000000000..dbe019fd34
--- /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 0000000000..9044587caf
--- /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 0000000000..292b268c0c
--- /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/dynamic-toolbar-sticky-bottom-1-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1-ref.html
new file mode 100644
index 0000000000..8ff4497812
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1-ref.html
@@ -0,0 +1,29 @@
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+
+    height: 2000px;
+    width: 100%;
+}
+#sticky {
+    width: 100%;
+    height: 200px;
+    position: sticky;
+    bottom: 70px;
+    background: red;
+    align-self: flex-end;
+}
+</style>
+<body>
+  <div id="scrolled">
+    <div id="sticky"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1.html
new file mode 100644
index 0000000000..b401ff21db
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<!--
+  Tests that setting a fixed bottom margin in the compositor results
+  in the margin being applied to an element sticky to the bottom.
+
+  The fixed margin is specified as a test-pref in reftest.list.
+
+  The purpose of the fixed margin is to compensate for the transform that the
+  dynamic toolbar applies to the entire content area. We don't have a way of
+  simulating that transform in a reftest, so the fixed margin in isolation will
+  cause the sticky element to be offset from the bottom of the screen.
+-->
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+
+    height: 2000px;
+    width: 100%;
+}
+#sticky {
+    width: 100%;
+    height: 200px;
+    position: sticky;
+    bottom: 20px;
+    background: red;
+    align-self: flex-end;
+}
+</style>
+<body>
+  <div id="scrolled">
+    <div id="sticky"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-top-1-ref.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-top-1-ref.html
new file mode 100644
index 0000000000..f9bc7b6ea2
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-top-1-ref.html
@@ -0,0 +1,29 @@
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+
+    height: 2000px;
+    width: 100%;
+}
+#sticky {
+    width: 100%;
+    height: 200px;
+    position: sticky;
+    top: 70px;
+    background: red;
+    align-self: flex-start;
+}
+</style>
+<body>
+  <div id="scrolled">
+    <div id="sticky"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/dynamic-toolbar-sticky-top-1.html b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-top-1.html
new file mode 100644
index 0000000000..1952a9c086
--- /dev/null
+++ b/layout/reftests/async-scrolling/dynamic-toolbar-sticky-top-1.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<!--
+  Tests that setting a fixed top margin in the compositor results
+  in the margin being applied to an element sticky to the top.
+
+  The fixed margin is specified as a test-pref in reftest.list.
+
+  The purpose of the fixed margin is to compensate for the transform that the
+  dynamic toolbar applies to the entire content area. We don't have a way of
+  simulating that transform in a reftest, so the fixed margin in isolation will
+  cause the fixed element to be offset from the top of the screen.
+-->
+<html>
+<meta name="viewport" content="width=device-width">
+<style>
+html {
+    scrollbar-width: none;
+}
+#scrolled {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+
+    height: 2000px;
+    width: 100%;
+}
+#sticky {
+    width: 100%;
+    height: 200px;
+    position: sticky;
+    top: 20px;
+    background: red;
+}
+</style>
+<body>
+  <div id="scrolled">
+    <div id="sticky"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/element-1-ref.html b/layout/reftests/async-scrolling/element-1-ref.html
new file mode 100644
index 0000000000..f7c40e2c5e
--- /dev/null
+++ b/layout/reftests/async-scrolling/element-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:500px; border:2px solid black">
+    <div style="height:450px"></div>
+    <div style="height:50px; background:purple"></div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/element-1.html b/layout/reftests/async-scrolling/element-1.html
new file mode 100644
index 0000000000..857c37cb7c
--- /dev/null
+++ b/layout/reftests/async-scrolling/element-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <!-- Test that element content scrolls asynchronously -->
+  <div style="width:400px; height:500px; overflow:scroll; scrollbar-width: none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div style="height:500px"></div>
+    <div style="height:100px; background:purple"></div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html b/layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html
new file mode 100644
index 0000000000..5996b776ed
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<meta name="viewport" content="width=device-width">
+<body style="height: 5000px; overflow:hidden">
+  <div style="display: block; margin-top: 100px; position:fixed; overflow:scroll; top: 0px; width: 50px; height: 100px"><div style="height:200px; background-color: red"></div></div>
+  <div style="display: block; margin-top: 20px; position:relative; left: 50px; width: 50px; height: 100px; background-color: red"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrollable-1.html b/layout/reftests/async-scrolling/fixed-pos-scrollable-1.html
new file mode 100644
index 0000000000..8ab6ac6217
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrollable-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="80"
+      style="scrollbar-width: none">
+<meta name="viewport" content="width=device-width">
+<body style="height: 5000px">
+  <!-- In this test the fixed-position element is a child of the scrollable layer, but
+       gets a clip rect because it is itself a container for scrolling sublayers. This
+       tests that such a layer is transformed correctly while an async scroll transform
+       is in effect. -->
+  <div style="display: block; margin-top: 100px; position:fixed; overflow:scroll; top: 0px; width: 50px; height: 100px"><div style="height:200px; background-color: red"></div></div>
+  <div style="display: block; margin-top: 100px; position:relative; left: 50px; width: 50px; height: 100px; background-color: red"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1-ref.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1-ref.html
new file mode 100644
index 0000000000..cf4e8ac543
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.greenSquare {
+  position: absolute;
+  top: 300px;
+  left: 100px;
+  width: 200px;
+  height: 200px;
+  background: lime;
+}
+
+</style>
+
+<div class="greenSquare"></div>
+
+<script>
+
+document.documentElement.scrollTop = 200;
+
+</script>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1.html
new file mode 100644
index 0000000000..1313239431
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="200">
+
+<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.absoluteClip {
+  position: absolute;
+  top: 300px;
+  left: 100px;
+  width: 200px;
+  height: 200px;
+  background: red;
+  clip: rect(auto auto auto auto);
+}
+
+.fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(lime, lime) black 0 100px no-repeat;
+  background-size: 100% 200px;
+}
+
+</style>
+
+<div class="absoluteClip">
+  <div class="fixed"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2-ref.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2-ref.html
new file mode 100644
index 0000000000..e669c97d44
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:fixed should not be clipped by the subframe clip, but it should be clipped by the "clip" clip, and the "clip" clip should be moved by the subframe.</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.subframe {
+  margin-top: 300px;
+  width: 400px;
+  height: 400px;
+  overflow: auto;
+}
+
+.subframeScrolled {
+  height: 800px;
+}
+
+.greenSquare {
+  position: absolute;
+  top: 150px;
+  left: 100px;
+  width: 200px;
+  height: 200px;
+  background: lime;
+}
+
+</style>
+
+<div class="subframe">
+  <div class="subframeScrolled"></div>
+</div>
+
+<div class="greenSquare"></div>
+
+<script>
+
+document.documentElement.scrollTop = 50;
+document.querySelector('.subframe').scrollTop = 150;
+
+</script>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2.html
new file mode 100644
index 0000000000..a2477b520d
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+
+<title>position:fixed should not be clipped by the subframe clip, but it should be clipped by the "clip" clip, and the "clip" clip should be moved by the subframe.</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.subframe {
+  margin-top: 300px;
+  width: 400px;
+  height: 400px;
+  overflow: auto;
+}
+
+.subframeScrolled {
+  height: 800px;
+  position: relative;
+}
+
+.absoluteClip {
+  position: absolute;
+  top: 0px;
+  left: 100px;
+  width: 200px;
+  height: 200px;
+  background: red;
+  clip: rect(auto auto auto auto);
+}
+
+.fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(lime, lime) black 0 100px no-repeat;
+  background-size: 100% 200px;
+}
+
+</style>
+
+<div class="subframe"
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="400" reftest-displayport-h="800"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="150">
+  <div class="subframeScrolled">
+    <div class="absoluteClip">
+      <div class="fixed"></div>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3-ref.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3-ref.html
new file mode 100644
index 0000000000..778ea52a76
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.subframe {
+  position: relative;
+  left: 10px;
+  top: 10px;
+  width: 500px;
+  height: 600px;
+  overflow: auto;
+  box-shadow: 0 0 0 2px black;
+}
+
+.scrolled {
+  height: 4000px;
+}
+
+.greenSquare {
+  position: absolute;
+  top: 300px;
+  left: 100px;
+  width: 200px;
+  height: 200px;
+  background: lime;
+}
+
+</style>
+
+<div class="subframe">
+  <div class="scrolled">
+    <div class="greenSquare"></div>
+  </div>
+</div>
+
+<script>
+
+document.documentElement.scrollTop = 20;
+document.querySelector('.subframe').scrollTop = 200;
+
+</script>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3.html
new file mode 100644
index 0000000000..83d82cb8fc
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="20">
+
+<title>like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.transform {
+  transform: translate(10px, 10px);
+  width: 500px;
+}
+
+.subframe {
+  height: 600px;
+  overflow: auto;
+  box-shadow: 0 0 0 2px black;
+}
+
+.scrolled {
+  height: 4000px;
+  position: relative;
+}
+
+.absoluteClip {
+  position: absolute;
+  top: 300px;
+  left: 100px;
+  width: 200px;
+  height: 200px;
+  background: red;
+  clip: rect(auto auto auto auto);
+}
+
+.fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(lime, lime) black 0 100px no-repeat;
+  background-size: 100% 200px;
+}
+
+</style>
+
+<div class="transform">
+  <div class="subframe"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="200">
+    <div class="scrolled">
+      <div class="absoluteClip">
+        <div class="fixed"></div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4-ref.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4-ref.html
new file mode 100644
index 0000000000..a338c1545e
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: This is fixed-pos-scrolled-clip-1.html in an iframe</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.subframe {
+  position: relative;
+  left: 10px;
+  top: 10px;
+  width: 500px;
+  height: 600px;
+  overflow: auto;
+  box-shadow: 0 0 0 2px black;
+}
+
+.scrolled {
+  height: 4000px;
+}
+
+.greenSquare {
+  position: absolute;
+  top: 300px;
+  left: 100px;
+  width: 200px;
+  height: 200px;
+  background: lime;
+}
+
+</style>
+
+<div class="subframe">
+  <div class="scrolled">
+    <div class="greenSquare"></div>
+  </div>
+</div>
+
+<script>
+
+document.documentElement.scrollTop = 20;
+document.querySelector('.subframe').scrollTop = 200;
+
+</script>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4.html
new file mode 100644
index 0000000000..6c141530ef
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="20">
+
+<title>This is fixed-pos-scrolled-clip-1.html in an iframe</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.subframe {
+  position: relative;
+  left: 10px;
+  top: 10px;
+  border: 0;
+  width: 500px;
+  height: 600px;
+  overflow: auto;
+  box-shadow: 0 0 0 2px black;
+}
+
+</style>
+
+<iframe class="subframe" src="fixed-pos-scrolled-clip-1.html"></iframe>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-5-ref.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-5-ref.html
new file mode 100644
index 0000000000..5cf6a9375d
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-5-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en-US"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>The scrolled clip on the fixed element is not respected</title>
+
+</head><body><div style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: lime;
+    width: 100%;
+    height: 200px;">
+</div>
+</body></html>
diff --git a/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-5.html b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-5.html
new file mode 100644
index 0000000000..44655ff420
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-5.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-US"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>The scrolled clip on the fixed element is not respected</title>
+
+</head><body><div style="
+    position: absolute;
+    top: 0;
+    left: 0;
+    clip: rect(auto auto auto auto);
+    width: 100%;
+    height: 200px;">
+
+    <div style="background-image: linear-gradient(lime, lime);
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        transform: translateZ(0px)">
+    </div>
+
+</div>
+</body></html>
diff --git a/layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html b/layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html
new file mode 100644
index 0000000000..12b6ee367a
--- /dev/null
+++ b/layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+.opacity {
+  opacity: 0.8;
+}
+
+.box {
+  left: 0;
+  top: 200px;
+  width: 200px;
+  height: 200px;
+}
+
+.absolute {
+  position: absolute;
+  background: green;
+  top: 100px;
+}
+
+.fixed {
+  position: absolute;
+  background: blue;
+}
+
+</style>
+
+<div class="opacity">
+  <div class="box absolute"></div>
+  <div class="box fixed"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/group-opacity-surface-size-1.html b/layout/reftests/async-scrolling/group-opacity-surface-size-1.html
new file mode 100644
index 0000000000..c8562222ba
--- /dev/null
+++ b/layout/reftests/async-scrolling/group-opacity-surface-size-1.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="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+<style>
+
+html {
+  scrollbar-width: none;
+}
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.opacity {
+  opacity: 0.8;
+}
+
+.box {
+  left: 0;
+  top: 200px;
+  width: 200px;
+  height: 200px;
+}
+
+.absolute {
+  position: absolute;
+  background: green;
+}
+
+.fixed {
+  position: fixed;
+  background: blue;
+}
+
+</style>
+
+<div class="opacity">
+  <div class="box absolute"></div>
+  <div class="box fixed"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/iframe-1-ref.html b/layout/reftests/async-scrolling/iframe-1-ref.html
new file mode 100644
index 0000000000..76537c52c1
--- /dev/null
+++ b/layout/reftests/async-scrolling/iframe-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<iframe style="width:300px; height:600px; border:2px solid blue"
+        srcdoc="<!DOCTYPE HTML>
+                <html style='overflow:hidden'>
+                <div style='height:450px'></div>
+                <div style='height:200px; background:purple'>
+                  <div style='display:inline-block; width:20px; height:20px; background:yellow;'></div>
+                </div>"></iframe>
diff --git a/layout/reftests/async-scrolling/iframe-1.html b/layout/reftests/async-scrolling/iframe-1.html
new file mode 100644
index 0000000000..5d6406f5a7
--- /dev/null
+++ b/layout/reftests/async-scrolling/iframe-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+<iframe style="width:300px; height:600px; border:2px solid blue"
+        srcdoc="<!DOCTYPE HTML>
+                <html reftest-displayport-x='0' reftest-displayport-y='0'
+                      reftest-displayport-w='800' reftest-displayport-h='2000'
+                      reftest-async-scroll-x='0' reftest-async-scroll-y='50' style='scrollbar-width: none'>
+                <div style='height:500px'></div>
+                <div style='height:200px; background:purple'>
+                  <div style='display:inline-block; width:20px; height:20px; background:yellow;'></div>
+                </div>"></iframe>
diff --git a/layout/reftests/async-scrolling/nested-1-ref.html b/layout/reftests/async-scrolling/nested-1-ref.html
new file mode 100644
index 0000000000..2ad0568e19
--- /dev/null
+++ b/layout/reftests/async-scrolling/nested-1-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:500px; overflow:hidden; border:2px solid black">
+    <div style="width:300px; height:800px; overflow:hidden; border:2px solid blue; margin-top:-50px">
+      <div style="height:450px"></div>
+      <div style="height:200px; background:purple"></div>
+    </div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/nested-1.html b/layout/reftests/async-scrolling/nested-1.html
new file mode 100644
index 0000000000..953fe0c6f8
--- /dev/null
+++ b/layout/reftests/async-scrolling/nested-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <!-- Test that nested active scrolling elements work -->
+  <div style="width:400px; height:500px; overflow:scroll; scrollbar-width: none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div style="width:300px; height:800px; overflow:scroll; scrollbar-width: none; border:2px solid blue"
+         reftest-displayport-x="0" reftest-displayport-y="0"
+         reftest-displayport-w="800" reftest-displayport-h="2000"
+         reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+      <div style="height:500px"></div>
+      <div style="height:200px; background:purple"></div>
+      <div style="height:500px"></div>
+    </div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/nested-2-ref.html b/layout/reftests/async-scrolling/nested-2-ref.html
new file mode 100644
index 0000000000..10ef23745e
--- /dev/null
+++ b/layout/reftests/async-scrolling/nested-2-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:500px; overflow:hidden; border:2px solid black">
+    <div style="width:300px; height:100px; overflow:hidden; border:2px solid blue; margin-top: 50px">
+      <div style="height:200px; background:purple"></div>
+    </div>
+    <div class="filler" style="height: 1000px"></div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/nested-2.html b/layout/reftests/async-scrolling/nested-2.html
new file mode 100644
index 0000000000..714761ab0b
--- /dev/null
+++ b/layout/reftests/async-scrolling/nested-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <!-- Test that nested active scrolling elements work -->
+  <div style="width:400px; height:500px; overflow:scroll; scrollbar-width: none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div style="width:300px; height:100px; overflow:scroll; scrollbar-width: none; border:2px solid blue; margin-top: 100px"
+         reftest-displayport-x="0" reftest-displayport-y="0"
+         reftest-displayport-w="800" reftest-displayport-h="2000"
+         reftest-async-scroll-x="0" reftest-async-scroll-y="0">
+      <div style="height:200px; background:purple"></div>
+    </div>
+    <div class="filler" style="height: 1000px"></div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/no-overscroll-ref.html b/layout/reftests/async-scrolling/no-overscroll-ref.html
new file mode 100644
index 0000000000..e6c2a479f1
--- /dev/null
+++ b/layout/reftests/async-scrolling/no-overscroll-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 0px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html
new file mode 100644
index 0000000000..64795e5cfd
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en"
+     reftest-async-scroll
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="800" reftest-displayport-h="2000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="1200">
+<meta charset="utf-8">
+<title>Scrolled blend mode</title>
+
+<style>
+
+body {
+  margin: 0;
+  padding: 100px;
+  height: 4000px;
+  background: white;
+}
+
+#outer {
+  height: 4000px;
+  overflow: hidden;
+}
+
+#inner-contents {
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  mix-blend-mode: multiply;
+  margin-top: 1400px;
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="inner-contents"></div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html
new file mode 100644
index 0000000000..d85dc23e69
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en"
+     reftest-async-scroll
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="800" reftest-displayport-h="2000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="1200">
+<meta charset="utf-8">
+<title>Scrolled blend mode</title>
+
+<style>
+
+body {
+  margin: 0;
+  padding: 100px;
+  height: 4000px;
+  background: white;
+}
+
+#outer {
+  height: 4000px;
+  overflow: hidden;
+}
+
+#inner {
+  transform: translateX(0);
+}
+
+#inner-contents {
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  mix-blend-mode: multiply;
+  margin-top: 1400px;
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="inner-contents"></div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html
new file mode 100644
index 0000000000..e128e29872
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en"
+     reftest-async-scroll
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="800" reftest-displayport-h="2000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="1200">
+<meta charset="utf-8">
+<title>Scrolled blend mode</title>
+
+<style>
+
+body {
+  margin: 0;
+  padding: 100px;
+  height: 4000px;
+  background: white;
+}
+
+#outer {
+  height: 4000px;
+  overflow: hidden;
+}
+
+#inner-contents {
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  mix-blend-mode: multiply;
+  margin-top: 1400px;
+  transform: translateX(0);
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="inner-contents"></div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html
new file mode 100644
index 0000000000..8834747244
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en"
+     reftest-async-scroll
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="800" reftest-displayport-h="2000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="1200">
+<meta charset="utf-8">
+<title>Scrolled blend mode</title>
+
+<style>
+
+body {
+  margin: 0;
+  padding: 100px;
+  height: 4000px;
+  background: white;
+}
+
+#outer {
+  height: 4000px;
+  overflow: hidden;
+}
+
+#inner {
+  transform: translateX(0);
+}
+
+#inner-contents {
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  mix-blend-mode: multiply;
+  margin-top: 1400px;
+  transform: translateX(0);
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+    <div id="inner-contents"></div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html
new file mode 100644
index 0000000000..65660c6ca7
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Scrolled blend mode</title>
+
+<style>
+
+body {
+  margin: 0;
+  padding: 100px;
+  height: 4000px;
+  background: white;
+}
+
+#inner-contents {
+  border: 1px solid black;
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  margin-top: 1400px;
+}
+
+</style>
+
+<div id="inner-contents"></div>
+
+<script>
+
+document.documentElement.scrollTop = 1200;
+
+</script>
diff --git a/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html
new file mode 100644
index 0000000000..da251e5aaf
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>Reference: Active opacity should be rendered if it's inside the display port, even if it's currently offscreen</title>
+
+<style>
+
+#scrollbox {
+  border: 1px solid black;
+  width: 200px;
+  height: 200px;
+  overflow: hidden;
+}
+
+#scrolledContent {
+  height: 1000px;
+}
+
+#opacity {
+  will-change: opacity;
+  opacity: 0.5;
+  margin-top: 250px;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid blue;
+}
+
+
+</style>
+
+<div id="scrollbox">
+  <div id="scrolledContent">
+    <div id="opacity"></div>
+  </div>
+</div>
+
+<script>
+
+document.getElementById("scrollbox").scrollTop = 150;
+
+</script>
diff --git a/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html
new file mode 100644
index 0000000000..b89d5cd130
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<meta charset="utf-8">
+<title>Active opacity should be rendered if it's inside the display port, even if it's currently offscreen</title>
+
+<style>
+
+.scrollbox {
+  border: 1px solid black;
+  width: 200px;
+  height: 200px;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
+.scrolledContent {
+  height: 1000px;
+}
+
+.opacity {
+  will-change: opacity;
+  opacity: 0.5;
+  margin-top: 250px;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid blue;
+}
+
+
+</style>
+
+<div class="scrollbox"
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="200" reftest-displayport-h="1000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="150">
+  <div class="scrolledContent">
+    <div class="opacity"></div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/opaque-fractional-displayport-1.html b/layout/reftests/async-scrolling/opaque-fractional-displayport-1.html
new file mode 100644
index 0000000000..8a73a7f309
--- /dev/null
+++ b/layout/reftests/async-scrolling/opaque-fractional-displayport-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Make sure the scrolled layer is opaque even if the scrolled area is fractional</title>
+
+<style>
+
+body {
+  margin: 0;
+}
+
+.scrollbox {
+  margin: 50px;
+  width: 200px;
+  height: 200px;
+  overflow: auto;
+
+  /* Make the background "non-uniform" so that the scrolled layer does not
+   * pull up a background color. */
+  background: linear-gradient(to bottom, white, transparent);
+}
+
+.scrolled-contents {
+  height: 300.2px;
+  background-color: lime;
+  box-sizing: border-box;
+}
+
+.transparent-overlap-of-fractional-edge {
+  margin: 0 20px;
+  height: 40px;
+  /* This element has a box-shadow that overlaps the bottom of the scrolled
+   * area. Box shadows do not expand the scrollable area. */
+  box-shadow: 0 280px rgba(0, 0, 255, 0.5);
+}
+
+</style>
+
+<body>
+
+<div class="scrollbox"
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="200" reftest-displayport-h="300.2"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="0">
+  <div class="scrolled-contents">
+    <div class="transparent-overlap-of-fractional-edge reftest-opaque-layer">
+      <!-- This element has the magic "reftest-opaque-layer" class which
+           constitutes the actual test here. -->
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/async-scrolling/opaque-fractional-displayport-2.html b/layout/reftests/async-scrolling/opaque-fractional-displayport-2.html
new file mode 100644
index 0000000000..ddcac0fe85
--- /dev/null
+++ b/layout/reftests/async-scrolling/opaque-fractional-displayport-2.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Make sure the scrolled layer is opaque even if the scrolled area is fractional</title>
+
+<style>
+
+body {
+  margin: 0;
+}
+
+.scrollbox {
+  margin: 50px;
+  width: 200px;
+  height: 200px;
+  overflow: auto;
+
+  /* Make the background "non-uniform" so that the scrolled layer does not
+   * pull up a background color. */
+  background: linear-gradient(to bottom, white, transparent);
+}
+
+.scrolled-contents {
+  height: 300.2px;
+  background-color: lime;
+  box-sizing: border-box;
+  border: 1px solid lime;
+}
+
+.transparent-overlap-of-fractional-edge {
+  margin: -10px 20px 0;
+  height: 40px;
+  background-color: rgba(0, 0, 255, 0.5);
+}
+
+</style>
+
+<body>
+
+<div class="scrollbox"
+     reftest-displayport-x="0" reftest-displayport-y="-100.2"
+     reftest-displayport-w="200" reftest-displayport-h="300.2"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="0">
+  <div class="scrolled-contents">
+    <div class="transparent-overlap-of-fractional-edge reftest-opaque-layer">
+      <!-- This element has the magic "reftest-opaque-layer" class which
+           constitutes the actual test here. -->
+    </div>
+  </div>
+</div>
+
+<script>
+
+document.querySelector(".scrollbox").scrollTop = 100000; /* will end up at 100.2 */
+
+</script>
diff --git a/layout/reftests/async-scrolling/overscroll-disabled.html b/layout/reftests/async-scrolling/overscroll-disabled.html
new file mode 100644
index 0000000000..3c4927c9d0
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-disabled.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-200">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 0px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a viewport is rendered
+      as having the content create a gutter, and that
+      the overscroll is reduced by some factor such that 
+      a 100px scroll must produce a rendered translation of less than
+      100px.
+
+      Current overscroll physics mean that an instantaneous overscroll
+      by 200px produces an 8px gutter. This is governed by the logic in
+      Axis::ApplyResistance(); if that logic is changed, this test will
+      need to be modified to account for the new result.
+  -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-fixed-iframe-overscroll.html b/layout/reftests/async-scrolling/overscroll-fixed-iframe-overscroll.html
new file mode 100644
index 0000000000..d4af4f2235
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-fixed-iframe-overscroll.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0px;
+      padding: 0px;
+      border: 0px;
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+      border: 0px;
+      display: block;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a iframe does not
+       cause the fixed item in the iframe to participate in the
+       transform.
+  -->
+  <iframe src="data:text/html,
+    <!DOCTYPE HTML>
+    <html reftest-displayport-x='0' reftest-displayport-y='0'
+          reftest-displayport-w='800' reftest-displayport-h='2000'
+          reftest-async-scroll-x='0' reftest-async-scroll-y='-200'
+          style='scrollbar-width:none'>
+    <body style='padding: 0; margin: 0; border: 0'>
+      <div style='position: fixed; padding: 0; margin: 0; border: 0; background: green; width: 200px; height: 200px'>
+      </div>
+    </body>
+    </html>
+  ">
+  </iframe>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-fixed-iframe.html b/layout/reftests/async-scrolling/overscroll-fixed-iframe.html
new file mode 100644
index 0000000000..d2e55cf645
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-fixed-iframe.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-200">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0px;
+      padding: 0px;
+      border: 0px;
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+      border: 0px;
+      display: block;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a viewport is
+       rendered as having the content create a gutter, and that
+       the overscroll is reduced by some factor such that
+       a 100px scroll must produce a rendered translation of less than
+       100px.
+
+       Current overscroll physics mean that an instantaneous overscroll
+       by 200px produces an 8px gutter. This is governed by the logic in
+       Axis::ApplyResistance(); if that logic is changed, this test will
+       need to be modified to account for the new result.
+  -->
+  <iframe src="data:text/html,
+    <!DOCTYPE HTML>
+    <html reftest-displayport-x='0' reftest-displayport-y='0'
+          reftest-displayport-w='800' reftest-displayport-h='2000'
+          style='scrollbar-width:none'>
+    <body style='padding: 0; margin: 0; border: 0'>
+      <div style='position: fixed; padding: 0; margin: 0; border: 0; background: green; width: 200px; height: 200px'>
+      </div>
+    </body>
+    </html>
+  ">
+  </iframe>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-fixed-transform.html b/layout/reftests/async-scrolling/overscroll-fixed-transform.html
new file mode 100644
index 0000000000..95eab157f0
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-fixed-transform.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-200">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div.container {
+      overflow: scroll;
+      width: 100%;
+      height: 100%;
+      transform: translate(0px);
+      scrollbar-width: none;
+    }
+    div.fixed {
+      position: fixed;
+      top: 0px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a transformed container is
+       rendered as having the content create a gutter, and that
+       the overscroll is reduced by some factor such that
+       a 100px scroll must produce a rendered translation of less than
+       100px.
+
+       Current overscroll physics mean that an instantaneous overscroll
+       by 200px produces an 8px gutter. This is governed by the logic in
+       Axis::ApplyResistance(); if that logic is changed, this test will
+       need to be modified to account for the new result.
+  -->
+  <div class="container">
+    <div class="fixed">
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-fixed.html b/layout/reftests/async-scrolling/overscroll-fixed.html
new file mode 100644
index 0000000000..68410fffcf
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-fixed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-200">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      left: 0px;
+      top: 0px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a viewport does not
+       cause a position fixed element to be transformed if the position
+       fixed element's containing block is the current viewport.
+  -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-ref.html b/layout/reftests/async-scrolling/overscroll-ref.html
new file mode 100644
index 0000000000..45e7535e64
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 8px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-scrollbar-ref.html b/layout/reftests/async-scrolling/overscroll-scrollbar-ref.html
new file mode 100644
index 0000000000..75a9bfeab6
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-scrollbar-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      /* The 3028 here was arrived at experimentally to match to
+         produce a scrollbar of approximately the same length as
+         the one of the test page squished by the overscroll. */
+      height: 3028px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 8px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-scrollbar.html b/layout/reftests/async-scrolling/overscroll-scrollbar.html
new file mode 100644
index 0000000000..ab567ecfc0
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-scrollbar.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-200">
+<head>
+  <style>
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 0px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a viewport is rendered
+      as having the content create a gutter, and that
+      the overscroll is reduced by some factor such that 
+      a 100px scroll must produce a rendered translation of less than
+      100px.
+
+      Current overscroll physics mean that an instantaneous overscroll
+      by 200px produces an 8px gutter. This is governed by the logic in
+      Axis::ApplyResistance(); if that logic is changed, this test will
+      need to be modified to account for the new result.
+  -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll-subframe.html b/layout/reftests/async-scrolling/overscroll-subframe.html
new file mode 100644
index 0000000000..752253a4c7
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll-subframe.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<head>
+  <style>
+    * {
+      scrollbar-width: none;
+    }
+    body {
+      margin: 0;
+    }
+    #scroller {
+      overflow: auto;
+      width: 400px;
+      height: 400px;
+    }
+    #content {
+      top: 0px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+    #spacer {
+      height: 2000px;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a viewport is rendered
+      as having the content create a gutter, and that
+      the overscroll is reduced by some factor such that 
+      a 100px scroll must produce a rendered translation of less than
+      100px.
+
+      Current overscroll physics mean that an instantaneous overscroll
+      by 200px produces an 8px gutter. This is governed by the logic in
+      Axis::ApplyResistance(); if that logic is changed, this test will
+      need to be modified to account for the new result.
+  -->
+  <div id="scroller"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="-200">
+    <div id="content"></div>
+    <div id="spacer"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/overscroll.html b/layout/reftests/async-scrolling/overscroll.html
new file mode 100644
index 0000000000..3c4927c9d0
--- /dev/null
+++ b/layout/reftests/async-scrolling/overscroll.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-200">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 0px;
+      width: 200px;
+      height: 200px;
+      background: green;
+    }
+  </style>
+</head>
+<body >
+  <!-- Test that an overscroll past one end of a viewport is rendered
+      as having the content create a gutter, and that
+      the overscroll is reduced by some factor such that 
+      a 100px scroll must produce a rendered translation of less than
+      100px.
+
+      Current overscroll physics mean that an instantaneous overscroll
+      by 200px produces an 8px gutter. This is governed by the logic in
+      Axis::ApplyResistance(); if that logic is changed, this test will
+      need to be modified to account for the new result.
+  -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-1-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-1-ref.html
new file mode 100644
index 0000000000..433aa7abb4
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Perspective scrolling</title>
+
+<style>
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  height: 100%;
+  perspective: 1px;
+  overflow: auto;
+  margin: 0;
+}
+
+div {
+  height: 4000px;
+  margin: 200px 100px;
+  border: 10px solid black;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+document.body.scrollTop = 100;
+
+</script>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-1.html b/layout/reftests/async-scrolling/perspective-scrolling-1.html
new file mode 100644
index 0000000000..cab2e4f8c4
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Perspective scrolling</title>
+
+<style>
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  height: 100%;
+  perspective: 1px;
+  overflow: auto;
+  margin: 0;
+}
+
+div {
+  transform-style: preserve-3d;
+  height: 4000px;
+  margin: 200px 100px;
+  border: 10px solid black;
+}
+
+</style>
+
+<body reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+
+<div></div>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-2-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-2-ref.html
new file mode 100644
index 0000000000..720fbfa8df
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Perspective in unscrolled state</title>
+
+<style>
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  height: 100%;
+  perspective: 1px;
+  overflow: auto;
+  margin: 0;
+}
+
+.transformed {
+  margin: 200px 100px;
+  width: 200px;
+  height: 200px;
+  border: 10px solid black;
+}
+
+.spacer {
+  height: 4000px;
+}
+
+</style>
+
+<div class="transformed"></div>
+<div class="spacer"></div>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-2.html b/layout/reftests/async-scrolling/perspective-scrolling-2.html
new file mode 100644
index 0000000000..e2d7c86669
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Perspective in unscrolled state</title>
+
+<style>
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  perspective: 1px;
+  perspective-origin: top left;
+  overflow: auto;
+}
+
+.transformed {
+  transform: translateZ(-1px) scale(2);
+  transform-origin: -100px -200px;
+  margin: 200px 100px;
+  width: 200px;
+  height: 200px;
+  border: 10px solid black;
+}
+
+.spacer {
+  height: 4000px;
+}
+
+</style>
+
+<body reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="0"> <!-- no async scrolling -->
+
+<div class="transformed"></div>
+<div class="spacer"></div>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-3-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-3-ref.html
new file mode 100644
index 0000000000..9c8474d6c0
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-3-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Perspective in scrolled state</title>
+
+<style>
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  height: 100%;
+  perspective: 1px;
+  overflow: auto;
+  margin: 0;
+}
+
+.transformed {
+  margin: 300px 100px 100px;
+  width: 200px;
+  height: 200px;
+  border: 10px solid black;
+}
+
+.spacer {
+  height: 4000px;
+}
+
+</style>
+
+<div class="transformed"></div>
+<div class="spacer"></div>
+
+<script>
+
+document.body.scrollTop = 200;
+
+</script>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-3.html b/layout/reftests/async-scrolling/perspective-scrolling-3.html
new file mode 100644
index 0000000000..8211c52afb
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-3.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Perspective in scrolled state</title>
+
+<style>
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  perspective: 1px;
+  perspective-origin: top left;
+  overflow: auto;
+}
+
+.transformed {
+  transform: translateZ(-1px) scale(2);
+  transform-origin: -100px -200px;
+  margin: 200px 100px;
+  width: 200px;
+  height: 200px;
+  border: 10px solid black;
+}
+
+.spacer {
+  height: 4000px;
+}
+
+</style>
+
+<body reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="200">
+
+<div class="transformed"></div>
+<div class="spacer"></div>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-4-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-4-ref.html
new file mode 100644
index 0000000000..4f5b1fc010
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-4-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Reference: Perspective scrolling with nested clips</title>
+
+<style>
+
+html {
+  padding: 50px 0 3000px;
+}
+
+body {
+  margin: 0;
+}
+
+.scrollbox {
+  width: 600px;
+  height: 500px;
+  perspective: 1px;
+  overflow: auto;
+}
+
+.transformed {
+  will-change: transform;
+  width: 200px;
+  height: 200px;
+  margin: 200px 100px;
+  border: 10px solid black;
+}
+
+.spacer {
+  height: 4000px;
+}
+
+</style>
+
+<div class="scrollbox">
+  <div class="transformed"></div>
+  <div class="spacer"></div>
+</div>
+
+<script>
+document.documentElement.scrollTop = 250;
+</script>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-4.html b/layout/reftests/async-scrolling/perspective-scrolling-4.html
new file mode 100644
index 0000000000..49453d74df
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en"
+     reftest-async-scroll
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="800" reftest-displayport-h="1000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="250">
+<meta charset="utf-8">
+<title>Perspective scrolling with nested clips</title>
+
+<style>
+
+html {
+  padding: 50px 0 3000px;
+}
+
+body {
+  margin: 0;
+}
+
+.scrollbox {
+  width: 600px;
+  height: 500px;
+  perspective: 1px;
+  overflow: auto;
+}
+
+.transformed {
+  will-change: transform;
+  width: 200px;
+  height: 200px;
+  margin: 200px 100px;
+  border: 10px solid black;
+}
+
+.spacer {
+  height: 4000px;
+}
+
+</style>
+
+<div class="scrollbox"
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="600" reftest-displayport-h="2000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="0">
+
+  <div class="transformed"></div>
+  <div class="spacer"></div>
+
+</div>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-5-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-5-ref.html
new file mode 100644
index 0000000000..dc41f00d04
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-5-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference</title>
+<style>
+  * { margin: 0; padding: 0 }
+
+  div {
+    width: 200px;
+    height: 200px;
+    background-color: lime;
+  }
+</style>
+<div></div>
diff --git a/layout/reftests/async-scrolling/perspective-scrolling-5.html b/layout/reftests/async-scrolling/perspective-scrolling-5.html
new file mode 100644
index 0000000000..cfbf2d2228
--- /dev/null
+++ b/layout/reftests/async-scrolling/perspective-scrolling-5.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Perspective scrolling</title>
+<style>
+html {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  overflow: auto;
+  height: 100%;
+  scrollbar-width: none;
+  margin: 0;
+}
+
+.scene {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  perspective: 100px;
+  transform-style: preserve-3d;
+}
+
+.face {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 0;
+  left: 0;
+}
+
+.front  {
+  background-color: lime;
+}
+
+/*
+ * This one should never be visible, and should be always
+ * behind the front face.
+ */
+.back {
+  width: 400px;
+  height: 400px;
+  top: -100px;
+  left: -100px;
+  transform: translateZ(-100px);
+  background-color: red;
+}
+</style>
+
+<body reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="200">
+<div style="height: 200px"></div>
+<div class="scene">
+  <div class="face front"></div>
+  <div class="face back"></div>
+</div>
+<div style="height: 5000px"></div>
diff --git a/layout/reftests/async-scrolling/position-fixed-1-ref.html b/layout/reftests/async-scrolling/position-fixed-1-ref.html
new file mode 100644
index 0000000000..b373cc1142
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-1.html b/layout/reftests/async-scrolling/position-fixed-1.html
new file mode 100644
index 0000000000..d30ada3c23
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px">
+  <!-- Test that position:fixed content stays fixed when we async-scroll -->
+  <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-2-ref.html b/layout/reftests/async-scrolling/position-fixed-2-ref.html
new file mode 100644
index 0000000000..8804dd67b4
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-2-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; height:3000px">
+  <div style="position:absolute; top:-25px; left:0; width:100px; height:200px; background:yellow; z-index:1"></div>
+  <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px">
+    <div style="position:absolute; background:cyan; top:40px; left:0; width:50px; height:300px;"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-2.html b/layout/reftests/async-scrolling/position-fixed-2.html
new file mode 100644
index 0000000000..434c73aa2a
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px">
+  <!-- test that a fixed-pos element whose contents are interleaved in z-order
+       with non-scrolling content works correctly with async scrolling -->
+  <div style="position:absolute; top:25px; left:0; width:100px; height:200px; background:yellow; z-index:1"></div>
+  <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px">
+    <div style="position:absolute; background:cyan; top:40px; left:0; width:50px; height:300px;"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-1-ref.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-1-ref.html
new file mode 100644
index 0000000000..f03a8f8131
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=2.0">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      top: -50px;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-1.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-1.html
new file mode 100644
index 0000000000..419bd74208
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="1000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      reftest-async-zoom="2.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      top: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <!-- Test that position:fixed elements are attached to the layout viewport
+       instead of the visual viewport.
+
+       An async scroll of 50 CSS pixels will scroll the visual viewport by 100
+       screen pixels (since async zoom is set to 2.0) and result in the top
+       half of the div being scrolled out of view. -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-2-ref.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-2-ref.html
new file mode 100644
index 0000000000..324c5f5534
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=2.0">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-2.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-2.html
new file mode 100644
index 0000000000..8d672ecad3
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-2.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="1000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-50"
+      reftest-async-zoom="2.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      top: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body onload="scrollTo(0, 1000); document.documentElement.classList.remove('reftest-wait');">
+  <!-- Test that position:fixed elements scroll with the layout viewport.
+
+       Scroll the window (i.e., the layout viewport) to (0, 1000). An async
+       scroll of -50 CSS pixels will move both the layout and visual viewport
+       up by 100 screen pixels (since async zoom is set to 2.0). The div should
+       remain at top-left corner of the layout viewport. -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-3-ref.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-3-ref.html
new file mode 100644
index 0000000000..00dc290aca
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-3-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=2.0">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      height: 100px;
+      width: 100px;
+      background: blue;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-3.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-3.html
new file mode 100644
index 0000000000..112926c2da
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-3.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="1000"
+      reftest-async-zoom="2.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      height: 100px;
+      width: 100px;
+      background: blue;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-4-ref.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-4-ref.html
new file mode 100644
index 0000000000..3155a387ce
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-4-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=2.0">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      height: 100px;
+      width: 100px;
+    }
+    div.top-left {
+      top: 20px;
+      left: 20px;
+      background: red;
+    }
+    div.top-right {
+      top: 20px;
+      right: 20px;
+      background: blue;
+    }
+    div.bottom-left {
+      bottom: 20px;
+      left: 20px;
+      background: green;
+    }
+    div.bottom-right {
+      bottom: 20px;
+      right: 20px;
+      background: purple;
+    }
+  </style>
+</head>
+<body>
+  <div class="top-left"></div>
+  <div class="top-right"></div>
+  <div class="bottom-left"></div>
+  <div class="bottom-right"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-async-zoom-4.html b/layout/reftests/async-scrolling/position-fixed-async-zoom-4.html
new file mode 100644
index 0000000000..6d425e3468
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-async-zoom-4.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="1000"
+      reftest-async-zoom="2.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      height: 100px;
+      width: 100px;
+    }
+    div.top-left {
+      top: 20px;
+      left: 20px;
+      background: red;
+    }
+    div.top-right {
+      top: 20px;
+      right: 20px;
+      background: blue;
+    }
+    div.bottom-left {
+      bottom: 20px;
+      left: 20px;
+      background: green;
+    }
+    div.bottom-right {
+      bottom: 20px;
+      right: 20px;
+      background: purple;
+    }
+  </style>
+</head>
+<body>
+  <div class="top-left"></div>
+  <div class="top-right"></div>
+  <div class="bottom-left"></div>
+  <div class="bottom-right"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-body-ref.html b/layout/reftests/async-scrolling/position-fixed-body-ref.html
new file mode 100644
index 0000000000..4d1d74b175
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-body-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<style>
+body {
+  height: 100vh;
+  margin: 0px;
+}
+#scrollbox {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+#scrolledContents {
+  height: 10000px;
+  background: radial-gradient(circle, blue 30%, transparent 0);
+  background-size: 80px 80px;
+}
+</style>
+<body>
+  <div id="scrollbox"
+       reftest-dislayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="20">
+    <div id="scrolledContents"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-body.html b/layout/reftests/async-scrolling/position-fixed-body.html
new file mode 100644
index 0000000000..7ae1122d72
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-body.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<style>
+body {
+  position: fixed;
+  margin: 0px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+#scrollbox {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+#scrolledContents {
+  height: 10000px;
+  background: radial-gradient(circle, blue 30%, transparent 0);
+  background-size: 80px 80px;
+}
+</style>
+<body>
+  <div id="scrollbox"
+       reftest-dislayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="20">
+    <div id="scrolledContents"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-cover-1-ref.html b/layout/reftests/async-scrolling/position-fixed-cover-1-ref.html
new file mode 100644
index 0000000000..9e4dbe95d3
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; height:3000px">
+  <div style="position:absolute; background:blue; top:300px; left:0; width:500px; height:200px;"></div>
+  <div style="position:absolute; background:black; top:0; left:0; width:500px; height:200px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-cover-1.html b/layout/reftests/async-scrolling/position-fixed-cover-1.html
new file mode 100644
index 0000000000..696655e678
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-1.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="400"
+      style="scrollbar-width:none">
+<body style="height:3000px">
+  <!-- Test that position:fixed content covered by scrolling content gets rendered
+       properly -->
+  <div style="position:fixed; background:blue; top:300px; left:0; width:500px; height:200px; z-index:1"></div>
+  <div style="position:absolute; background:black; top:200px; left:0; width:500px; height:400px; z-index:2"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-cover-2-ref.html b/layout/reftests/async-scrolling/position-fixed-cover-2-ref.html
new file mode 100644
index 0000000000..134ef72826
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-2-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; height:3000px">
+  <div style="position:absolute; background:black; top:0; left:0; width:500px; height:100px;"></div>
+  <div style="position:absolute; background:blue; top:200px; left:0; width:500px; height:400px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-cover-2.html b/layout/reftests/async-scrolling/position-fixed-cover-2.html
new file mode 100644
index 0000000000..295344cc5c
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-2.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="400"
+      style="scrollbar-width:none">
+<body style="height:3000px">
+  <!-- Test that scrolling content covered by position-fixed content
+       gets rendered properly -->
+  <div style="position:absolute; background:black; top:300px; left:0; width:500px; height:200px; z-index:1"></div>
+  <div style="position:fixed; background:blue; top:200px; left:0; width:500px; height:400px; z-index:2"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-cover-3-ref.html b/layout/reftests/async-scrolling/position-fixed-cover-3-ref.html
new file mode 100644
index 0000000000..a8e706087f
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-3-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="overflow:hidden; height:3000px">
+  <div style="position:absolute; background:blue; top:200px; left:0; width:500px; height:200px;"></div>
+  <div style="position:absolute; background:gray; top:100px; left:0; width:500px; height:200px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-cover-3.html b/layout/reftests/async-scrolling/position-fixed-cover-3.html
new file mode 100644
index 0000000000..7ed268cecf
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-3.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="400"
+      style="scrollbar-width:none">
+<body style="height:3000px">
+  <!-- Test that scrolling content above position-fixed content but not
+       intersecting it doesn't get moved down to a layer below the
+       position-fixed content -->
+  <div style="position:absolute; background:black; top:0; left:0; width:500px; height:200px; z-index:1"></div>
+  <div style="position:fixed; background:blue; top:200px; left:0; width:500px; height:200px; z-index:2"></div>
+  <div style="position:absolute; background:gray; top:500px; left:0; width:500px; height:200px; z-index:3"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html b/layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html
new file mode 100644
index 0000000000..b373cc1142
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-1.html b/layout/reftests/async-scrolling/position-fixed-iframe-1.html
new file mode 100644
index 0000000000..c071ec7e16
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-iframe-1.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="0"
+      style="scrollbar-width:none">
+<body style="height:3000px; margin:0;">
+  <!-- Test that position:fixed content stays fixed when we async-scroll -->
+  <iframe style="border:0; width:400px; height:400px;" src="data:text/html,
+    <!DOCTYPE HTML>
+    <html reftest-displayport-x='0' reftest-displayport-y='0'
+          reftest-displayport-w='800' reftest-displayport-h='2000'
+          reftest-async-scroll-x='0' reftest-async-scroll-y='50'
+          style='scrollbar-width:none'>
+    <body style='height:3000px'>
+      <div style='position:fixed; background:blue; top:0; left:0; width:200px; height:100px'></div>
+      <div style='background:red; margin-top:100px; width:100px; height:50px'></div>
+    </body>
+    </html>
+  "></iframe>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html b/layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html
new file mode 100644
index 0000000000..b373cc1142
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-2.html b/layout/reftests/async-scrolling/position-fixed-iframe-2.html
new file mode 100644
index 0000000000..513d9caabb
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-iframe-2.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="80"
+      style="scrollbar-width:none">
+<body style="height:3000px; margin:0;">
+  <!-- Test that position:fixed content stays fixed when we async-scroll -->
+  <iframe style="border:0; width:400px; height:400px; margin-top:80px;" src="data:text/html,
+    <!DOCTYPE HTML>
+    <html reftest-displayport-x='0' reftest-displayport-y='0'
+          reftest-displayport-w='800' reftest-displayport-h='2000'
+          reftest-async-scroll-x='0' reftest-async-scroll-y='50'
+          style='scrollbar-width:none'>
+    <body style='height:3000px'>
+      <div style='position:fixed; background:blue; top:0; left:0; width:200px; height:100px'></div>
+      <div style='background:red; margin-top:100px; width:100px; height:50px'></div>
+    </body>
+    </html>
+  "></iframe>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html b/layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html
new file mode 100644
index 0000000000..3d2ba64eb1
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<style>
+
+body {
+  height: 10000px;
+}
+
+.outer-opacity {
+  opacity: 0.8;
+}
+
+.scrollbox {
+  border: 1px solid black;
+  width: 200px;
+  height: 400px;
+  overflow: hidden;
+}
+
+.inner-opacity {
+  height: 1000px;
+  opacity: 0.8;
+}
+
+.fixed {
+  background: blue;
+  width: 100px;
+  height: 100px;
+}
+
+</style>
+
+<div class="outer-opacity">
+  <div class="scrollbox">
+    <div class="inner-opacity">
+      <div class="fixed"></div>
+    </div>
+  </div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-in-scroll-container.html b/layout/reftests/async-scrolling/position-fixed-in-scroll-container.html
new file mode 100644
index 0000000000..0874aa67a5
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-in-scroll-container.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<!-- In this test, the div |fixed| is fixed with respect to the
+     page's root scroll frame, but there's also a subframe |scrollbox|
+     which is async-scrolled and which generates a container layer
+     (because of the opacity), so that its async transform is on an
+     ancestor layer of |fixed|'s layer. We are testing that this
+     async transform is correctly unapplied to keep |fixed| fixed. -->
+<style>
+
+body {
+  height: 10000px;
+}
+
+.outer-opacity {
+  opacity: 0.8;
+}
+
+.scrollbox {
+  border: 1px solid black;
+  width: 200px;
+  height: 400px;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
+.inner-opacity {
+  height: 1000px;
+  opacity: 0.8;
+}
+
+.fixed {
+  background: blue;
+  width: 100px;
+  height: 100px;
+  position: fixed;
+}
+
+</style>
+<div class="outer-opacity">
+  <div class="scrollbox"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="200" reftest-displayport-h="1000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div class="inner-opacity">
+      <div class="fixed"></div>
+    </div>
+  </div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-clip-path-ref.html b/layout/reftests/async-scrolling/position-fixed-inside-clip-path-ref.html
new file mode 100644
index 0000000000..6832fa2bf6
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-clip-path-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<style>
+  body {
+    height: 4000px;
+    margin: 0;
+    overflow: hidden;
+  }
+  #clip {
+    position: absolute;
+    top: 450px;
+    left: 300px;
+    background: red;
+    width: 400px;
+    height: 400px;
+    clip-path: inset(0);
+  }
+  #fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(green, blue);
+  }
+</style>
+<div id="clip">
+  <div id="fixed"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-clip-path.html b/layout/reftests/async-scrolling/position-fixed-inside-clip-path.html
new file mode 100644
index 0000000000..2759f6c0cf
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-clip-path.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+<style>
+  html {
+    scrollbar-width: none;
+  }
+  body {
+    height: 4000px;
+    margin: 0;
+  }
+  #clip {
+    position: absolute;
+    top: 500px;
+    left: 300px;
+    background: red;
+    width: 400px;
+    height: 400px;
+    clip-path: inset(0);
+  }
+  #fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(green, blue);
+  }
+</style>
+<div id="clip">
+  <div id="fixed"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html
new file mode 100644
index 0000000000..8c48da5dbe
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+  height: 4000px;
+  margin: 0;
+  overflow: hidden;
+}
+#fixed {
+  position: fixed;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid blue;
+}
+</style>
+<div id="fixed"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html
new file mode 100644
index 0000000000..8d47c22155
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+<style>
+html {
+  scrollbar-width: none;
+}
+body {
+  height: 4000px;
+  margin: 0;
+}
+#sticky {
+  position: sticky;
+  top: -1000px; /* scrolls regularly until the top edge hits -1000px, then stays fixed */
+  height: 1200px;
+  border-bottom: 1px solid black;
+}
+#fixed {
+  position: fixed;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid blue;
+}
+</style>
+<div id="sticky">
+  <div id="fixed"></div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html
new file mode 100644
index 0000000000..8c48da5dbe
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+  height: 4000px;
+  margin: 0;
+  overflow: hidden;
+}
+#fixed {
+  position: fixed;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid blue;
+}
+</style>
+<div id="fixed"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html
new file mode 100644
index 0000000000..af596f2a12
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+<style>
+html {
+  scrollbar-width: none;
+}
+body {
+  height: 4000px;
+  margin: 0;
+}
+#sticky {
+  position: sticky;
+  top: 25px; /* scrolls regularly until the top edge hits 25px, then stays fixed */
+  margin-top: 50px;
+  height: 1200px;
+  border-bottom: 1px solid black;
+}
+#fixed {
+  position: fixed;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid blue;
+}
+</style>
+<div id="sticky">
+  <div id="fixed"></div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-3-ref.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-3-ref.html
new file mode 100644
index 0000000000..88f0577aab
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-3-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+  height: 4000px;
+  margin: 0;
+  overflow: hidden;
+}
+#sticky {
+  position: sticky;
+  top: 0;
+  height: 60px;
+  background-color: blue;
+}
+</style>
+<body>
+<div id="sticky"></div>
+</body></html>
diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-3.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-3.html
new file mode 100644
index 0000000000..852561bdb5
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="300">
+<style>
+html {
+  scrollbar-width: none;
+}
+body {
+  height: 4000px;
+  margin: 0;
+}
+#sticky {
+  position: sticky;
+  top: 0;
+  height: 60px;
+  background-color: blue;
+}
+#fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<body>
+<div style="height: 200px;"></div>
+<div id="sticky">
+  <div id="fixed"></div>
+</div>
+</body></html>
diff --git a/layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html b/layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html
new file mode 100644
index 0000000000..6cb0963031
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+<style>
+.fixedpos {
+	transform: translateX(0px);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 100px;
+	background: red;
+}
+.filler {
+	height: 4000px;
+}
+</style>
+</head>
+<body onload="scrollTo(0,200)">
+<div class="fixedpos"></div>
+<div class="filler"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-fixed-transformed-1.html b/layout/reftests/async-scrolling/position-fixed-transformed-1.html
new file mode 100644
index 0000000000..4f9cac419e
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-transformed-1.html
@@ -0,0 +1,23 @@
+<html reftest-async-scroll
+	  reftest-async-scroll-x="0"
+	  reftest-async-scroll-y="200">
+<head>
+<style>
+.fixedpos {
+	transform: translateX(0px);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 100px;
+	background: red;
+}
+.filler {
+	height: 4000px;
+}
+</style>
+</head>
+<body>
+<div class="fixedpos"></div>
+<div class="filler"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-async-zoom-1-ref.html b/layout/reftests/async-scrolling/position-sticky-async-zoom-1-ref.html
new file mode 100644
index 0000000000..f03a8f8131
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-async-zoom-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=2.0">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: fixed;
+      top: -50px;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-async-zoom-1.html b/layout/reftests/async-scrolling/position-sticky-async-zoom-1.html
new file mode 100644
index 0000000000..d0af0e8f1f
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-async-zoom-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="1000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      reftest-async-zoom="2.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: sticky;
+      top: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <!-- This test is identical to the position-fixed-async-zoom-1 test, but for
+       position:sticky elements. -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-async-zoom-2-ref.html b/layout/reftests/async-scrolling/position-sticky-async-zoom-2-ref.html
new file mode 100644
index 0000000000..324c5f5534
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-async-zoom-2-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=2.0">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: absolute;
+      top: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-async-zoom-2.html b/layout/reftests/async-scrolling/position-sticky-async-zoom-2.html
new file mode 100644
index 0000000000..8d815439a9
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-async-zoom-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="1000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="-50"
+      reftest-async-zoom="2.0">
+<head>
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    body {
+      height: 3000px;
+      margin: 0;
+    }
+    div {
+      position: sticky;
+      top: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+    }
+  </style>
+</head>
+<body onload="scrollTo(0, 1000); document.documentElement.classList.remove('reftest-wait');">
+  <!-- This test is identical to the position-fixed-async-zoom-2 test, but for
+       position:sticky elements. -->
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-bug1434250-ref.html b/layout/reftests/async-scrolling/position-sticky-bug1434250-ref.html
new file mode 100644
index 0000000000..153ca9f8dd
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-bug1434250-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='utf-8'>
+    <style type="text/css" media="all">
+      body {
+        margin-top: 0;
+        overflow: hidden;
+      }
+      .container {
+        width: 500px;
+        background: #fcc;
+        height: 2000px;
+      }
+      .header {
+        position: sticky;
+        top: 0px;
+        background: #cfc;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class='container'>
+      <div class='header'></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-bug1434250.html b/layout/reftests/async-scrolling/position-sticky-bug1434250.html
new file mode 100644
index 0000000000..740acb1516
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-bug1434250.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+  <head>
+    <meta charset='utf-8'>
+    <style type="text/css" media="all">
+      html {
+        scrollbar-width: none;
+      }
+      .container {
+        width: 500px;
+        background: #fcc;
+        height: 2000px;
+      }
+      .header {
+        position: sticky;
+        top: 0px;
+        background: #cfc;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class='container'>
+      <div class='header'></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-in-checkerboard-land-1-ref.html b/layout/reftests/async-scrolling/position-sticky-in-checkerboard-land-1-ref.html
new file mode 100644
index 0000000000..789a3138f2
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-checkerboard-land-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<title>reference for: position:sticky item that's still visible while the rest of the scrollframe contents are checkerboarded</title>
+
+<style>
+html {
+  scrollbar-width: none;
+}
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+#fixed {
+  position: fixed;
+  top: 0;
+  height: 100px;
+  width: 100%;
+  background-color: green;
+}
+
+</style>
+
+<div id="fixed"></div>
+
+<script>
+document.scrollingElement.scrollTop = 2500;
+</script>
diff --git a/layout/reftests/async-scrolling/position-sticky-in-checkerboard-land-1.html b/layout/reftests/async-scrolling/position-sticky-in-checkerboard-land-1.html
new file mode 100644
index 0000000000..720114b909
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-checkerboard-land-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="2500">
+
+<title>position:sticky item that's still visible while the rest of the scrollframe contents are checkerboarded</title>
+
+<style>
+html {
+  scrollbar-width: none;
+}
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+#sticky_container {
+  margin-top: 100px;
+  height: 3000px;
+  background-image: linear-gradient(green, blue);
+}
+
+#sticky {
+  position: sticky;
+  top: 0;
+  height: 100px;
+  background-color: green;
+}
+
+</style>
+
+<div id="sticky_container">
+  <div id="sticky"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-1.html b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-1.html
new file mode 100644
index 0000000000..a9e52cb744
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="transform: translateY(10px); margin-top: 90px">
+<div style="overflow:scroll; height: 400px; width: 400px; background-color: yellow"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="800"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="height: 800px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green"></div>
+</div>
+</div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-2.html b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-2.html
new file mode 100644
index 0000000000..73944529d5
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="transform: translateY(90px); margin-top: 10px">
+<div style="overflow:scroll; height: 400px; width: 400px; background-color: yellow"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="800"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="height: 800px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green"></div>
+</div>
+</div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-ref.html b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-ref.html
new file mode 100644
index 0000000000..0f03a8a766
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<div style="margin-top: 100px">
+<div id="scroller" style="overflow:scroll; height: 400px; width: 400px; background-color: yellow">
+<div style="height: 800px">
+<div style="position: relative; top: 120px; height: 20px; background-color: green"></div>
+</div>
+</div>
+</div>
+<script>
+    document.getElementById('scroller').scrollTop = 120;
+</script>
diff --git a/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1-ref.html b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1-ref.html
new file mode 100644
index 0000000000..c07e288f56
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:sticky with scrolled clip should correctly move the clip</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.halfBox {
+  position: absolute;
+  left: 0;
+  top: 100px;
+  width: 100px;
+  height: 50px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  border-bottom: none;
+}
+
+</style>
+
+<div class="halfBox"></div>
+
+<script>
+
+document.documentElement.scrollTop = 100;
+
+</script>
diff --git a/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1.html b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1.html
new file mode 100644
index 0000000000..f547386fb6
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+
+<title>position:sticky with scrolled clip should correctly move the clip</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+  position: relative;
+}
+
+.absoluteClip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100px;
+  height: 200px;
+  clip: rect(auto, auto, 150px, auto);
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+  box-sizing: border-box;
+  height: 100px;
+  border: 1px solid black;
+}
+
+</style>
+
+<div class="absoluteClip">
+  <div class="sticky"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2-ref.html b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2-ref.html
new file mode 100644
index 0000000000..12f2071728
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:sticky with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+.completeBox {
+  position: absolute;
+  left: 0;
+  top: 100px;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border: 1px solid black;
+}
+
+</style>
+
+<div class="completeBox"></div>
+
+<script>
+
+document.documentElement.scrollTop = 100;
+
+</script>
diff --git a/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2.html b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2.html
new file mode 100644
index 0000000000..5ded43e5ed
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+
+<title>position:sticky with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+  margin: 0;
+  height: 4000px;
+  position: relative;
+}
+
+.absoluteClip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100px;
+  height: 200px;
+  clip: rect(50px, auto, auto, auto);
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+  box-sizing: border-box;
+  height: 100px;
+  border: 1px solid black;
+}
+
+</style>
+
+<div class="absoluteClip">
+  <div class="sticky"></div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1-ref.html b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1-ref.html
new file mode 100644
index 0000000000..365c247fe0
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<div id="scroller" style="overflow:scroll; height: 400px; width: 400px">
+<div style="transform: translateY(10px); margin-top: 90px; background-color: yellow; height: 400px">
+<div style="position: relative; top: 30px; height: 20px; background-color: green"></div>
+</div>
+<div style="height: 400px">spacer</div>
+</div>
+<script>
+    document.getElementById('scroller').scrollTop = 120;
+</script>
diff --git a/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1.html b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1.html
new file mode 100644
index 0000000000..f1ccc63dec
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="overflow:scroll; height: 400px; width: 400px"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="890"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="transform: translateY(10px); margin-top: 90px; background-color: yellow; height: 400px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green"></div>
+</div>
+<div style="height: 400px">spacer</div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2-ref.html b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2-ref.html
new file mode 100644
index 0000000000..763a4a550a
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<div id="scroller" style="overflow:scroll; height: 400px; width: 400px">
+<div style="margin-top: 120px; background-color: yellow; height: 380px">
+<div style="height: 90px"></div>
+<div style="height: 20px; background-color: green"></div>
+</div>
+<div style="height: 310px"></div>
+</div>
+<script>
+    document.getElementById('scroller').scrollTop = 120;
+</script>
diff --git a/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2.html b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2.html
new file mode 100644
index 0000000000..ff0e050508
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="overflow:scroll; height: 400px; width: 400px"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="890"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="transform: translateY(90px); margin-top: 10px; background-color: yellow; height: 400px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green"></div>
+</div>
+<div style="height: 400px">spacer</div>
+</div>
diff --git a/layout/reftests/async-scrolling/position-sticky-transformed-ref.html b/layout/reftests/async-scrolling/position-sticky-transformed-ref.html
new file mode 100644
index 0000000000..19a91e7cd1
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="height:3000px; margin: 0px; overflow: hidden">
+  <div style="position:sticky; transform: rotateX(30deg) rotateY(10deg); background:blue; top:0; left:0; width:200px; height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/position-sticky-transformed.html b/layout/reftests/async-scrolling/position-sticky-transformed.html
new file mode 100644
index 0000000000..29cd778974
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width: none">
+<body style="height:3000px; margin: 0px;">
+  <div style="position:sticky; transform: rotateX(30deg) rotateY(10deg); background:blue; top:0; left:0; width:200px; height:100px"></div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/reftest.list b/layout/reftests/async-scrolling/reftest.list
new file mode 100644
index 0000000000..2602ed541b
--- /dev/null
+++ b/layout/reftests/async-scrolling/reftest.list
@@ -0,0 +1,190 @@
+skip-if(!asyncPan) == bg-fixed-1.html bg-fixed-1-ref.html
+skip-if(!asyncPan) == bg-fixed-cover-1.html bg-fixed-cover-1-ref.html
+skip-if(!asyncPan) == bg-fixed-cover-2.html bg-fixed-cover-2-ref.html
+skip-if(!asyncPan) == bg-fixed-cover-3.html bg-fixed-cover-3-ref.html
+skip-if(!asyncPan) == bg-fixed-child.html bg-fixed-child-ref.html
+skip-if(!asyncPan) == bg-fixed-child-clip-1.html bg-fixed-child-clip-ref.html
+skip-if(!asyncPan) == bg-fixed-child-clip-2.html bg-fixed-child-clip-ref.html
+skip-if(!asyncPan) fuzzy(0-1,0-87) == bg-fixed-child-mask.html bg-fixed-child-mask-ref.html
+skip-if(!asyncPan) == bg-fixed-in-opacity.html bg-fixed-in-opacity-ref.html
+# Passing the test below without WebRender would require implementing CSS filters in the Gecko compositor.
+skip-if(!asyncPan) fuzzy-if(gtkWidget,0-1,0-87) fuzzy-if(!gtkWidget,0-1,0-3951) == bg-fixed-in-css-filter.html bg-fixed-in-css-filter-ref.html # bug 1454794 for webrender fuzziness
+skip-if(!asyncPan) == bg-fixed-child-no-culling-1.html bg-fixed-child-no-culling-1-ref.html
+skip-if(!asyncPan) == bg-fixed-child-no-culling-2.html bg-fixed-child-no-culling-2-ref.html
+skip-if(!asyncPan) == bg-fixed-child-no-culling-3.html bg-fixed-child-no-culling-3-ref.html
+fuzzy-if(Android,0-2,0-4000) fuzzy-if(browserIsRemote&&cocoaWidget,0-2,0-179524) fuzzy-if(browserIsRemote&&winWidget,0-1,0-74590) fuzzy-if(gtkWidget&&layersGPUAccelerated,0-1,0-3528) skip-if(!asyncPan) fuzzy-if(geckoview,0-1,0-74590) == bg-fixed-transformed-image.html bg-fixed-transformed-image-ref.html
+skip-if(!asyncPan) == contain-paint-scrollable-frame-1.html contain-paint-scrollable-frame-1-ref.html
+skip-if(!asyncPan) == element-1.html element-1-ref.html
+pref(layers.force-active,true) skip-if(!asyncPan) == iframe-1.html iframe-1-ref.html
+skip-if(!asyncPan) == nested-1.html nested-1-ref.html
+skip-if(!asyncPan) == nested-2.html nested-2-ref.html
+skip-if(!asyncPan) == position-fixed-1.html position-fixed-1-ref.html
+skip-if(!asyncPan) == position-fixed-2.html position-fixed-2-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-3120) skip-if(!asyncPan) == position-fixed-body.html position-fixed-body-ref.html
+skip-if(!asyncPan) == position-fixed-cover-1.html position-fixed-cover-1-ref.html
+skip-if(!asyncPan) == position-fixed-cover-2.html position-fixed-cover-2-ref.html
+skip-if(!asyncPan) == position-fixed-cover-3.html position-fixed-cover-3-ref.html
+fuzzy-if(Android,0-15,0-11) fuzzy-if(gtkWidget,20-33,14-32) fuzzy-if(cocoaWidget,9-21,20-44) skip-if(!asyncPan) == position-fixed-transformed-1.html position-fixed-transformed-1-ref.html # Bug 1604338
+skip-if(!asyncPan) == split-layers-1.html split-layers-1-ref.html
+skip-if(!asyncPan) == split-layers-multi-scrolling-1.html split-layers-multi-scrolling-1-ref.html
+fuzzy(0-2,0-240000) skip-if(!asyncPan) == split-opacity-layers-1.html split-opacity-layers-1-ref.html
+skip-if(!asyncPan) fuzzy-if(appleSilicon,0-1,0-8) == sticky-pos-scrollable-1.html sticky-pos-scrollable-1-ref.html
+skip-if(!asyncPan) == sticky-pos-scrollable-2.html sticky-pos-scrollable-2-ref.html
+skip-if(!asyncPan) == sticky-pos-scrollable-3.html sticky-pos-scrollable-3-ref.html
+skip-if(!asyncPan) == sticky-pos-scrollable-4.html sticky-pos-scrollable-4-ref.html
+skip-if(!asyncPan) == sticky-pos-scrollable-5.html sticky-pos-scrollable-5-ref.html
+skip-if(!asyncPan) == sticky-pos-scrollable-6.html sticky-pos-scrollable-6-ref.html
+skip-if(!asyncPan) fuzzy-if(appleSilicon,0-1,0-8) == sticky-pos-scrollable-7.html sticky-pos-scrollable-7-ref.html
+skip-if(!asyncPan) fuzzy(0-2,0-2) fuzzy-if(gtkWidget,0-1,0-4) fuzzy-if(winWidget,0-1,0-51) fuzzy-if(appleSilicon,0-1,0-8) == fixed-pos-scrollable-1.html fixed-pos-scrollable-1-ref.html
+skip-if(!asyncPan) == culling-1.html culling-1-ref.html
+skip-if(!asyncPan) == position-fixed-iframe-1.html position-fixed-iframe-1-ref.html
+skip-if(!asyncPan) == position-fixed-iframe-2.html position-fixed-iframe-2-ref.html
+fuzzy(0-1,0-11300) skip-if(!asyncPan) == position-fixed-in-scroll-container.html position-fixed-in-scroll-container-ref.html
+fuzzy(0-1,0-400) skip-if(!asyncPan) == position-fixed-inside-clip-path.html position-fixed-inside-clip-path-ref.html
+skip-if(!asyncPan) == position-fixed-inside-sticky-1.html position-fixed-inside-sticky-1-ref.html
+skip-if(!asyncPan) == position-fixed-inside-sticky-2.html position-fixed-inside-sticky-2-ref.html
+skip-if(!asyncPan) == position-fixed-inside-sticky-3.html position-fixed-inside-sticky-3-ref.html
+skip-if(!asyncPan) == sticky-inside-fixed-1.html sticky-inside-fixed-1-ref.html
+skip-if(!asyncPan) == sticky-inside-transform-1.html sticky-inside-transform-1-ref.html
+fuzzy(0-1,0-60000) skip-if(!asyncPan) == group-opacity-surface-size-1.html group-opacity-surface-size-1-ref.html
+fuzzy(0-55,0-295) skip-if(!asyncPan) == position-sticky-transformed.html position-sticky-transformed-ref.html
+skip-if(!asyncPan) fuzzy-if(cocoaWidget,0-1,0-396) fuzzy-if(winWidget,0-1,0-396) == offscreen-prerendered-active-opacity.html offscreen-prerendered-active-opacity-ref.html
+fuzzy-if(Android,0-43,0-40) fuzzy-if(!Android,0-1,0-34) fuzzy-if(gtkWidget,22-74,20-32) fuzzy-if(cocoaWidget,6-7,18-39) fuzzy-if(swgl&&cocoaWidget&&isDebugBuild,0-7,0-39) skip-if(!asyncPan) == offscreen-clipped-blendmode-1.html offscreen-clipped-blendmode-ref.html # Bug 1604338
+fuzzy-if(Android,0-43,0-40) fuzzy-if(gtkWidget,22-74,20-32) fuzzy-if(cocoaWidget,6-7,18-39) fuzzy-if(swgl&&cocoaWidget&&isDebugBuild,0-7,0-39) skip-if(!asyncPan) == offscreen-clipped-blendmode-2.html offscreen-clipped-blendmode-ref.html # Bug 1604338
+fuzzy-if(Android,0-43,0-40) skip == offscreen-clipped-blendmode-3.html offscreen-clipped-blendmode-ref.html # bug 1251588 - wrong AGR on mix-blend-mode item
+fuzzy-if(Android,0-43,0-40) fuzzy-if(gtkWidget,22-74,20-32) fuzzy-if(cocoaWidget,6-7,18-39) fuzzy-if(swgl&&cocoaWidget&&isDebugBuild,0-7,0-39) skip-if(!asyncPan) == offscreen-clipped-blendmode-4.html offscreen-clipped-blendmode-ref.html # Bug 1604338
+fuzzy-if(Android,0-7,0-1680) fuzzy-if(gtkWidget,1-1,2-20) fuzzy-if(cocoaWidget,1-2,10-18) fuzzy-if(swgl&&cocoaWidget&&isDebugBuild,0-2,0-18) skip-if(!asyncPan) == perspective-scrolling-1.html perspective-scrolling-1-ref.html # Bug 1604338
+fuzzy-if(Android,0-7,0-4) skip-if(!asyncPan) == perspective-scrolling-2.html perspective-scrolling-2-ref.html
+fuzzy-if(Android,0-19,0-10) fuzzy-if(gtkWidget,8-13,12-32) fuzzy-if(cocoaWidget,10-13,20-44) skip-if(!asyncPan) == perspective-scrolling-3.html perspective-scrolling-3-ref.html # Bug 1604338
+fuzzy-if(Android,0-14,0-11) fuzzy-if(gtkWidget,18-30,14-32) fuzzy-if(cocoaWidget,16-20,20-44) skip-if(!asyncPan) == perspective-scrolling-4.html perspective-scrolling-4-ref.html # Bug 1604338
+skip-if(!asyncPan) == perspective-scrolling-5.html perspective-scrolling-5-ref.html
+pref(apz.disable_for_scroll_linked_effects,true) skip-if(!asyncPan) == disable-apz-for-sle-pages.html disable-apz-for-sle-pages-ref.html
+fuzzy-if(browserIsRemote&&d2d,0-1,0-22) skip-if(!asyncPan) fuzzy-if(swgl,0-255,0-11) == background-blend-mode-1.html background-blend-mode-1-ref.html
+skip-if(Android||!asyncPan) != opaque-fractional-displayport-1.html about:blank
+skip-if(Android||!asyncPan) != opaque-fractional-displayport-2.html about:blank
+fuzzy-if(Android,0-19,0-10) fuzzy-if(gtkWidget,12-19,12-32) fuzzy-if(cocoaWidget,17-21,20-44) skip-if(!asyncPan) == fixed-pos-scrolled-clip-1.html fixed-pos-scrolled-clip-1-ref.html # Bug 1604338
+fuzzy-if(Android,0-44,0-136) fuzzy-if(gtkWidget,16-26,26-64) fuzzy-if(cocoaWidget,10-13,38-82) fuzzy-if(winWidget,0-4,0-36) skip-if(!asyncPan) == fixed-pos-scrolled-clip-2.html fixed-pos-scrolled-clip-2-ref.html # Bug 1604338
+fuzzy-if(Android,0-13,0-465) fuzzy-if(gtkWidget,17-28,24-60) fuzzy-if(cocoaWidget,15-19,40-75) skip-if(!asyncPan) == fixed-pos-scrolled-clip-3.html fixed-pos-scrolled-clip-3-ref.html # Bug 1604338
+fuzzy-if(Android,0-13,0-465) fuzzy-if(gtkWidget,17-29,24-60) fuzzy-if(cocoaWidget,15-19,40-75) skip-if(!asyncPan) == fixed-pos-scrolled-clip-4.html fixed-pos-scrolled-clip-4-ref.html # Bug 1604338
+skip-if(!asyncPan) == fixed-pos-scrolled-clip-5.html fixed-pos-scrolled-clip-5-ref.html
+skip-if(!asyncPan) == position-sticky-bug1434250.html position-sticky-bug1434250-ref.html
+fuzzy-if(Android,0-12,0-11) fuzzy-if(gtkWidget,16-25,12-32) fuzzy-if(cocoaWidget,13-16,20-44) skip-if(!asyncPan) == position-sticky-scrolled-clip-1.html position-sticky-scrolled-clip-1-ref.html # Bug 1604338
+fuzzy-if(Android,0-6,0-4) skip == position-sticky-scrolled-clip-2.html position-sticky-scrolled-clip-2-ref.html # bug ?????? - incorrectly applying clip to sticky contents
+fuzzy-if(Android,0-8,0-27) fuzzy-if(cocoaWidget,9-11,20-44) skip-if(!asyncPan) == curtain-effect-1.html curtain-effect-1-ref.html
+fuzzy-if(Android,0-7,0-9) fuzzy-if(gtkWidget,10-15,12-32) fuzzy-if(cocoaWidget,5-9,20-42) skip-if(!asyncPan) == transformed-1.html transformed-1-ref.html # Bug 1604338
+fuzzy-if(Android,2-7,1-12) fuzzy-if(gtkWidget,3-5,12-28) fuzzy-if(cocoaWidget,5-6,18-38) skip-if(!asyncPan) fuzzy-if(swgl&&cocoaWidget&&isDebugBuild,0-6,0-38) == position-sticky-transformed-in-scrollframe-1.html position-sticky-transformed-in-scrollframe-1-ref.html # Bug 1604338
+fuzzy-if(Android,3-3,1-470) fuzzy-if(Android&&swgl&&isDebugBuild&&/^aarch64-gcc3/.test(xulRuntime.XPCOMABI),3-3,457-457) fuzzy-if(gtkWidget,13-20,12-32) fuzzy-if(cocoaWidget,12-16,20-44) skip-if(!asyncPan) == position-sticky-transformed-in-scrollframe-2.html position-sticky-transformed-in-scrollframe-2-ref.html # Bug 1604338
+fuzzy-if(Android,12-13,4-31) fuzzy-if(gtkWidget,16-27,14-32) fuzzy-if(cocoaWidget,13-16,20-44) skip-if(!asyncPan) == position-sticky-in-transformed-scrollframe-1.html position-sticky-in-transformed-scrollframe-ref.html # Bug 1604338
+fuzzy-if(Android,12-13,4-31) fuzzy-if(gtkWidget,16-27,14-32) fuzzy-if(cocoaWidget,13-16,20-44) skip-if(!asyncPan) == position-sticky-in-transformed-scrollframe-2.html position-sticky-in-transformed-scrollframe-ref.html # Bug 1604338
+
+skip-if(!asyncPan) == checkerboard-1.html checkerboard-1-ref.html
+skip-if(!asyncPan) == checkerboard-2.html checkerboard-2-ref.html
+skip-if(!asyncPan) == checkerboard-3.html checkerboard-3-ref.html
+skip-if(!asyncPan) == position-sticky-in-checkerboard-land-1.html position-sticky-in-checkerboard-land-1-ref.html
+
+skip-if(!Android) pref(apz.allow_zooming,true) == position-fixed-async-zoom-1.html position-fixed-async-zoom-1-ref.html
+skip-if(!Android) pref(apz.allow_zooming,true) == position-fixed-async-zoom-2.html position-fixed-async-zoom-2-ref.html
+skip-if(!Android) pref(apz.allow_zooming,true) == position-fixed-async-zoom-3.html position-fixed-async-zoom-3-ref.html
+skip-if(!Android) pref(apz.allow_zooming,true) == position-fixed-async-zoom-4.html position-fixed-async-zoom-4-ref.html
+skip-if(!Android) pref(apz.allow_zooming,true) == position-sticky-async-zoom-1.html position-sticky-async-zoom-1-ref.html
+skip-if(!Android) pref(apz.allow_zooming,true) == position-sticky-async-zoom-2.html position-sticky-async-zoom-2-ref.html
+
+pref(apz.allow_zooming,true) == async-scroll-and-zoom.html async-scroll-and-zoom-ref.html
+
+# on Android we have a different overscroll effect so this test is disabled
+skip-if(!asyncPan||Android) pref(apz.overscroll.enabled,true) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll.html overscroll-ref.html
+skip-if(!asyncPan||Android) pref(apz.overscroll.enabled,true) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll-subframe.html overscroll-ref.html
+skip-if(!asyncPan||Android) pref(apz.overscroll.enabled,true) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll-fixed.html no-overscroll-ref.html
+skip-if(!asyncPan||Android) pref(apz.overscroll.enabled,true) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll-fixed-transform.html overscroll-ref.html
+skip-if(!asyncPan||Android) pref(apz.overscroll.enabled,true) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll-fixed-iframe.html overscroll-ref.html
+skip-if(!asyncPan||Android) pref(apz.overscroll.enabled,true) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll-fixed-iframe-overscroll.html no-overscroll-ref.html
+# This one needs to be fuzzed due to the fact that squishing a scrollbar
+# thumb on the compositor doesn't preserve its shape exactly.
+skip-if(!asyncPan||Android) fuzzy(0-56,0-33) fuzzy-if(winWidget,0-107,0-17) pref(apz.overscroll.enabled,true) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll-scrollbar.html overscroll-scrollbar-ref.html
+skip-if(!asyncPan||Android) pref(apz.overscroll.enabled,false) pref(apz.overscroll.test_async_scroll_offset.enabled,true) == overscroll-disabled.html no-overscroll-ref.html
+
+# for this test, apz.allow_zooming is needed to ensure we take the containerless scrolling codepath that creates
+# an async zoom container (since we are testing a regression in that codepath)
+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-fixed-bottom-1.html dynamic-toolbar-fixed-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.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) == 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-2,0-120000)
+== dynamic-toolbar-sticky-1a.html dynamic-toolbar-sticky-1-ref.html
+== dynamic-toolbar-sticky-1b.html dynamic-toolbar-sticky-1-ref.html
+== 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
+== 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
+== 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
+== 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)
+                     == dynamic-toolbar-sticky-1a.html dynamic-toolbar-sticky-1-ref.html
+                     == dynamic-toolbar-sticky-1b.html dynamic-toolbar-sticky-1-ref.html
+                     == 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
+                     == 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-t.html
+                     == dynamic-toolbar-sticky-5b.html dynamic-toolbar-sticky-5-ref-t.html
+                     == dynamic-toolbar-sticky-5c.html dynamic-toolbar-sticky-5-ref-t.html
+                     == dynamic-toolbar-sticky-6a.html dynamic-toolbar-sticky-6-ref-t.html
+== dynamic-toolbar-sticky-6b.html dynamic-toolbar-sticky-6-ref-t.html # bug 1630274 for non-WR
+                     == 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)
+                     == dynamic-toolbar-sticky-1a.html dynamic-toolbar-sticky-1-ref-b.html
+                     == dynamic-toolbar-sticky-1b.html dynamic-toolbar-sticky-1-ref-b.html
+== dynamic-toolbar-sticky-1c.html dynamic-toolbar-sticky-1-ref-b.html # bug 1630274 for non-WR
+                     == dynamic-toolbar-sticky-2a.html dynamic-toolbar-sticky-2-ref-b.html
+                     == dynamic-toolbar-sticky-2b.html dynamic-toolbar-sticky-2-ref-b.html
+                     == dynamic-toolbar-sticky-2c.html dynamic-toolbar-sticky-2-ref-b.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
+                     == 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
+                     == dynamic-toolbar-sticky-6b.html dynamic-toolbar-sticky-6-ref.html
+                     == dynamic-toolbar-sticky-6c.html dynamic-toolbar-sticky-6-ref.html
+defaults
diff --git a/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png b/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png
new file mode 100644
index 0000000000..d114e100d3
--- /dev/null
+++ b/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png
diff --git a/layout/reftests/async-scrolling/split-layers-1-ref.html b/layout/reftests/async-scrolling/split-layers-1-ref.html
new file mode 100644
index 0000000000..2d78cd1738
--- /dev/null
+++ b/layout/reftests/async-scrolling/split-layers-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <!-- Test that element content scrolls asynchronously even when content
+       has to be split into separate layers with non-scrolling content in
+       between -->
+  <div style="width:400px; height:500px; overflow:hidden; border:2px solid black">
+    <div style="height:450px"></div>
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+    <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div>
+    <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/split-layers-1.html b/layout/reftests/async-scrolling/split-layers-1.html
new file mode 100644
index 0000000000..5747986a3c
--- /dev/null
+++ b/layout/reftests/async-scrolling/split-layers-1.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <!-- Test that element content scrolls asynchronously even when content
+       has to be split into separate layers with non-scrolling content in
+       between -->
+  <div style="width:400px; height:500px; overflow: scroll; scrollbar-width: none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div style="height:500px"></div>
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+    <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div>
+    <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
+  </div>
+
diff --git a/layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html
new file mode 100644
index 0000000000..bbb8a05290
--- /dev/null
+++ b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <!-- Test that element content scrolls asynchronously even when content
+       has to be split into separate layers with non-scrolling content in
+       between -->
+  <div style="width:400px; height:500px; overflow:hidden; border:2px solid black; margin-top:-50px;">
+    <div style="height:450px"></div>
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+    <div style="left:200px; top:-50px; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div>
+    <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
+  </div>
+</html>
+
diff --git a/layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html
new file mode 100644
index 0000000000..03cd823966
--- /dev/null
+++ b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="50"
+      style="scrollbar-width:none">
+<body style="height:3000px">
+  <!-- Test that element content scrolls asynchronously even when content
+       has to be split into separate layers with non-scrolling content in
+       between -->
+  <div style="width:400px; height:500px; overflow: scroll; scrollbar-width: none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div style="height:500px"></div>
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+    <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div>
+    <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
+  </div>
+
diff --git a/layout/reftests/async-scrolling/split-opacity-layers-1-ref.html b/layout/reftests/async-scrolling/split-opacity-layers-1-ref.html
new file mode 100644
index 0000000000..347bfe2547
--- /dev/null
+++ b/layout/reftests/async-scrolling/split-opacity-layers-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:500px; overflow:hidden; border:2px solid black">
+    <div style="height:450px"></div>
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+    <div style="opacity:0.5">
+      <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div>
+      <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
+    </div>
+  </div>
+
diff --git a/layout/reftests/async-scrolling/split-opacity-layers-1.html b/layout/reftests/async-scrolling/split-opacity-layers-1.html
new file mode 100644
index 0000000000..579f515776
--- /dev/null
+++ b/layout/reftests/async-scrolling/split-opacity-layers-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <div style="width:400px; height:500px; overflow:scroll; scrollbar-width: none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+    <div style="height:500px"></div>
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+    <div style="opacity:0.5">
+      <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div>
+      <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
+    </div>
+  </div>
+
diff --git a/layout/reftests/async-scrolling/sticky-inside-fixed-1-ref.html b/layout/reftests/async-scrolling/sticky-inside-fixed-1-ref.html
new file mode 100644
index 0000000000..6e9883f591
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-inside-fixed-1-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Testcase for Bug 1501342</title>
+  <style>
+    .panel {
+      height:100%;
+      overflow:hidden;
+      position:fixed;
+      right:0;
+    }
+    .scrollable {
+      height:100%;
+      overflow-y:hidden;
+    }
+    .sticky {
+      position:sticky;
+      top:0;
+      height: 50px;
+      width: 100px;
+      background: red;
+    }
+    .content {
+      margin-top: -50px;
+      height:2000px;
+      width:200px;
+      background:green;
+    }
+  </style>
+</head>
+<body>
+  <div class="panel">
+    <div class="scrollable">
+      <div class="sticky"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/async-scrolling/sticky-inside-fixed-1.html b/layout/reftests/async-scrolling/sticky-inside-fixed-1.html
new file mode 100644
index 0000000000..ba7da94702
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-inside-fixed-1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<head>
+  <title>Testcase for Bug 1501342</title>
+  <style>
+    .panel {
+      height:100%;
+      overflow:hidden;
+      position:fixed;
+      right:0;
+    }
+    .scrollable {
+      height:100%;
+      overflow-y: scroll;
+      scrollbar-width: none;
+    }
+    .sticky {
+      position:sticky;
+      top:0;
+      height: 50px;
+      width: 100px;
+      background: red;
+    }
+    .content {
+      height:2000px;
+      width:200px;
+      background:green;
+    }
+  </style>
+</head>
+<body>
+  <div class="panel">
+    <div class="scrollable"
+         reftest-displayport-x="0" reftest-displayport-y="0"
+         reftest-displayport-w="800" reftest-displayport-h="2000"
+         reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+      <div class="sticky"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/sticky-inside-transform-1-ref.html b/layout/reftests/async-scrolling/sticky-inside-transform-1-ref.html
new file mode 100644
index 0000000000..c778de137a
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-inside-transform-1-ref.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<meta charset="utf-8" />
+<style>
+html, body { margin: 0 }
+
+#scroll {
+  overflow-y: auto;
+  scrollbar-width: none;
+  height: 100vh;
+  background: green;
+}
+#transform {
+  transform: translateX(100%) rotate(90deg);
+  height: 600px;
+  position: relative;
+  top: -300px;
+  transform-origin: 0% 0%;
+  background: #ff0;
+}
+#sticky {
+  position: relative;
+  top: 300px;
+  background: #0ff;
+  height: 100px;
+}
+</style>
+<div id="scroll">
+  <div id="transform">
+    <div id="sticky"></div>
+  </div>
+  <div id="content" style="height: 2000px;"></div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/sticky-inside-transform-1.html b/layout/reftests/async-scrolling/sticky-inside-transform-1.html
new file mode 100644
index 0000000000..a1d55a3211
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-inside-transform-1.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html reftest-async-scroll>
+<meta charset="utf-8" />
+<style>
+html, body { margin: 0 }
+
+#scroll {
+  overflow-y: auto;
+  scrollbar-width: none;
+  height: 100vh;
+  background: green;
+}
+#transform {
+  transform: translateX(100%) rotate(90deg);
+  height: 600px;
+  transform-origin: 0% 0%;
+  background: #ff0;
+}
+#sticky {
+  position: sticky;
+  top: 0;
+  background: #0ff;
+  height: 100px;
+}
+</style>
+<div id="scroll"
+   reftest-displayport-x="0" reftest-displayport-y="0"
+   reftest-displayport-w="800" reftest-displayport-h="2000"
+   reftest-async-scroll-x="0" reftest-async-scroll-y="300">
+  <div id="transform">
+    <div id="sticky"></div>
+  </div>
+  <div id="content" style="height: 2000px"></div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html
new file mode 100644
index 0000000000..2522f82e2e
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:300px; overflow:hidden; border:2px solid black">
+    <div style="height:200px; width:200px; float:left; background:white"></div>
+    <div style="left:200px; top:0; height:300px; width:200px; float:right; background:yellow;"></div>
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-1.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-1.html
new file mode 100644
index 0000000000..3043e3a913
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <div style="width:400px; height:300px; overflow:scroll; scrollbar-width:none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+    <!-- In this test the position:sticky element gets its own layer, and also has scrollable metrics
+         because it shares the same animated geometry root as the other elements. This tests that
+         layers with both sticky info and scroll info are transformed correctly in the face of an async
+         scroll transform. -->
+    <div style="height:100px; width:200px; float:left; background:purple"></div>
+    <div style="left:200px; top:0; height:300px; width:200px; float:left; background:yellow; position:sticky; z-index:1;"></div>
+    <div style="height:300px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html
new file mode 100644
index 0000000000..da90b19984
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+  margin: 0;
+  height: 4000px;
+  overflow: hidden;
+}
+div {
+  background: blue;
+  width: 200px;
+  height: 200px;
+  margin-top: 300px;
+  position: sticky;
+  bottom: 100px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-2.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-2.html
new file mode 100644
index 0000000000..73ae7c75d3
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-2.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+<style>
+html {
+  scrollbar-width: none;
+}
+body {
+  margin: 0;
+  height: 4000px;
+}
+div {
+  background: blue;
+  width: 200px;
+  height: 200px;
+  margin-top: 400px;
+  position: sticky;
+  bottom: 100px;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html
new file mode 100644
index 0000000000..fab9f954ba
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    #header {
+      position: fixed;
+      top: 0;
+    }
+    #header > div {
+      border: solid blue 2px;
+      height: 100px;
+      width: 100px;
+    }
+  </style>
+  <div id="section">
+      <div id="header">
+        <div></div>
+      </div>
+  </div>
+</html>
+\ No newline at end of file
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-3.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-3.html
new file mode 100644
index 0000000000..5581f8a0ac
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    #section {
+      padding-top: 1px;
+    }
+    #header {
+      position: sticky;
+      top: 0;
+    }
+    #header > div {
+      margin-top: -50px;
+      border: solid blue 2px;
+      height: 100px;
+      width: 100px;
+    }
+    #spacer {
+      height: 1500px;
+    }
+  </style>
+  <div id="section">
+      <div id="header">
+        <div></div>
+      </div>
+      <div id="spacer"></div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-4-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-4-ref.html
new file mode 100644
index 0000000000..c8e0e220bd
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-4-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:300px; overflow:hidden; border:2px solid black">
+    <div style="height: 150px"></div>
+    <div style="width: 100px; height: 100px; background-color: green"></div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-4.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-4.html
new file mode 100644
index 0000000000..291c5c40fa
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-4.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <div style="width:400px; height:300px; overflow:scroll; scrollbar-width:none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+    <!-- In this test the position:sticky element has already been adjusted by
+         the main thread paint, and the async scroll causes a reduction in that
+         adjustment. -->
+    <div style="height: 1000px"></div>
+    <div style="position:sticky; width: 100px; height: 100px; bottom: 50px; background-color: green"></div>
+    <div style="height: 1000px"></div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-5-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-5-ref.html
new file mode 100644
index 0000000000..c8e0e220bd
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-5-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:300px; overflow:hidden; border:2px solid black">
+    <div style="height: 150px"></div>
+    <div style="width: 100px; height: 100px; background-color: green"></div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-5.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-5.html
new file mode 100644
index 0000000000..61f4e4c968
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-5.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <div style="width:400px; height:300px; overflow:scroll; scrollbar-width:none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="150">
+    <!-- In this test the position:sticky element has already been adjusted by
+         the main thread paint, and then clamped by the bounding container. The
+         async scroll causes a reduction in that adjustment, but by less than
+         the amount of the scroll (because of the clamping). -->
+    <div style="height: 500px; margin-top: 250px; margin-bottom: 250px">
+      <div style="width: 100px; height: 300px"></div>
+      <div style="position:sticky; width: 100px; height: 100px; bottom: 50px; background-color: green"></div>
+    </div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-6-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-6-ref.html
new file mode 100644
index 0000000000..f8797f108f
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-6-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:300px; overflow:hidden; border:2px solid black">
+    <div style="height: 151px"></div>
+    <div style="width: 100px; height: 100px; background-color: green"></div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-6.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-6.html
new file mode 100644
index 0000000000..5db3fac2cd
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-6.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <div style="width:400px; height:300px; overflow:scroll; scrollbar-width:none; border:2px solid black"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="300">
+    <!-- In this test the position:sticky element is over-constrained with the
+         top-positioning taking priority over the bottom-positioning. -->
+    <div style="height: 300px"></div>
+    <div style="position:sticky; width: 100px; height: 100px; top: 151px; bottom: 50px; background-color: green"></div>
+    <div style="height: 1000px"></div>
+  </div>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-7-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-7-ref.html
new file mode 100644
index 0000000000..92105b51f2
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-7-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    #header {
+      position: fixed;
+      top: 0;
+      left: 9px;
+    }
+    #header > div {
+      border-radius: 10px;
+      overflow:hidden;
+      height: 100px;
+      width: 100px;
+    }
+    #inner {
+      width: 200px;
+      height: 200px;
+      background-color:green;
+    }
+  </style>
+  <div id="section">
+      <div id="header">
+        <div>
+          <div id="inner"></div>
+        </div>
+      </div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-7.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-7.html
new file mode 100644
index 0000000000..03c8a23da7
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-7.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+  <style>
+    html {
+      scrollbar-width: none;
+    }
+    #section {
+      padding-top: 1px;
+      transform: translateX(1px);
+    }
+    #header {
+      position: sticky;
+      top: 0;
+    }
+    #header > div {
+      margin-top: -50px;
+      border-radius: 10px;
+      overflow:hidden;
+      height: 100px;
+      width: 100px;
+    }
+    #spacer {
+      height: 1500px;
+    }
+    #inner {
+      width: 200px;
+      height: 200px;
+      background-color:green;
+    }
+  </style>
+  <div id="section">
+      <div id="header">
+        <div>
+          <div id="inner"></div>
+        </div>
+      </div>
+      <div id="spacer"></div>
+  </div>
+</html>
diff --git a/layout/reftests/async-scrolling/transformed-1-ref.html b/layout/reftests/async-scrolling/transformed-1-ref.html
new file mode 100644
index 0000000000..2e04e6b88e
--- /dev/null
+++ b/layout/reftests/async-scrolling/transformed-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+    <head><title>Async scrolling with transforms</title></head>
+    <body style="height: 2000px" onload="window.scrollTo(0,20); document.documentElement.classList.remove('reftest-wait')">
+        <div style="transform: rotate(90deg); transform-origin: bottom left">Some vertical text</div>
+    </body>
+</html>
diff --git a/layout/reftests/async-scrolling/transformed-1.html b/layout/reftests/async-scrolling/transformed-1.html
new file mode 100644
index 0000000000..1aa2f10684
--- /dev/null
+++ b/layout/reftests/async-scrolling/transformed-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="20">
+    <head><title>Async scrolling with transforms</title></head>
+    <body style="height: 2000px">
+        <div style="transform: rotate(90deg); transform-origin: bottom left">Some vertical text</div>
+    </body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 00:47:55 +0000
commit	26a029d407be480d791972afb5975cf62c9360a6 (patch)
tree	f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/async-scrolling
parent	Initial commit. (diff)
download	firefox-upstream/124.0.1.tar.xz firefox-upstream/124.0.1.zip