summaryrefslogtreecommitdiffstats
path: root/gfx/layers/apz/test/reftest
diff options
context:
space:
mode:
Diffstat (limited to 'gfx/layers/apz/test/reftest')
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-h-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl-ref.html9
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl.html13
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-h.html12
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom.html14
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-v-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl-ref.html9
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl.html13
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-v.html12
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-vh-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl-ref.html9
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl.html13
-rw-r--r--gfx/layers/apz/test/reftest/async-scrollbar-1-vh.html12
-rw-r--r--gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping-ref.html27
-rw-r--r--gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping.html53
-rw-r--r--gfx/layers/apz/test/reftest/iframe-zoomed-child.html12
-rw-r--r--gfx/layers/apz/test/reftest/iframe-zoomed-ref.html20
-rw-r--r--gfx/layers/apz/test/reftest/iframe-zoomed.html25
-rw-r--r--gfx/layers/apz/test/reftest/initial-scale-1-ref.html9
-rw-r--r--gfx/layers/apz/test/reftest/initial-scale-1.html9
-rw-r--r--gfx/layers/apz/test/reftest/pinch-zoom-position-fixed-ref.html23
-rw-r--r--gfx/layers/apz/test/reftest/pinch-zoom-position-fixed.html37
-rw-r--r--gfx/layers/apz/test/reftest/pinch-zoom-position-sticky-ref.html27
-rw-r--r--gfx/layers/apz/test/reftest/pinch-zoom-position-sticky.html30
-rw-r--r--gfx/layers/apz/test/reftest/reftest.list50
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in.html13
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out.html13
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-async-scroll.html12
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in.html8
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-async-scroll.html12
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-ref.html8
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out.html8
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbars-1-ref.html14
-rw-r--r--gfx/layers/apz/test/reftest/root-scrollbars-1.html14
-rw-r--r--gfx/layers/apz/test/reftest/scaled-iframe-zoomed-ref.html21
-rw-r--r--gfx/layers/apz/test/reftest/scaled-iframe-zoomed.html26
-rw-r--r--gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll-ref.html10
-rw-r--r--gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll.html15
-rw-r--r--gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll-ref.html10
-rw-r--r--gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll.html15
44 files changed, 693 insertions, 0 deletions
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-h-ref.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-h-ref.html
new file mode 100644
index 0000000000..62d99b6dfe
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-h-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+<body onload="scrollTo(450,0); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 10px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl-ref.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl-ref.html
new file mode 100644
index 0000000000..e40ac8debb
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="width=device-width">
+<style> html { direction: rtl; } </style>
+</head>
+<body onload="scrollTo(-450,0); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 10px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl.html
new file mode 100644
index 0000000000..81f7f77817
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-h-rtl.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="-449" reftest-async-scroll-y="0"><head>
+<meta name="viewport" content="width=device-width">
+<style> html { direction: rtl; } </style>
+</head>
+<!-- Doing scrollTo(-1,0) is to activate the right arrow in the scrollbar
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(-1,0); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 10px; background: white"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-h.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-h.html
new file mode 100644
index 0000000000..5d30584acd
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-h.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="449" reftest-async-scroll-y="0"><head>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+</head>
+<!-- Doing scrollTo(1,0) is to activate the left arrow in the scrollbar
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(1,0); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 10px; background: white"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom-ref.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom-ref.html
new file mode 100644
index 0000000000..6226a95070
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-zoom="0.67"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<body onload="scrollTo(0,10000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 10px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom.html
new file mode 100644
index 0000000000..50c6d0854d
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-fullzoom.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="0" reftest-async-scroll-y="9999"
+ reftest-zoom="0.67">
+<head>
+<meta name="viewport" content="width=device-width">
+</head>
+<!-- Doing scrollTo(0,1) is to activate the up arrow in the scrollbar
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(0,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 10px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-v-ref.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-ref.html
new file mode 100644
index 0000000000..aec5f89cbc
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<body onload="scrollTo(0,10000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 10px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl-ref.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl-ref.html
new file mode 100644
index 0000000000..81be67146f
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="width=device-width">
+<style> html { direction: rtl; } </style>
+</head>
+<body onload="scrollTo(0,10000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 10px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl.html
new file mode 100644
index 0000000000..24e7705723
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-v-rtl.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="0" reftest-async-scroll-y="9999"><head>
+<meta name="viewport" content="width=device-width">
+<style> html { direction: rtl; } </style>
+</head>
+<!-- Doing scrollTo(0,1) is to activate the up arrow in the scrollbar
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(0,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 10px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-v.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-v.html
new file mode 100644
index 0000000000..268f3b92e3
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-v.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="0" reftest-async-scroll-y="9999"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<!-- Doing scrollTo(0,1) is to activate the up arrow in the scrollbar
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(0,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 10px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-ref.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-ref.html
new file mode 100644
index 0000000000..35922e3253
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<body onload="scrollTo(450,8000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl-ref.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl-ref.html
new file mode 100644
index 0000000000..22bf3cf1c8
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+<style> html { direction: rtl; } </style>
+</head>
+<body onload="scrollTo(-450,8000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl.html
new file mode 100644
index 0000000000..09fce0bbe9
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh-rtl.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="-440" reftest-async-scroll-y="7999"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+<style> html { direction: rtl; } </style>
+</head>
+<!-- Doing scrollTo(-10,1) is to activate the right/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(-10,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/async-scrollbar-1-vh.html b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh.html
new file mode 100644
index 0000000000..a8d28ec414
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/async-scrollbar-1-vh.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="449" reftest-async-scroll-y="7999"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<!-- Doing scrollTo(1,1) is to activate the left/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(1,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping-ref.html b/gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping-ref.html
new file mode 100644
index 0000000000..3db9f2969e
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping-ref.html
@@ -0,0 +1,27 @@
+<html>
+<script>
+ function run() {
+ document.body.classList.toggle('noscroll');
+ document.getElementById('spacer').style.height = '100%';
+ // Scroll to the very end, including any fractional pixels
+ document.body.scrollTop = document.body.scrollTopMax + 1;
+ }
+</script>
+<style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ background-color: green;
+ }
+
+ .noscroll {
+ overflow: hidden;
+ height: 100%;
+ }
+</style>
+<body onload="run()">
+ <div id="spacer" style="height: 5000px">
+ This is the top of the page.
+ </div>
+ This is the bottom of the page.
+</body>
diff --git a/gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping.html b/gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping.html
new file mode 100644
index 0000000000..479363f3fb
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/frame-reconstruction-scroll-clamping.html
@@ -0,0 +1,53 @@
+<html class="reftest-wait">
+<!--
+For bug 1266833; syncing the scroll offset to APZ properly when the scroll
+position is clamped to a smaller value during a frame reconstruction.
+-->
+<script>
+ function run() {
+ document.body.scrollTop = document.body.scrollTopMax;
+
+ // Let the scroll position propagate to APZ before we do the frame
+ // reconstruction. Ideally we would wait for flushApzRepaints here but
+ // we don't have access to DOMWindowUtils in a reftest, so we just wait
+ // 100ms to approximate it. With bug 1266833 fixed, this test should
+ // never fail regardless of what this timeout value is.
+ setTimeout(frameReconstruction, 100);
+ }
+
+ function frameReconstruction() {
+ document.body.classList.toggle('noscroll');
+ document.documentElement.classList.toggle('reconstruct-body');
+ document.getElementById('spacer').style.height = '100%';
+ document.documentElement.classList.remove('reftest-wait');
+ }
+</script>
+<style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ background-color: green;
+ }
+
+ .noscroll {
+ overflow: hidden;
+ height: 100%;
+ }
+
+ /* Toggling this on and off triggers a frame reconstruction on the <body> */
+ html.reconstruct-body::before {
+ top: 0;
+ content: '';
+ display: block;
+ height: 2px;
+ position: absolute;
+ width: 100%;
+ z-index: 99;
+ }
+</style>
+<body onload="setTimeout(run, 0)">
+ <div id="spacer" style="height: 5000px">
+ This is the top of the page.
+ </div>
+ This is the bottom of the page.
+</body>
diff --git a/gfx/layers/apz/test/reftest/iframe-zoomed-child.html b/gfx/layers/apz/test/reftest/iframe-zoomed-child.html
new file mode 100644
index 0000000000..4d51f46399
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/iframe-zoomed-child.html
@@ -0,0 +1,12 @@
+<style>
+div {
+ position: absolute;
+ background-color: green;
+ width: 10px;
+ height: 10px;
+}
+</style>
+<div style="top: 0; left: 0;"></div>
+<div style="top: 0; right: 0;"></div>
+<div style="bottom: 0; right: 0;"></div>
+<div style="bottom: 0; left: 0;"></div>
diff --git a/gfx/layers/apz/test/reftest/iframe-zoomed-ref.html b/gfx/layers/apz/test/reftest/iframe-zoomed-ref.html
new file mode 100644
index 0000000000..2c98a7eb6a
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/iframe-zoomed-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html reftest-resolution="1.5">
+<style>
+div {
+ margin-left: 100px;
+ margin-top: 100px;
+ width: 400px;
+ height: 400px;
+ border: 2px blue solid;
+}
+iframe {
+ width: 350px;
+ height: 350px;
+ border: 2px black solid;
+}
+</style>
+<div>
+<iframe src="iframe-zoomed-child.html"></iframe>
+</div>
+</html>
diff --git a/gfx/layers/apz/test/reftest/iframe-zoomed.html b/gfx/layers/apz/test/reftest/iframe-zoomed.html
new file mode 100644
index 0000000000..d3d5d914ba
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/iframe-zoomed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html reftest-resolution="1.5">
+<style>
+div {
+ margin-left: 100px;
+ margin-top: 100px;
+ width: 400px;
+ height: 400px;
+ border: 2px blue solid;
+}
+iframe {
+ width: 350px;
+ height: 350px;
+ border: 2px black solid;
+}
+</style>
+<div>
+<!--
+ this data:text/html is generated from single-lined version of
+ iframe-zoomed-child.html by encodeURIComponent().
+ -->
+<iframe src="data:text/html,%3Cstyle%3Ediv%20%7Bposition%3A%20absolute%3Bbackground-color%3A%20green%3Bwidth%3A%2010px%3Bheight%3A%2010px%3B%7D%3C%2Fstyle%3E%3Cdiv%20style%3D%22top%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22top%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E">
+</iframe>
+</div>
+</html>
diff --git a/gfx/layers/apz/test/reftest/initial-scale-1-ref.html b/gfx/layers/apz/test/reftest/initial-scale-1-ref.html
new file mode 100644
index 0000000000..cb51966a28
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/initial-scale-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html><head>
+<meta name="viewport" content="initial-scale=0.25,width=device-width">
+</head>
+<body>
+This tests that an initial-scale of 0 (i.e. garbage) is overridden<br/>
+with something a little more sane.
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/initial-scale-1.html b/gfx/layers/apz/test/reftest/initial-scale-1.html
new file mode 100644
index 0000000000..58babe9403
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/initial-scale-1.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html><head>
+<meta name="viewport" content="initial-scale=0; width=device-width">
+</head>
+<body>
+This tests that an initial-scale of 0 (i.e. garbage) is overridden<br/>
+with something a little more sane.
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/pinch-zoom-position-fixed-ref.html b/gfx/layers/apz/test/reftest/pinch-zoom-position-fixed-ref.html
new file mode 100644
index 0000000000..f7d485c509
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/pinch-zoom-position-fixed-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html reftest-resolution="1.5">
+<head>
+ <meta name="viewport" content="width=device-width">
+ <style>
+ body {
+ margin: 0;
+ height: 2000px;
+ overflow: hidden;
+ }
+ div {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 500px;
+ background: repeating-linear-gradient(90deg, transparent, transparent 20px, black 20px, black 40px);
+ }
+ </style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/pinch-zoom-position-fixed.html b/gfx/layers/apz/test/reftest/pinch-zoom-position-fixed.html
new file mode 100644
index 0000000000..c4476f4872
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/pinch-zoom-position-fixed.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="1.5">
+<head>
+ <meta name="viewport" content="width=device-width">
+ <style>
+ body {
+ margin: 0;
+ height: 2000px;
+ overflow: hidden;
+ }
+ div {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 500px;
+ background: repeating-linear-gradient(90deg, transparent, transparent 20px, black 20px, black 40px);
+ }
+ </style>
+</head>
+<body onload="scrollTo(0, 500); document.documentElement.classList.remove('reftest-wait');">
+ <!-- Test that fixed position elements are attached to the layout viewport
+ instead of the visual viewport.
+
+ The reference page has a position:absolute element in place of a
+ position:fixed element, both positioned at the bottom of the page.
+
+ After zooming in, the top edge of the visual viewport will coincide with
+ the top edge of the layout viewport, but their bottom edges will
+ diverge.
+
+ Since absolute elements are attached to the initial containing block,
+ which coincides with the layout viewport on page load, the rendering of
+ the fixed element will only match if it is being attached to the layout
+ viewport. -->
+ <div></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/pinch-zoom-position-sticky-ref.html b/gfx/layers/apz/test/reftest/pinch-zoom-position-sticky-ref.html
new file mode 100644
index 0000000000..c430b532df
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/pinch-zoom-position-sticky-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html reftest-resolution="1.5">
+<head>
+ <meta name="viewport" content="width=device-width">
+ <style>
+ body {
+ margin: 0;
+ height: 2000px;
+ overflow: hidden;
+ }
+ #tall {
+ height: 100vh;
+ }
+ #sticky {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 500px;
+ background: repeating-linear-gradient(90deg, transparent, transparent 20px, black 20px, black 40px);
+ }
+ </style>
+</head>
+<body>
+ <div id="tall"></div>
+ <div id="sticky"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/pinch-zoom-position-sticky.html b/gfx/layers/apz/test/reftest/pinch-zoom-position-sticky.html
new file mode 100644
index 0000000000..245e0d775e
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/pinch-zoom-position-sticky.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="1.5">
+<head>
+ <meta name="viewport" content="width=device-width">
+ <style>
+ body {
+ margin: 0;
+ height: 2000px;
+ overflow: hidden;
+ }
+ #tall {
+ height: 100vh;
+ }
+ #sticky {
+ position: sticky;
+ bottom: 0;
+ width: 100%;
+ height: 500px;
+ background: repeating-linear-gradient(90deg, transparent, transparent 20px, black 20px, black 40px);
+ }
+ </style>
+</head>
+<body onload="scrollTo(0, 500); document.documentElement.classList.remove('reftest-wait');">
+ <!-- This is similar to the pinch-zoom-position-fixed test, but we add a tall
+ element before the sticky element to ensure that the sticky element is
+ in its "fixed" configuration on page load. -->
+ <div id="tall"></div>
+ <div id="sticky"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/reftest.list b/gfx/layers/apz/test/reftest/reftest.list
new file mode 100644
index 0000000000..b346f54057
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/reftest.list
@@ -0,0 +1,50 @@
+# The following tests test the async positioning of the scrollbars.
+# Basic root-frame scrollbar with async scrolling
+# First make sure that we are actually drawing scrollbars
+skip-if(!asyncPan) pref(apz.allow_zooming,true) != async-scrollbar-1-v.html about:blank
+skip-if(!asyncPan) pref(apz.allow_zooming,true) != async-scrollbar-1-v-ref.html about:blank
+fuzzy-if(Android,0-5,0-6) fuzzy-if(gtkWidget,1-8,8-32) fuzzy-if(cocoaWidget,16-22,20-44) skip-if(!asyncPan) pref(apz.allow_zooming,true) == async-scrollbar-1-v.html async-scrollbar-1-v-ref.html
+fuzzy-if(Android,0-13,0-10) fuzzy-if(gtkWidget,1-30,4-32) fuzzy-if(cocoaWidget,14-22,20-44) skip-if(!asyncPan) pref(apz.allow_zooming,true) == async-scrollbar-1-h.html async-scrollbar-1-h-ref.html
+fuzzy-if(Android,0-13,0-21) fuzzy-if(gtkWidget,1-4,4-24) fuzzy-if(cocoaWidget,11-18,44-88) skip-if(!asyncPan) pref(apz.allow_zooming,true) == async-scrollbar-1-vh.html async-scrollbar-1-vh-ref.html
+fuzzy-if(Android,0-5,0-6) fuzzy-if(gtkWidget,1-8,8-32) fuzzy-if(cocoaWidget,16-22,20-44) skip-if(!asyncPan) pref(apz.allow_zooming,true) == async-scrollbar-1-v-rtl.html async-scrollbar-1-v-rtl-ref.html
+fuzzy-if(Android,0-14,0-10) fuzzy-if(gtkWidget,1-30,12-32) fuzzy-if(cocoaWidget,14-22,20-44) skip-if(!asyncPan) pref(apz.allow_zooming,true) == async-scrollbar-1-h-rtl.html async-scrollbar-1-h-rtl-ref.html
+fuzzy-if(Android,0-43,0-26) fuzzy-if(gtkWidget,0-14,12-32) fuzzy-if(cocoaWidget,11-18,26-76) skip-if(!asyncPan) pref(apz.allow_zooming,true) == async-scrollbar-1-vh-rtl.html async-scrollbar-1-vh-rtl-ref.html
+
+# Different async zoom levels. Since the scrollthumb gets async-scaled in the
+# compositor, the border-radius ends of the scrollthumb are going to be a little
+# off, hence the fuzzy-if clauses.
+skip-if(Android) fuzzy(0-107,0-72) pref(apz.allow_zooming,true) pref(apz.scrollthumb.recalc,true) == root-scrollbar-async-zoomed-in.html root-scrollbar-async-zoomed-in-ref.html
+skip-if(Android) fuzzy(0-107,0-167) pref(apz.allow_zooming,true) pref(apz.scrollthumb.recalc,true) == root-scrollbar-async-zoomed-out.html root-scrollbar-async-zoomed-out-ref.html
+skip-if(!Android) fuzzy(0-54,0-33) pref(apz.allow_zooming,true) == root-scrollbar-async-zoomed-in.html root-scrollbar-async-zoomed-in-ref.html
+skip-if(!Android) fuzzy(0-53,0-30) pref(apz.allow_zooming,true) == root-scrollbar-async-zoomed-out.html root-scrollbar-async-zoomed-out-ref.html
+
+# Test that the compositor thumb sizing calculations handle a non-default device scale correctly
+fuzzy-if(Android,0-31,0-29) fuzzy-if(gtkWidget,0-18,0-49) fuzzy-if(cocoaWidget,0-21,0-53) == async-scrollbar-1-v-fullzoom.html async-scrollbar-1-v-fullzoom-ref.html
+
+# Test scrollbars working properly with pinch-zooming, i.e. different document resolutions.
+# As above, the end of the scrollthumb won't match perfectly, but the bulk of the scrollbar should be present and identical.
+# On desktop, even more fuzz is needed because thumb scaling is not exactly proportional: making the page twice as long
+# won't make the thumb exactly twice as short, which is what the test expects. That's fine, as the purpose of the test is
+# to catch more fundamental scrollbar rendering bugs such as the entire track being mispositioned or the thumb being
+# clipped away.
+fuzzy-if(Android,0-54,0-22) fuzzy-if(!Android,0-128,0-137) pref(apz.allow_zooming,true) == root-scrollbar-zoomed-in.html root-scrollbar-zoomed-in-ref.html
+fuzzy-if(Android,0-54,0-22) fuzzy-if(!Android,0-128,0-137) pref(apz.allow_zooming,true) pref(apz.allow_zooming_out,true) == root-scrollbar-zoomed-out.html root-scrollbar-zoomed-out-ref.html
+fuzzy-if(Android,0-54,0-27) fuzzy-if(!Android,0-128,0-137) pref(apz.allow_zooming,true) == root-scrollbar-zoomed-in-async-scroll.html root-scrollbar-zoomed-in-ref.html
+fuzzy-if(Android,0-54,0-25) fuzzy-if(!Android,0-128,0-137) pref(apz.allow_zooming,true) pref(apz.allow_zooming_out,true) == root-scrollbar-zoomed-out-async-scroll.html root-scrollbar-zoomed-out-ref.html
+fuzzy-if(Android,0-51,0-50) fuzzy-if(!Android,0-128,0-137) pref(apz.allow_zooming,true) == subframe-scrollbar-zoomed-in-async-scroll.html subframe-scrollbar-zoomed-in-async-scroll-ref.html
+fuzzy-if(Android,0-28,0-23) fuzzy-if(!Android,0-107,0-34) pref(apz.allow_zooming,true) pref(apz.allow_zooming_out,true) == subframe-scrollbar-zoomed-out-async-scroll.html subframe-scrollbar-zoomed-out-async-scroll-ref.html
+
+# Meta-viewport tag support
+skip-if(!Android) pref(apz.allow_zooming,true) == initial-scale-1.html initial-scale-1-ref.html
+
+skip-if(!asyncPan) == frame-reconstruction-scroll-clamping.html frame-reconstruction-scroll-clamping-ref.html
+
+# Test that position:fixed and position:sticky elements are attached to the
+# layout viewport.
+skip-if(winWidget&&isCoverageBuild) pref(apz.allow_zooming,true) == pinch-zoom-position-fixed.html pinch-zoom-position-fixed-ref.html
+skip-if(winWidget&&isCoverageBuild) pref(apz.allow_zooming,true) == pinch-zoom-position-sticky.html pinch-zoom-position-sticky-ref.html
+
+pref(apz.allow_zooming,true) == iframe-zoomed.html iframe-zoomed-ref.html
+pref(apz.allow_zooming,true) == scaled-iframe-zoomed.html scaled-iframe-zoomed-ref.html
+
+== root-scrollbars-1.html root-scrollbars-1-ref.html
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in-ref.html b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in-ref.html
new file mode 100644
index 0000000000..9568836459
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<body onload="scrollTo(450,10000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in.html b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in.html
new file mode 100644
index 0000000000..31e1e99a3d
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-in.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="224" reftest-async-scroll-y="4999"
+ reftest-async-zoom="2.0"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<!-- Doing scrollTo(1,1) is to activate the left/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(1,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 4500px; height: 10000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out-ref.html b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out-ref.html
new file mode 100644
index 0000000000..9568836459
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<body onload="scrollTo(450,10000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out.html b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out.html
new file mode 100644
index 0000000000..4032c3c638
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-async-zoomed-out.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="reftest-wait"
+ reftest-async-scroll
+ reftest-async-scroll-x="899" reftest-async-scroll-y="19999"
+ reftest-async-zoom="0.5"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<!-- Doing scrollTo(1,1) is to activate the left/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(1,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 18000px; height: 40000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-async-scroll.html b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-async-scroll.html
new file mode 100644
index 0000000000..04c829d427
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-async-scroll.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="2.0"
+ reftest-async-scroll
+ reftest-async-scroll-x="224" reftest-async-scroll-y="4999"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<!-- Doing scrollTo(1,1) is to activate the left/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(1,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 4500px; height: 10000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-ref.html b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-ref.html
new file mode 100644
index 0000000000..9568836459
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<body onload="scrollTo(450,10000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in.html b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in.html
new file mode 100644
index 0000000000..c9cb6e80a7
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-in.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="2.0"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<body onload="scrollTo(225,5000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 4500px; height: 10000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-async-scroll.html b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-async-scroll.html
new file mode 100644
index 0000000000..465fac6211
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-async-scroll.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="0.5"
+ reftest-async-scroll
+ reftest-async-scroll-x="899" reftest-async-scroll-y="19999"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<!-- Doing scrollTo(1,1) is to activate the left/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="scrollTo(1,1); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 18000px; height: 40000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-ref.html b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-ref.html
new file mode 100644
index 0000000000..9568836459
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait"><head>
+<meta name="viewport" content="initial-scale=1,width=device-width">
+</head>
+<body onload="scrollTo(450,10000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 9000px; height: 20000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out.html b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out.html
new file mode 100644
index 0000000000..0e3ec7173d
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbar-zoomed-out.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="0.5"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<body onload="scrollTo(900,20000); document.documentElement.classList.remove('reftest-wait')">
+<div style="width: 18000px; height: 40000px; background: white;"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbars-1-ref.html b/gfx/layers/apz/test/reftest/root-scrollbars-1-ref.html
new file mode 100644
index 0000000000..435609f8a3
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbars-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html><head>
+<meta name="viewport" content="width=device-width">
+<style>
+html, body {
+ margin: 0;
+}
+</style>
+<title>In this file the scrollbars that appear are non-root scrollbars</title>
+</head>
+<body>
+<div style="width: 100vw; height: 100vh; overflow: auto"><div style="width: 150vw; height: 150vh"></div></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/root-scrollbars-1.html b/gfx/layers/apz/test/reftest/root-scrollbars-1.html
new file mode 100644
index 0000000000..e2560d48a9
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/root-scrollbars-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html><head>
+<meta name="viewport" content="width=device-width">
+<style>
+html, body {
+ margin: 0;
+}
+</style>
+<title>In this file the scrollbars that appear are the root scrollbars</title>
+</head>
+<body>
+<div style="width: 150vw; height: 150vh"></div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/scaled-iframe-zoomed-ref.html b/gfx/layers/apz/test/reftest/scaled-iframe-zoomed-ref.html
new file mode 100644
index 0000000000..39847320e2
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/scaled-iframe-zoomed-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html reftest-resolution="1.5">
+<style>
+div {
+ margin-left: 100px;
+ margin-top: 100px;
+ width: 200px;
+ height: 200px;
+ border: 10px blue solid;
+ transform: scale(2);
+}
+iframe {
+ width: 150px;
+ height: 150px;
+ border: 10px black solid;
+}
+</style>
+<div>
+<iframe src="iframe-zoomed-child.html"></iframe>
+</div>
+</html>
diff --git a/gfx/layers/apz/test/reftest/scaled-iframe-zoomed.html b/gfx/layers/apz/test/reftest/scaled-iframe-zoomed.html
new file mode 100644
index 0000000000..89b09047f7
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/scaled-iframe-zoomed.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html reftest-resolution="1.5">
+<style>
+div {
+ margin-left: 100px;
+ margin-top: 100px;
+ width: 200px;
+ height: 200px;
+ border: 10px blue solid;
+ transform: scale(2);
+}
+iframe {
+ width: 150px;
+ height: 150px;
+ border: 10px black solid;
+}
+</style>
+<div>
+<!--
+ this data:text/html is generated from single-lined version of
+ iframe-zoomed-child.html by encodeURIComponent().
+ -->
+<iframe src="data:text/html,%3Cstyle%3Ediv%20%7Bposition%3A%20absolute%3Bbackground-color%3A%20green%3Bwidth%3A%2010px%3Bheight%3A%2010px%3B%7D%3C%2Fstyle%3E%3Cdiv%20style%3D%22top%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22top%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E">
+</iframe>
+</div>
+</html>
diff --git a/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll-ref.html b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll-ref.html
new file mode 100644
index 0000000000..f2d640bc2e
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="2.0"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<body onload="subframe.scrollTo(225,5000); document.documentElement.classList.remove('reftest-wait')">
+<div id="subframe" style="width: 200px; height: 200px; overflow: scroll;">
+ <div style="width: 4500px; height: 10000px; background: white;"></div>
+</div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll.html b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll.html
new file mode 100644
index 0000000000..2aa2a2627c
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-in-async-scroll.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="2.0" reftest-async-scroll><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<!-- Doing scrollTo(1,1) is to activate the left/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="subframe.scrollTo(1,1); document.documentElement.classList.remove('reftest-wait')">
+<div id="subframe" style="width: 200px; height: 200px; overflow: scroll;"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="1600" reftest-displayport-h="2000"
+ reftest-async-scroll-x="224" reftest-async-scroll-y="4999">
+ <div style="width: 4500px; height: 10000px; background: white;"></div>
+</div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll-ref.html b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll-ref.html
new file mode 100644
index 0000000000..4283952f78
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="0.5"><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<body onload="subframe.scrollTo(90,2000); document.documentElement.classList.remove('reftest-wait')">
+<div id="subframe" style="width: 200px; height: 200px; overflow: scroll;">
+ <div style="width: 1800px; height: 4000px; background: white;"></div>
+</div>
+</body>
+</html>
diff --git a/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll.html b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll.html
new file mode 100644
index 0000000000..a0f1e08cf9
--- /dev/null
+++ b/gfx/layers/apz/test/reftest/subframe-scrollbar-zoomed-out-async-scroll.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html class="reftest-wait" reftest-resolution="0.5" reftest-async-scroll><head>
+<meta name="viewport" content="width=device-width">
+</head>
+<!-- Doing scrollTo(1,1) is to activate the left/up arrows in the scrollbars
+ for non-overlay scrollbar environments -->
+<body onload="subframe.scrollTo(1,1); document.documentElement.classList.remove('reftest-wait')">
+<div id="subframe" style="width: 200px; height: 200px; overflow: scroll;"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="1600" reftest-displayport-h="2000"
+ reftest-async-scroll-x="89" reftest-async-scroll-y="1999">
+ <div style="width: 1800px; height: 4000px; background: white;"></div>
+</div>
+</body>
+</html>