From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../background-blend-mode-1-ref.html               |  17 ++++++
 .../async-scrolling/background-blend-mode-1.html   |  26 +++++++++
 .../reftests/async-scrolling/bg-fixed-1-ref.html   |   7 +++
 layout/reftests/async-scrolling/bg-fixed-1.html    |  13 +++++
 .../async-scrolling/bg-fixed-child-clip-1.html     |  16 ++++++
 .../async-scrolling/bg-fixed-child-clip-2.html     |  20 +++++++
 .../async-scrolling/bg-fixed-child-clip-ref.html   |  11 ++++
 .../async-scrolling/bg-fixed-child-mask-ref.html   |  11 ++++
 .../async-scrolling/bg-fixed-child-mask.html       |  17 ++++++
 .../bg-fixed-child-no-culling-1-ref.html           |  11 ++++
 .../bg-fixed-child-no-culling-1.html               |  14 +++++
 .../bg-fixed-child-no-culling-2-ref.html           |   7 +++
 .../bg-fixed-child-no-culling-2.html               |  12 ++++
 .../async-scrolling/bg-fixed-child-ref.html        |  10 ++++
 .../reftests/async-scrolling/bg-fixed-child.html   |  15 +++++
 .../async-scrolling/bg-fixed-cover-1-ref.html      |   9 +++
 .../reftests/async-scrolling/bg-fixed-cover-1.html |  15 +++++
 .../async-scrolling/bg-fixed-cover-2-ref.html      |  10 ++++
 .../reftests/async-scrolling/bg-fixed-cover-2.html |  14 +++++
 .../async-scrolling/bg-fixed-cover-3-ref.html      |  12 ++++
 .../reftests/async-scrolling/bg-fixed-cover-3.html |  16 ++++++
 .../async-scrolling/bg-fixed-in-opacity-ref.html   |  24 ++++++++
 .../async-scrolling/bg-fixed-in-opacity.html       |  27 +++++++++
 .../bg-fixed-transformed-image-ref.html            |  19 +++++++
 .../bg-fixed-transformed-image.html                |  21 +++++++
 .../async-scrolling/checkerboard-1-ref.html        |   5 ++
 .../reftests/async-scrolling/checkerboard-1.html   |  11 ++++
 .../async-scrolling/checkerboard-2-ref.html        |   6 ++
 .../reftests/async-scrolling/checkerboard-2.html   |  16 ++++++
 .../async-scrolling/checkerboard-3-ref.html        |   5 ++
 .../reftests/async-scrolling/checkerboard-3.html   |  14 +++++
 layout/reftests/async-scrolling/culling-1-ref.html |  23 ++++++++
 layout/reftests/async-scrolling/culling-1.html     |  20 +++++++
 .../disable-apz-for-sle-pages-ref.html             |  19 +++++++
 .../async-scrolling/disable-apz-for-sle-pages.html |  32 +++++++++++
 layout/reftests/async-scrolling/element-1-ref.html |   8 +++
 layout/reftests/async-scrolling/element-1.html     |  12 ++++
 .../fixed-pos-scrollable-1-ref.html                |   8 +++
 .../async-scrolling/fixed-pos-scrollable-1.html    |  15 +++++
 .../group-opacity-surface-size-1-ref.html          |  36 ++++++++++++
 .../group-opacity-surface-size-1.html              |  40 ++++++++++++++
 layout/reftests/async-scrolling/iframe-1-ref.html  |  10 ++++
 layout/reftests/async-scrolling/iframe-1.html      |  12 ++++
 layout/reftests/async-scrolling/nested-1-ref.html  |  10 ++++
 layout/reftests/async-scrolling/nested-1.html      |  18 ++++++
 layout/reftests/async-scrolling/nested-2-ref.html  |  10 ++++
 layout/reftests/async-scrolling/nested-2.html      |  17 ++++++
 .../offscreen-clipped-blendmode-1.html             |  39 +++++++++++++
 .../offscreen-clipped-blendmode-2.html             |  43 +++++++++++++++
 .../offscreen-clipped-blendmode-3.html             |  40 ++++++++++++++
 .../offscreen-clipped-blendmode-4.html             |  44 +++++++++++++++
 .../offscreen-clipped-blendmode-ref.html           |  31 +++++++++++
 .../offscreen-prerendered-active-opacity-ref.html  |  42 ++++++++++++++
 .../offscreen-prerendered-active-opacity.html      |  39 +++++++++++++
 .../opaque-fractional-displayport-1.html           |  51 +++++++++++++++++
 .../opaque-fractional-displayport-2.html           |  56 +++++++++++++++++++
 .../perspective-scrolling-1-ref.html               |  34 ++++++++++++
 .../async-scrolling/perspective-scrolling-1.html   |  33 +++++++++++
 .../perspective-scrolling-2-ref.html               |  34 ++++++++++++
 .../async-scrolling/perspective-scrolling-2.html   |  41 ++++++++++++++
 .../perspective-scrolling-3-ref.html               |  40 ++++++++++++++
 .../async-scrolling/perspective-scrolling-3.html   |  41 ++++++++++++++
 .../perspective-scrolling-4-ref.html               |  44 +++++++++++++++
 .../async-scrolling/perspective-scrolling-4.html   |  49 +++++++++++++++++
 .../async-scrolling/position-fixed-1-ref.html      |   6 ++
 .../reftests/async-scrolling/position-fixed-1.html |  10 ++++
 .../async-scrolling/position-fixed-2-ref.html      |   9 +++
 .../reftests/async-scrolling/position-fixed-2.html |  14 +++++
 .../async-scrolling/position-fixed-body-ref.html   |  27 +++++++++
 .../async-scrolling/position-fixed-body.html       |  31 +++++++++++
 .../position-fixed-cover-1-ref.html                |   7 +++
 .../async-scrolling/position-fixed-cover-1.html    |  12 ++++
 .../position-fixed-cover-2-ref.html                |   7 +++
 .../async-scrolling/position-fixed-cover-2.html    |  12 ++++
 .../position-fixed-cover-3-ref.html                |   7 +++
 .../async-scrolling/position-fixed-cover-3.html    |  14 +++++
 .../position-fixed-iframe-1-ref.html               |   6 ++
 .../async-scrolling/position-fixed-iframe-1.html   |  20 +++++++
 .../position-fixed-iframe-2-ref.html               |   6 ++
 .../async-scrolling/position-fixed-iframe-2.html   |  20 +++++++
 .../position-fixed-in-scroll-container-ref.html    |  40 ++++++++++++++
 .../position-fixed-in-scroll-container.html        |  49 +++++++++++++++++
 .../position-fixed-inside-sticky-1-ref.html        |  20 +++++++
 .../position-fixed-inside-sticky-1.html            |  31 +++++++++++
 .../position-fixed-inside-sticky-2-ref.html        |  20 +++++++
 .../position-fixed-inside-sticky-2.html            |  32 +++++++++++
 .../position-fixed-transformed-1-ref.html          |  21 +++++++
 .../position-fixed-transformed-1.html              |  23 ++++++++
 .../position-sticky-transformed-ref.html           |   6 ++
 .../position-sticky-transformed.html               |   9 +++
 layout/reftests/async-scrolling/reftest-stylo.list |  59 ++++++++++++++++++++
 layout/reftests/async-scrolling/reftest.list       |  61 +++++++++++++++++++++
 .../repeatable-diagonal-gradient.png               | Bin 0 -> 14520 bytes
 .../async-scrolling/split-layers-1-ref.html        |  13 +++++
 .../reftests/async-scrolling/split-layers-1.html   |  16 ++++++
 .../split-layers-multi-scrolling-1-ref.html        |  14 +++++
 .../split-layers-multi-scrolling-1.html            |  19 +++++++
 .../split-opacity-layers-1-ref.html                |  12 ++++
 .../async-scrolling/split-opacity-layers-1.html    |  15 +++++
 .../sticky-pos-scrollable-1-ref.html               |   8 +++
 .../async-scrolling/sticky-pos-scrollable-1.html   |  15 +++++
 .../sticky-pos-scrollable-2-ref.html               |  18 ++++++
 .../async-scrolling/sticky-pos-scrollable-2.html   |  21 +++++++
 .../sticky-pos-scrollable-3-ref.html               |  19 +++++++
 .../async-scrolling/sticky-pos-scrollable-3.html   |  33 +++++++++++
 105 files changed, 2204 insertions(+)
 create mode 100644 layout/reftests/async-scrolling/background-blend-mode-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/background-blend-mode-1.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-1.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-clip-1.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-clip-2.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-mask.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-child.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-cover-1.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-cover-2.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-cover-3.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-in-opacity.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html
 create mode 100644 layout/reftests/async-scrolling/bg-fixed-transformed-image.html
 create mode 100644 layout/reftests/async-scrolling/checkerboard-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/checkerboard-1.html
 create mode 100644 layout/reftests/async-scrolling/checkerboard-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/checkerboard-2.html
 create mode 100644 layout/reftests/async-scrolling/checkerboard-3-ref.html
 create mode 100644 layout/reftests/async-scrolling/checkerboard-3.html
 create mode 100644 layout/reftests/async-scrolling/culling-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/culling-1.html
 create mode 100644 layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html
 create mode 100644 layout/reftests/async-scrolling/disable-apz-for-sle-pages.html
 create mode 100644 layout/reftests/async-scrolling/element-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/element-1.html
 create mode 100644 layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/fixed-pos-scrollable-1.html
 create mode 100644 layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/group-opacity-surface-size-1.html
 create mode 100644 layout/reftests/async-scrolling/iframe-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/iframe-1.html
 create mode 100644 layout/reftests/async-scrolling/nested-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/nested-1.html
 create mode 100644 layout/reftests/async-scrolling/nested-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/nested-2.html
 create mode 100644 layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html
 create mode 100644 layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html
 create mode 100644 layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html
 create mode 100644 layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html
 create mode 100644 layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html
 create mode 100644 layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html
 create mode 100644 layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html
 create mode 100644 layout/reftests/async-scrolling/opaque-fractional-displayport-1.html
 create mode 100644 layout/reftests/async-scrolling/opaque-fractional-displayport-2.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-1.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-2.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-3-ref.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-3.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-4-ref.html
 create mode 100644 layout/reftests/async-scrolling/perspective-scrolling-4.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-1.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-2.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-body-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-body.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-cover-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-cover-1.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-cover-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-cover-2.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-cover-3-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-cover-3.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-iframe-1.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-iframe-2.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-in-scroll-container.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-fixed-transformed-1.html
 create mode 100644 layout/reftests/async-scrolling/position-sticky-transformed-ref.html
 create mode 100644 layout/reftests/async-scrolling/position-sticky-transformed.html
 create mode 100644 layout/reftests/async-scrolling/reftest-stylo.list
 create mode 100644 layout/reftests/async-scrolling/reftest.list
 create mode 100644 layout/reftests/async-scrolling/repeatable-diagonal-gradient.png
 create mode 100644 layout/reftests/async-scrolling/split-layers-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/split-layers-1.html
 create mode 100644 layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html
 create mode 100644 layout/reftests/async-scrolling/split-opacity-layers-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/split-opacity-layers-1.html
 create mode 100644 layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html
 create mode 100644 layout/reftests/async-scrolling/sticky-pos-scrollable-1.html
 create mode 100644 layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html
 create mode 100644 layout/reftests/async-scrolling/sticky-pos-scrollable-2.html
 create mode 100644 layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html
 create mode 100644 layout/reftests/async-scrolling/sticky-pos-scrollable-3.html

(limited to 'layout/reftests/async-scrolling')

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 000000000..b5a9e0c12
--- /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 000000000..607e97e75
--- /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;
+  overflow: hidden;
+}
+
+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 000000000..f8f0aef05
--- /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 000000000..0e028105d
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-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="50">
+<body style="overflow:hidden; 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 000000000..a39c96e8a
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-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="50">
+<body style="overflow:hidden; 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 000000000..ec63dc8fd
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-2.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">
+<body style="overflow:hidden; 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 000000000..7ae384774
--- /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 000000000..c71b15b43
--- /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 000000000..a280259f4
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-mask.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">
+<body style="overflow:hidden; 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 000000000..8f647b7c9
--- /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 000000000..9c385c20c
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-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">
+<body style="overflow:hidden; 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 000000000..d5595cd82
--- /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 000000000..028a906c2
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.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="1000">
+<body style="overflow: hidden; 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-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-ref.html
new file mode 100644
index 000000000..9ca02365f
--- /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 000000000..eda15304d
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-child.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">
+<body style="overflow:hidden; 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 000000000..b5efcc741
--- /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 000000000..e2d77da95
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-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="400">
+<body style="overflow:hidden; 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 000000000..8d9601f2a
--- /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 000000000..258d2dd66
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-2.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="300">
+<body style="overflow:hidden; 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 000000000..eb87febce
--- /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 000000000..d909ce6f1
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-cover-3.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="300">
+<body style="overflow:hidden; 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-opacity-ref.html b/layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html
new file mode 100644
index 000000000..9d54bd813
--- /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 000000000..d668f3b77
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-in-opacity.html
@@ -0,0 +1,27 @@
+<!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>
+
+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-transformed-image-ref.html b/layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html
new file mode 100644
index 000000000..a59d053c4
--- /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 000000000..360d3682d
--- /dev/null
+++ b/layout/reftests/async-scrolling/bg-fixed-transformed-image.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>
+
+body {
+  margin: 0;
+  overflow: hidden;
+}
+
+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 000000000..1c3a1e455
--- /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 000000000..2f89dee51
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-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="1800">
+<!-- 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; overflow:hidden">
+  <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 000000000..d1927e43d
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background-color: green; overflow:hidden">
+  <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 000000000..5d44d0133
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-2.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="1800">
+<!-- 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; 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: 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 000000000..bba831e93
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-3-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<html>
+<body style="background-color: green; overflow:hidden">
+  <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 000000000..f8af32ea5
--- /dev/null
+++ b/layout/reftests/async-scrolling/checkerboard-3.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="2100">
+<!-- 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; 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: 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/culling-1-ref.html b/layout/reftests/async-scrolling/culling-1-ref.html
new file mode 100644
index 000000000..5b3bb1669
--- /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:hidden; background:red">
+      <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 000000000..b9766b979
--- /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:hidden; background:red"
+         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/disable-apz-for-sle-pages-ref.html b/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html
new file mode 100644
index 000000000..8e603fbc5
--- /dev/null
+++ b/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+  <title>Check that the apz.disable_for_sle_pages pref behaves as expected</title>
+  <script>
+    addEventListener('load', function() {
+        window.scrollTo(0, 100);
+        setTimeout(done, 0);
+    }, false);
+
+    function done() {
+        document.documentElement.classList.remove('reftest-wait');
+    }
+  </script>
+ </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 000000000..ac3447339
--- /dev/null
+++ b/layout/reftests/async-scrolling/disable-apz-for-sle-pages.html
@@ -0,0 +1,32 @@
+<!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 scrolls to (0, 100). This triggers a scroll event,
+    // which runs the scroll listener below. The scroll listener updates the
+    // position of the div to simulate position:fixed using 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.
+
+    addEventListener('scroll', function() {
+        document.getElementById('fake-fixed').style.top = window.scrollY + "px";
+    }, false);
+
+    addEventListener('load', function() {
+        window.scrollTo(0, 100);
+        setTimeout(done, 0);
+    }, false);
+
+    function done() {
+        document.documentElement.classList.remove('reftest-wait');
+    }
+  </script>
+ </head>
+ <body style="height: 5000px; background-image:url(repeatable-diagonal-gradient.png);">
+  <div id="fake-fixed" style="position: absolute; top: 0; left: 100px; width: 100px; height: 100px; background-color: green"></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 000000000..f7c40e2c5
--- /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 000000000..78418c159
--- /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:hidden; 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 000000000..5996b776e
--- /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 000000000..cabd57a9d
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrollable-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="80">
+<meta name="viewport" content="width=device-width">
+<body style="height: 5000px; overflow:hidden">
+  <!-- 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/group-opacity-surface-size-1-ref.html b/layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html
new file mode 100644
index 000000000..12b6ee367
--- /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 000000000..e37626694
--- /dev/null
+++ b/layout/reftests/async-scrolling/group-opacity-surface-size-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="100">
+<style>
+
+body {
+  margin: 0;
+  overflow: hidden;
+  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 000000000..76537c52c
--- /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 000000000..fbd89d661
--- /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='overflow:hidden'>
+                <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 000000000..2ad0568e1
--- /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 000000000..c8fe42eb3
--- /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:hidden; 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:hidden; 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 000000000..10ef23745
--- /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 000000000..2ca625795
--- /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:hidden; 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:hidden; 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/offscreen-clipped-blendmode-1.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html
new file mode 100644
index 000000000..64795e5cf
--- /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 000000000..d85dc23e6
--- /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 000000000..e128e2987
--- /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 000000000..883474724
--- /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 000000000..65660c6ca
--- /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 000000000..da251e5aa
--- /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 000000000..d36c940dd
--- /dev/null
+++ b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html
@@ -0,0 +1,39 @@
+<!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: 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 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 000000000..8a73a7f30
--- /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 000000000..ddcac0fe8
--- /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/perspective-scrolling-1-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-1-ref.html
new file mode 100644
index 000000000..433aa7abb
--- /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 000000000..cab2e4f8c
--- /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 000000000..720fbfa8d
--- /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 000000000..e2d7c8666
--- /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 000000000..9c8474d6c
--- /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 000000000..8211c52af
--- /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 000000000..4f5b1fc01
--- /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 000000000..49453d74d
--- /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/position-fixed-1-ref.html b/layout/reftests/async-scrolling/position-fixed-1-ref.html
new file mode 100644
index 000000000..b373cc114
--- /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 000000000..7cd92c453
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-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="50">
+<body style="overflow:hidden; 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 000000000..8804dd67b
--- /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 000000000..73add9830
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-2.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">
+<body style="overflow:hidden; 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-body-ref.html b/layout/reftests/async-scrolling/position-fixed-body-ref.html
new file mode 100644
index 000000000..3c79116aa
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-body-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<style>
+body {
+  height: 100vh;
+  margin: 0px;
+}
+#scrollbox {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#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 000000000..f72a5f4d3
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-body.html
@@ -0,0 +1,31 @@
+<!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: hidden;
+}
+#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 000000000..9e4dbe95d
--- /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 000000000..c726aec61
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-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="400">
+<body style="overflow:hidden; 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 000000000..134ef7282
--- /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 000000000..d768098c5
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-2.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="400">
+<body style="overflow:hidden; 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 000000000..a8e706087
--- /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 000000000..2f8259423
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-cover-3.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="400">
+<body style="overflow:hidden; 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 000000000..b373cc114
--- /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 000000000..68cccc3dd
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-iframe-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="0">
+<body style="overflow:hidden; 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'>
+    <body style='overflow:hidden; 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 000000000..b373cc114
--- /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 000000000..30d263502
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-iframe-2.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="80">
+<body style="overflow:hidden; 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'>
+    <body style='overflow:hidden; 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 000000000..3d2ba64eb
--- /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 000000000..058eac71a
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-in-scroll-container.html
@@ -0,0 +1,49 @@
+<!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: hidden;
+}
+
+.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-sticky-1-ref.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html
new file mode 100644
index 000000000..8c48da5db
--- /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 000000000..2aab3d5d6
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html
@@ -0,0 +1,31 @@
+<!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>
+body {
+  height: 4000px;
+  margin: 0;
+  overflow: hidden;
+}
+#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 000000000..8c48da5db
--- /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 000000000..23a7e02e1
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html
@@ -0,0 +1,32 @@
+<!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>
+body {
+  height: 4000px;
+  margin: 0;
+  overflow: hidden;
+}
+#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-transformed-1-ref.html b/layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html
new file mode 100644
index 000000000..6cb096303
--- /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 000000000..4f9cac419
--- /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-transformed-ref.html b/layout/reftests/async-scrolling/position-sticky-transformed-ref.html
new file mode 100644
index 000000000..19a91e7cd
--- /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 000000000..45b1b796a
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed.html
@@ -0,0 +1,9 @@
+<!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">
+<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/reftest-stylo.list b/layout/reftests/async-scrolling/reftest-stylo.list
new file mode 100644
index 000000000..b59ee28fd
--- /dev/null
+++ b/layout/reftests/async-scrolling/reftest-stylo.list
@@ -0,0 +1,59 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip-if(!asyncPan) == bg-fixed-1.html bg-fixed-1.html
+skip-if(!asyncPan) == bg-fixed-cover-1.html bg-fixed-cover-1.html
+skip-if(!asyncPan) == bg-fixed-cover-2.html bg-fixed-cover-2.html
+skip-if(!asyncPan) == bg-fixed-cover-3.html bg-fixed-cover-3.html
+skip-if(!asyncPan) == bg-fixed-child.html bg-fixed-child.html
+skip-if(!asyncPan) == bg-fixed-child-clip-1.html bg-fixed-child-clip-1.html
+skip-if(!asyncPan) == bg-fixed-child-clip-2.html bg-fixed-child-clip-2.html
+fuzzy(1,246) fuzzy-if(skiaContent,2,160) fuzzy-if(browserIsRemote&&d2d,53,185) skip-if(!asyncPan) == bg-fixed-child-mask.html bg-fixed-child-mask.html
+skip-if(!asyncPan) == bg-fixed-in-opacity.html bg-fixed-in-opacity.html
+skip-if(!asyncPan) == bg-fixed-child-no-culling.html bg-fixed-child-no-culling.html
+skip fuzzy-if(B2G,2,5366) fuzzy-if(Android,2,4000) fuzzy-if(browserIsRemote&&cocoaWidget,2,179524) fuzzy-if(browserIsRemote&&winWidget,1,74590) skip-if(!asyncPan) == bg-fixed-transformed-image.html bg-fixed-transformed-image.html
+skip-if(!asyncPan) == element-1.html element-1.html
+pref(layers.force-active,true) skip-if(!asyncPan) == iframe-1.html iframe-1.html
+skip-if(!asyncPan) == nested-1.html nested-1.html
+skip-if(!asyncPan) == nested-2.html nested-2.html
+skip-if(!asyncPan) == position-fixed-1.html position-fixed-1.html
+skip-if(!asyncPan) == position-fixed-2.html position-fixed-2.html
+skip-if(!asyncPan) == position-fixed-body.html position-fixed-body.html
+skip-if(!asyncPan) == position-fixed-cover-1.html position-fixed-cover-1.html
+skip-if(!asyncPan) == position-fixed-cover-2.html position-fixed-cover-2.html
+skip-if(!asyncPan) == position-fixed-cover-3.html position-fixed-cover-3.html
+fuzzy-if(Android,5,4) skip-if(!asyncPan) == position-fixed-transformed-1.html position-fixed-transformed-1.html
+skip-if(!asyncPan) == split-layers-1.html split-layers-1.html
+skip-if(!asyncPan) == split-layers-multi-scrolling-1.html split-layers-multi-scrolling-1.html
+fuzzy-if(skiaContent,2,240000) fuzzy-if(browserIsRemote&&!skiaContent&&(cocoaWidget||winWidget),1,240000) skip-if(!asyncPan) == split-opacity-layers-1.html split-opacity-layers-1.html
+skip-if(!asyncPan) == sticky-pos-scrollable-1.html sticky-pos-scrollable-1.html
+skip-if(!asyncPan) == fixed-pos-scrollable-1.html fixed-pos-scrollable-1.html
+skip-if(!asyncPan) == culling-1.html culling-1.html
+skip-if(!asyncPan) == position-fixed-iframe-1.html position-fixed-iframe-1.html
+skip-if(!asyncPan) == position-fixed-iframe-2.html position-fixed-iframe-2.html
+fuzzy-if(skiaContent||(browserIsRemote&&cocoaWidget),1,10000) skip-if(!asyncPan) == position-fixed-in-scroll-container.html position-fixed-in-scroll-container.html
+skip-if(!asyncPan) == position-fixed-inside-sticky-1.html position-fixed-inside-sticky-1.html
+skip-if(!asyncPan) == group-opacity-surface-size-1.html group-opacity-surface-size-1.html
+skip-if(!asyncPan) == position-sticky-transformed.html position-sticky-transformed.html
+skip-if(!asyncPan) == offscreen-prerendered-active-opacity.html offscreen-prerendered-active-opacity.html
+fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-1.html offscreen-clipped-blendmode-1.html
+fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-2.html offscreen-clipped-blendmode-2.html
+fuzzy-if(Android,6,4) skip == offscreen-clipped-blendmode-3.html offscreen-clipped-blendmode-3.html
+# bug 1251588 - wrong AGR on mix-blend-mode item
+fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-4.html offscreen-clipped-blendmode-4.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-1.html perspective-scrolling-1.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-2.html perspective-scrolling-2.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-3.html perspective-scrolling-3.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-4.html perspective-scrolling-4.html
+pref(apz.disable_for_scroll_linked_effects,true) skip-if(!asyncPan) == disable-apz-for-sle-pages.html disable-apz-for-sle-pages.html
+fuzzy-if(browserIsRemote&&d2d,1,19) skip-if(!asyncPan) == background-blend-mode-1.html background-blend-mode-1.html
+skip-if(Android||!asyncPan) == opaque-fractional-displayport-1.html opaque-fractional-displayport-1.html
+skip-if(Android||!asyncPan) == opaque-fractional-displayport-2.html opaque-fractional-displayport-2.html
+
+# for the following tests, we want to disable the low-precision buffer
+# as it will expand the displayport beyond what the test specifies in
+# its reftest-displayport attributes, and interfere with where we expect
+# checkerboarding to occur
+default-preferences pref(layers.low-precision-buffer,false)
+skip-if(!asyncPan) == checkerboard-1.html checkerboard-1.html
+skip-if(!asyncPan) == checkerboard-2.html checkerboard-2.html
+skip-if(!asyncPan) == checkerboard-3.html checkerboard-3.html
+default-preferences
diff --git a/layout/reftests/async-scrolling/reftest.list b/layout/reftests/async-scrolling/reftest.list
new file mode 100644
index 000000000..d2d5e5f03
--- /dev/null
+++ b/layout/reftests/async-scrolling/reftest.list
@@ -0,0 +1,61 @@
+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
+fuzzy(1,246) fuzzy-if(skiaContent,2,160) fuzzy-if(browserIsRemote&&d2d,53,185) skip-if(!asyncPan) == 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
+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
+fuzzy-if(Android,2,4000) fuzzy-if(browserIsRemote&&cocoaWidget,2,179524) fuzzy-if(browserIsRemote&&winWidget,1,74590) fuzzy-if(gtkWidget&&layersGPUAccelerated,1,3528) skip-if(!asyncPan) == bg-fixed-transformed-image.html bg-fixed-transformed-image-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
+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,5,4) skip-if(!asyncPan) == position-fixed-transformed-1.html position-fixed-transformed-1-ref.html
+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-if(skiaContent,2,240000) fuzzy-if(browserIsRemote&&!skiaContent&&(cocoaWidget||winWidget),1,240000) skip-if(!asyncPan) == split-opacity-layers-1.html split-opacity-layers-1-ref.html
+skip-if(!asyncPan) == 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) == 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-if(skiaContent,1,11300) skip-if(!asyncPan) == position-fixed-in-scroll-container.html position-fixed-in-scroll-container-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
+fuzzy(1,60000) skip-if(!asyncPan) == group-opacity-surface-size-1.html group-opacity-surface-size-1-ref.html
+skip-if(!asyncPan) == position-sticky-transformed.html position-sticky-transformed-ref.html
+skip-if(!asyncPan) == offscreen-prerendered-active-opacity.html offscreen-prerendered-active-opacity-ref.html
+fuzzy-if(Android,6,4) fuzzy-if(skiaContent&&!Android,1,34) skip-if(!asyncPan) == offscreen-clipped-blendmode-1.html offscreen-clipped-blendmode-ref.html
+fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-2.html offscreen-clipped-blendmode-ref.html
+fuzzy-if(Android,6,4) skip == offscreen-clipped-blendmode-3.html offscreen-clipped-blendmode-ref.html # bug 1251588 - wrong AGR on mix-blend-mode item
+fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-4.html offscreen-clipped-blendmode-ref.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-1.html perspective-scrolling-1-ref.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-2.html perspective-scrolling-2-ref.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-3.html perspective-scrolling-3-ref.html
+fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-4.html perspective-scrolling-4-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,1,19) skip-if(!asyncPan) == 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
+
+# for the following tests, we want to disable the low-precision buffer
+# as it will expand the displayport beyond what the test specifies in
+# its reftest-displayport attributes, and interfere with where we expect
+# checkerboarding to occur
+default-preferences pref(layers.low-precision-buffer,false)
+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
+default-preferences
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 000000000..d114e100d
Binary files /dev/null and b/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png differ
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 000000000..2d78cd173
--- /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 000000000..911982db3
--- /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:hidden; 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 000000000..bbb8a0529
--- /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 000000000..ecbc2814e
--- /dev/null
+++ b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html
@@ -0,0 +1,19 @@
+<!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">
+<body style="height:3000px; overflow:hidden">
+  <!-- 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"
+       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 000000000..347bfe254
--- /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 000000000..695412045
--- /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:hidden; 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-pos-scrollable-1-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html
new file mode 100644
index 000000000..2522f82e2
--- /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 000000000..83c973b39
--- /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:hidden; 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 000000000..da90b1998
--- /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 000000000..f133e663e
--- /dev/null
+++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-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="100">
+<style>
+body {
+  margin: 0;
+  height: 4000px;
+  overflow: hidden;
+}
+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 000000000..fab9f954b
--- /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 000000000..9018daae7
--- /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 {
+      overflow: hidden;
+    }
+    #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>
\ No newline at end of file
-- 
cgit v1.2.3