summaryrefslogtreecommitdiffstats
path: root/layout/reftests/async-scrolling
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/async-scrolling')
-rw-r--r--layout/reftests/async-scrolling/background-blend-mode-1-ref.html17
-rw-r--r--layout/reftests/async-scrolling/background-blend-mode-1.html26
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-1-ref.html7
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-1.html13
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-clip-1.html16
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-clip-2.html20
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html11
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html11
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-mask.html17
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html11
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html14
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html7
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html12
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child-ref.html10
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-child.html15
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html9
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-cover-1.html15
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html10
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-cover-2.html14
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html12
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-cover-3.html16
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html24
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-in-opacity.html27
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html19
-rw-r--r--layout/reftests/async-scrolling/bg-fixed-transformed-image.html21
-rw-r--r--layout/reftests/async-scrolling/checkerboard-1-ref.html5
-rw-r--r--layout/reftests/async-scrolling/checkerboard-1.html11
-rw-r--r--layout/reftests/async-scrolling/checkerboard-2-ref.html6
-rw-r--r--layout/reftests/async-scrolling/checkerboard-2.html16
-rw-r--r--layout/reftests/async-scrolling/checkerboard-3-ref.html5
-rw-r--r--layout/reftests/async-scrolling/checkerboard-3.html14
-rw-r--r--layout/reftests/async-scrolling/culling-1-ref.html23
-rw-r--r--layout/reftests/async-scrolling/culling-1.html20
-rw-r--r--layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html19
-rw-r--r--layout/reftests/async-scrolling/disable-apz-for-sle-pages.html32
-rw-r--r--layout/reftests/async-scrolling/element-1-ref.html8
-rw-r--r--layout/reftests/async-scrolling/element-1.html12
-rw-r--r--layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html8
-rw-r--r--layout/reftests/async-scrolling/fixed-pos-scrollable-1.html15
-rw-r--r--layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html36
-rw-r--r--layout/reftests/async-scrolling/group-opacity-surface-size-1.html40
-rw-r--r--layout/reftests/async-scrolling/iframe-1-ref.html10
-rw-r--r--layout/reftests/async-scrolling/iframe-1.html12
-rw-r--r--layout/reftests/async-scrolling/nested-1-ref.html10
-rw-r--r--layout/reftests/async-scrolling/nested-1.html18
-rw-r--r--layout/reftests/async-scrolling/nested-2-ref.html10
-rw-r--r--layout/reftests/async-scrolling/nested-2.html17
-rw-r--r--layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html39
-rw-r--r--layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html43
-rw-r--r--layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html40
-rw-r--r--layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html44
-rw-r--r--layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html31
-rw-r--r--layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html42
-rw-r--r--layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html39
-rw-r--r--layout/reftests/async-scrolling/opaque-fractional-displayport-1.html51
-rw-r--r--layout/reftests/async-scrolling/opaque-fractional-displayport-2.html56
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-1-ref.html34
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-1.html33
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-2-ref.html34
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-2.html41
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-3-ref.html40
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-3.html41
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-4-ref.html44
-rw-r--r--layout/reftests/async-scrolling/perspective-scrolling-4.html49
-rw-r--r--layout/reftests/async-scrolling/position-fixed-1-ref.html6
-rw-r--r--layout/reftests/async-scrolling/position-fixed-1.html10
-rw-r--r--layout/reftests/async-scrolling/position-fixed-2-ref.html9
-rw-r--r--layout/reftests/async-scrolling/position-fixed-2.html14
-rw-r--r--layout/reftests/async-scrolling/position-fixed-body-ref.html27
-rw-r--r--layout/reftests/async-scrolling/position-fixed-body.html31
-rw-r--r--layout/reftests/async-scrolling/position-fixed-cover-1-ref.html7
-rw-r--r--layout/reftests/async-scrolling/position-fixed-cover-1.html12
-rw-r--r--layout/reftests/async-scrolling/position-fixed-cover-2-ref.html7
-rw-r--r--layout/reftests/async-scrolling/position-fixed-cover-2.html12
-rw-r--r--layout/reftests/async-scrolling/position-fixed-cover-3-ref.html7
-rw-r--r--layout/reftests/async-scrolling/position-fixed-cover-3.html14
-rw-r--r--layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html6
-rw-r--r--layout/reftests/async-scrolling/position-fixed-iframe-1.html20
-rw-r--r--layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html6
-rw-r--r--layout/reftests/async-scrolling/position-fixed-iframe-2.html20
-rw-r--r--layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html40
-rw-r--r--layout/reftests/async-scrolling/position-fixed-in-scroll-container.html49
-rw-r--r--layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html20
-rw-r--r--layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html31
-rw-r--r--layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html20
-rw-r--r--layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html32
-rw-r--r--layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html21
-rw-r--r--layout/reftests/async-scrolling/position-fixed-transformed-1.html23
-rw-r--r--layout/reftests/async-scrolling/position-sticky-transformed-ref.html6
-rw-r--r--layout/reftests/async-scrolling/position-sticky-transformed.html9
-rw-r--r--layout/reftests/async-scrolling/reftest-stylo.list59
-rw-r--r--layout/reftests/async-scrolling/reftest.list61
-rw-r--r--layout/reftests/async-scrolling/repeatable-diagonal-gradient.pngbin0 -> 14520 bytes
-rw-r--r--layout/reftests/async-scrolling/split-layers-1-ref.html13
-rw-r--r--layout/reftests/async-scrolling/split-layers-1.html16
-rw-r--r--layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html14
-rw-r--r--layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html19
-rw-r--r--layout/reftests/async-scrolling/split-opacity-layers-1-ref.html12
-rw-r--r--layout/reftests/async-scrolling/split-opacity-layers-1.html15
-rw-r--r--layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html8
-rw-r--r--layout/reftests/async-scrolling/sticky-pos-scrollable-1.html15
-rw-r--r--layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html18
-rw-r--r--layout/reftests/async-scrolling/sticky-pos-scrollable-2.html21
-rw-r--r--layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html19
-rw-r--r--layout/reftests/async-scrolling/sticky-pos-scrollable-3.html33
105 files changed, 2204 insertions, 0 deletions
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
--- /dev/null
+++ b/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png
Binary files 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