summaryrefslogtreecommitdiffstats
path: root/layout/reftests/layers
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/layers
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/layers')
-rw-r--r--layout/reftests/layers/component-alpha-enter-1-ref.html33
-rw-r--r--layout/reftests/layers/component-alpha-enter-1.html56
-rw-r--r--layout/reftests/layers/component-alpha-exit-1-ref.html30
-rw-r--r--layout/reftests/layers/component-alpha-exit-1.html36
-rw-r--r--layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html62
-rw-r--r--layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html67
-rw-r--r--layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html68
-rw-r--r--layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html39
-rw-r--r--layout/reftests/layers/forced-bg-color-outside-visible-region.html105
-rw-r--r--layout/reftests/layers/layerize-over-fixed-bg-1.html40
-rw-r--r--layout/reftests/layers/mask-layer-transform-ref.html8
-rw-r--r--layout/reftests/layers/mask-layer-transform.html10
-rw-r--r--layout/reftests/layers/move-to-background-1-ref.html19
-rw-r--r--layout/reftests/layers/move-to-background-1.html19
-rw-r--r--layout/reftests/layers/opacity-background-1-ref.html55
-rw-r--r--layout/reftests/layers/opacity-background-1.html55
-rw-r--r--layout/reftests/layers/opacity-blending-ref.html26
-rw-r--r--layout/reftests/layers/opacity-blending.html28
-rw-r--r--layout/reftests/layers/opacity-flattening-large-image-ref.html27
-rw-r--r--layout/reftests/layers/opacity-flattening-large-image.html43
-rw-r--r--layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html37
-rw-r--r--layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html47
-rw-r--r--layout/reftests/layers/pull-background-1.html82
-rw-r--r--layout/reftests/layers/pull-background-2.html88
-rw-r--r--layout/reftests/layers/pull-background-3.html101
-rw-r--r--layout/reftests/layers/pull-background-4.html107
-rw-r--r--layout/reftests/layers/pull-background-5.html92
-rw-r--r--layout/reftests/layers/pull-background-6.html86
-rw-r--r--layout/reftests/layers/pull-background-animated-position-1.html105
-rw-r--r--layout/reftests/layers/pull-background-animated-position-2.html120
-rw-r--r--layout/reftests/layers/pull-background-animated-position-3.html105
-rw-r--r--layout/reftests/layers/pull-background-animated-position-4.html94
-rw-r--r--layout/reftests/layers/pull-background-animated-position-5.html105
-rw-r--r--layout/reftests/layers/pull-background-displayport-1.html84
-rw-r--r--layout/reftests/layers/pull-background-displayport-2.html90
-rw-r--r--layout/reftests/layers/pull-background-displayport-3.html104
-rw-r--r--layout/reftests/layers/pull-background-displayport-4.html110
-rw-r--r--layout/reftests/layers/pull-background-displayport-5.html94
-rw-r--r--layout/reftests/layers/pull-background-displayport-6.html84
-rw-r--r--layout/reftests/layers/reftest.list45
40 files changed, 2606 insertions, 0 deletions
diff --git a/layout/reftests/layers/component-alpha-enter-1-ref.html b/layout/reftests/layers/component-alpha-enter-1-ref.html
new file mode 100644
index 0000000000..c7b38b4f49
--- /dev/null
+++ b/layout/reftests/layers/component-alpha-enter-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Test transition from single-alpha layer to component-alpha layer from a display port size change</title>
+<script type="text/javascript">
+ document.addEventListener('MozReftestInvalidate', function() {
+ var scrollbox = document.getElementById('scrollbox');
+ scrollbox.scrollTop = 1000;
+ document.documentElement.className = '';
+ });
+</script>
+<style>
+#scrollbox {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow-y: scroll;
+ background: linear-gradient(#FFF, #FFF);
+}
+
+#inner {
+ background-color: #000;
+ margin-top: 10px;
+ height: 5px;
+ line-height: 5px;
+ padding-bottom: 400px;
+}
+</style>
+
+<div id="scrollbox">
+ <div id="inner">
+ Text
+ </div>
+</div>
diff --git a/layout/reftests/layers/component-alpha-enter-1.html b/layout/reftests/layers/component-alpha-enter-1.html
new file mode 100644
index 0000000000..b5a945b523
--- /dev/null
+++ b/layout/reftests/layers/component-alpha-enter-1.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Test transition from single-alpha layer to component-alpha layer from a display port size change</title>
+<script type="text/javascript">
+ document.addEventListener('MozReftestInvalidate', function() {
+ var scrollbox = document.getElementById('scrollbox');
+ scrollbox.scrollTop = 1000;
+
+ window.addEventListener("MozAfterPaint", function() {
+ // Remove dummy to make scrollbox the first scroll element giving it a
+ // display port. The display port will then contain the text forcing the
+ // layer to transition to component alpha.
+ document.getElementById('dummy').remove();
+ document.documentElement.className = '';
+ }, {once: true});
+ });
+</script>
+<style>
+#dummy {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow: scroll;
+}
+
+#filler {
+ height: 600px;
+}
+
+#scrollbox {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow-y: scroll;
+ background: linear-gradient(#FFF, #FFF);
+}
+
+#inner {
+ background-color: #000;
+ margin-top: 10px;
+ height: 5px;
+ line-height: 5px;
+ padding-bottom: 400px;
+}
+</style>
+
+<div id="dummy">
+ <div id="filler">
+ </div>
+</div>
+
+<div id="scrollbox">
+ <div id="inner">
+ Text
+ </div>
+</div>
diff --git a/layout/reftests/layers/component-alpha-exit-1-ref.html b/layout/reftests/layers/component-alpha-exit-1-ref.html
new file mode 100644
index 0000000000..164467e7e7
--- /dev/null
+++ b/layout/reftests/layers/component-alpha-exit-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Reference for test transition from component-alpha layer to single-alpha layer</title>
+<script type="text/javascript">
+document.addEventListener("MozReftestInvalidate", function scrollDownAllTheWay () {
+ var scrollbox = document.getElementById("scrollbox");
+ scrollbox.scrollTop = 1000;
+ document.documentElement.className = "";
+});
+</script>
+<style>
+#scrollbox {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow-y: hidden;
+ background: linear-gradient(#FFF, #FFF);
+}
+
+#inner {
+ background-color: #000;
+ padding-bottom: 415px;
+}
+</style>
+
+<div id="scrollbox">
+ <div id="inner">
+
+ </div>
+</div>
diff --git a/layout/reftests/layers/component-alpha-exit-1.html b/layout/reftests/layers/component-alpha-exit-1.html
new file mode 100644
index 0000000000..2e7902ab6d
--- /dev/null
+++ b/layout/reftests/layers/component-alpha-exit-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Test transition from component-alpha layer to single-alpha layer</title>
+<script type="text/javascript">
+document.addEventListener("MozReftestInvalidate", function scrollOnePixelDown () {
+ var scrollbox = document.getElementById("scrollbox");
+ window.addEventListener("MozAfterPaint", function() {
+ scrollbox.scrollTop = 1000;
+ document.documentElement.className = "";
+ }, {once: true});
+ scrollbox.scrollTop = 1; // activate scroll layer
+});
+</script>
+<style>
+#scrollbox {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow-y: hidden;
+ background: linear-gradient(#FFF, #FFF);
+}
+
+#inner {
+ background-color: #000;
+ margin-top: 10px;
+ height: 5px;
+ line-height: 5px;
+ padding-bottom: 400px;
+}
+</style>
+
+<div id="scrollbox">
+ <div id="inner">
+ Text
+ </div>
+</div>
diff --git a/layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html b/layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html
new file mode 100644
index 0000000000..806377335a
--- /dev/null
+++ b/layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="800" reftest-displayport-h="2000"
+ reftest-async-scroll-x="0" reftest-async-scroll-y="200">
+
+<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.blueBox {
+ margin: 10px;
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ border: 1px solid blue;
+}
+
+.absoluteClip {
+ position: absolute;
+ top: 300px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ background: red;
+ clip: rect(auto auto auto auto);
+}
+
+.fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(lime 300px, black 0);
+}
+
+.absoluteCyanBox {
+ position: absolute;
+ top: 200px;
+ left: 400px;
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ border: 1px solid cyan;
+}
+
+
+</style>
+
+<div class="blueBox" reftest-assigned-layer="page-background"></div>
+
+<div class="absoluteClip">
+ <div class="fixed"></div>
+</div>
+
+<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>
diff --git a/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html
new file mode 100644
index 0000000000..a3a1e67651
--- /dev/null
+++ b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="800" reftest-displayport-h="2000"
+ reftest-async-scroll-x="0" reftest-async-scroll-y="200">
+
+<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.blueBox {
+ margin: 10px;
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ border: 1px solid blue;
+}
+
+.opacity {
+ opacity: 0.8;
+}
+
+.absoluteClip {
+ position: absolute;
+ top: 300px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ clip: rect(auto auto auto auto);
+}
+
+.fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(lime 300px, black 0);
+}
+
+.absoluteCyanBox {
+ position: absolute;
+ top: 200px;
+ left: 400px;
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ border: 1px solid cyan;
+}
+
+
+</style>
+
+<div class="blueBox" reftest-assigned-layer="page-background"></div>
+
+<div class="absoluteClip">
+ <div class="opacity">
+ <div class="fixed"></div>
+ </div>
+</div>
+
+<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>
diff --git a/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html
new file mode 100644
index 0000000000..2f302da25d
--- /dev/null
+++ b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="800" reftest-displayport-h="2000"
+ reftest-async-scroll-x="0" reftest-async-scroll-y="200">
+
+<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.blueBox {
+ margin: 10px;
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ border: 1px solid blue;
+}
+
+.opacity {
+ opacity: 0.8;
+}
+
+.absoluteClip {
+ position: absolute;
+ top: 300px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ background: red;
+ clip: rect(auto auto auto auto);
+}
+
+.fixed {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(lime 300px, black 0);
+}
+
+.absoluteCyanBox {
+ position: absolute;
+ top: 200px;
+ left: 400px;
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ border: 1px solid cyan;
+}
+
+
+</style>
+
+<div class="blueBox" reftest-assigned-layer="page-background"></div>
+
+<div class="opacity">
+ <div class="absoluteClip">
+ <div class="fixed"></div>
+ </div>
+</div>
+
+<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div>
diff --git a/layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html b/layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html
new file mode 100644
index 0000000000..8a5c68ac5e
--- /dev/null
+++ b/layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Bug 1266161 - Reference</title>
+
+<style type="text/css">
+
+html, body {
+ margin: 0;
+}
+
+#scrollbox {
+ overflow: auto;
+ height: 500px;
+ width: 500px;
+}
+
+#scrolled {
+ height: 1201px;
+}
+
+</style>
+
+<div id="wrapper">
+
+ <div id="scrollbox">
+
+ <div id="scrolled">
+ </div>
+
+ </div>
+
+</div>
+
+<script>
+
+var scrollbox = document.getElementById("scrollbox");
+scrollbox.scrollTop = 80;
+
+</script>
diff --git a/layout/reftests/layers/forced-bg-color-outside-visible-region.html b/layout/reftests/layers/forced-bg-color-outside-visible-region.html
new file mode 100644
index 0000000000..fe7d75a272
--- /dev/null
+++ b/layout/reftests/layers/forced-bg-color-outside-visible-region.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Bug 1266161 - Black boxes during scrolling</title>
+
+<style type="text/css">
+
+html, body {
+ margin: 0;
+ height: 100%;
+}
+
+body {
+ outline: 2px solid white;
+}
+
+#scrollbox {
+ overflow: auto;
+ will-change: transform, scroll-position;
+ height: 500px;
+ width: 500px;
+}
+
+#scrolled {
+ padding-top: 1px;
+ height: 1200px;
+}
+
+p {
+ height: 20px;
+ background: white;
+ margin-top: 16px;
+}
+
+span, em {
+ display: block;
+ background: white;
+ width: 134px;
+ height: 14px;
+ margin-top: 32px;
+}
+
+em {
+ width: 10px;
+}
+
+</style>
+
+<div id="scrollbox"
+ reftest-displayport-x="0"
+ reftest-displayport-y="0"
+ reftest-displayport-w="500"
+ reftest-displayport-h="500">
+
+ <div id="scrolled">
+ <p></p>
+ <p></p>
+ <p></p>
+ <span style="margin-top: 48px"></span>
+ <span style="margin-top: 64px"></span>
+ <span style="margin-top: 96px"></span>
+ <span style="margin-top: 96px"></span>
+ <em></em>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ <span></span>
+ </div>
+
+</div>
+
+<script>
+
+var scrollbox = document.getElementById("scrollbox");
+
+var pos = [ 170, 100, 248, 182, 130, 80 ];
+
+var i = 0;
+function scrollToNextPos() {
+ scrollbox.scrollTop = pos[i++];
+}
+
+scrollToNextPos();
+
+window.addEventListener("MozReftestInvalidate", function () {
+ requestAnimationFrame(function scrollAndScheduleNext() {
+ scrollToNextPos();
+ if (i < pos.length) {
+ requestAnimationFrame(scrollAndScheduleNext);
+ } else {
+ document.documentElement.className = "";
+ }
+ });
+});
+
+</script>
diff --git a/layout/reftests/layers/layerize-over-fixed-bg-1.html b/layout/reftests/layers/layerize-over-fixed-bg-1.html
new file mode 100644
index 0000000000..26e677e0a0
--- /dev/null
+++ b/layout/reftests/layers/layerize-over-fixed-bg-1.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>The fixed background should not cause .inner to move to a different layer than .outer</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 3000px;
+}
+
+.outer {
+ border: 1px solid black;
+ margin: 10px;
+}
+
+.outer > div {
+ margin: 10px;
+}
+
+.fixed-bg {
+ height: 100px;
+ background-image: linear-gradient(lime, lime);
+ background-attachment: fixed;
+}
+
+.inner {
+ border: 1px solid blue;
+ padding: 20px;
+}
+
+</style>
+
+<div class="outer" reftest-assigned-layer="page-background">
+ <!-- .inner and .fixed-bg do not overlap, so .inner should be merged into
+ the same layer as .outer. -->
+ <div class="fixed-bg"></div>
+ <div class="inner" reftest-assigned-layer="page-background"></div>
+</div>
diff --git a/layout/reftests/layers/mask-layer-transform-ref.html b/layout/reftests/layers/mask-layer-transform-ref.html
new file mode 100644
index 0000000000..54cd38607f
--- /dev/null
+++ b/layout/reftests/layers/mask-layer-transform-ref.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+ <div style="position:relative; left: 400px; width: 200px; height: 200px; overflow:hidden; border-radius: 20px;">
+ <div style="width:200px; height:200px; background-color:red; transform: perspective(100px) rotateY(10deg)"></div>
+ </div>
+</body>
+</html>
+
diff --git a/layout/reftests/layers/mask-layer-transform.html b/layout/reftests/layers/mask-layer-transform.html
new file mode 100644
index 0000000000..0a809c50bd
--- /dev/null
+++ b/layout/reftests/layers/mask-layer-transform.html
@@ -0,0 +1,10 @@
+<html>
+<body>
+ <div style="width:200px; height: 200px; transform: translate(400px);">
+ <div style="width: 200px; height: 200px; overflow:hidden; border-radius: 20px;">
+ <div style="width:200px; height:200px; background-color:red; transform: perspective(100px) rotateY(10deg)"></div>
+ </div>
+ </div>
+</body>
+</html>
+
diff --git a/layout/reftests/layers/move-to-background-1-ref.html b/layout/reftests/layers/move-to-background-1-ref.html
new file mode 100644
index 0000000000..c5ac7391d8
--- /dev/null
+++ b/layout/reftests/layers/move-to-background-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ overflow:hidden;
+ width:200px;
+ height:80px;
+ position:absolute;
+ left:10px;
+}
+</style>
+</head>
+<body>
+ <div style="top:0px; z-index:0">Hello</div>
+ <div style="top:200px; z-index:1">Hello</div>
+ <div style="opacity:0.5; top:100px; z-index:2">Hello</div>
+</body>
+</html>
diff --git a/layout/reftests/layers/move-to-background-1.html b/layout/reftests/layers/move-to-background-1.html
new file mode 100644
index 0000000000..18ca9c8cee
--- /dev/null
+++ b/layout/reftests/layers/move-to-background-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div {
+ overflow:hidden;
+ width:200px;
+ height:80px;
+ position:absolute;
+ left:10px;
+}
+</style>
+</head>
+<body>
+ <div style="top:0px; z-index:0">Hello</div>
+ <div style="opacity:0.5; top:100px; z-index:1">Hello</div>
+ <div style="top:200px; z-index:2">Hello</div>
+</body>
+</html>
diff --git a/layout/reftests/layers/opacity-background-1-ref.html b/layout/reftests/layers/opacity-background-1-ref.html
new file mode 100644
index 0000000000..c80ed88866
--- /dev/null
+++ b/layout/reftests/layers/opacity-background-1-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+
+<style>
+.main {
+ top: 0px;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ position: absolute;
+ background-color: red;
+}
+
+.background {
+ background-color: white;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ width: 100%;
+ opacity: 0.9;
+}
+
+.container {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ width: 100%;
+ overflow: scroll;
+}
+
+.message {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 101%;
+ height: 101%;
+}
+</style>
+</head>
+
+<body>
+<div class="main">
+ <div class="background"></div>
+ <div class="container">
+ <div class="message">foo</div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/layers/opacity-background-1.html b/layout/reftests/layers/opacity-background-1.html
new file mode 100644
index 0000000000..5a942ccaab
--- /dev/null
+++ b/layout/reftests/layers/opacity-background-1.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+
+<style>
+.main {
+ top: 0px;
+ left: 0px;
+ width: 100px;
+ height: 100px;
+ position: absolute;
+ background-color: red;
+}
+
+.background {
+ background: linear-gradient(#ffffff, #ffffff);
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ width: 100%;
+ opacity: 0.9;
+}
+
+.container {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ width: 100%;
+ overflow: scroll;
+}
+
+.message {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 101%;
+ height: 101%;
+}
+</style>
+</head>
+
+<body>
+<div class="main">
+ <div class="background"></div>
+ <div class="container">
+ <div class="message">foo</div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/layers/opacity-blending-ref.html b/layout/reftests/layers/opacity-blending-ref.html
new file mode 100644
index 0000000000..533ecef701
--- /dev/null
+++ b/layout/reftests/layers/opacity-blending-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Compositor opacity blending should work correctly (and the same as canvas)</title>
+<html class="reftest-wait">
+<head>
+<script>
+ function load() {
+ var one = document.getElementById("one").getContext("2d");
+
+ one.fillStyle = "rgba(255,0,0,0.5)";
+ one.fillRect(0, 0, 200, 200);
+ one.fillStyle = "rgba(0,255,0,0.5)";
+ one.fillRect(0, 0, 200, 200);
+
+ document.documentElement.removeAttribute("class");
+ }
+</script>
+</head>
+<body onload="load()">
+
+<div style="opacity:0.8">
+ <canvas id="one" style="position:absolute; left:0px;"></canvas>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/layers/opacity-blending.html b/layout/reftests/layers/opacity-blending.html
new file mode 100644
index 0000000000..2b9731f0c0
--- /dev/null
+++ b/layout/reftests/layers/opacity-blending.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Compositor opacity blending should work correctly (and the same as canvas)</title>
+<html class="reftest-wait">
+<head>
+<script>
+ function load() {
+ var one = document.getElementById("one").getContext("2d");
+ var two = document.getElementById("two").getContext("2d");
+
+ one.fillStyle = "rgba(255,0,0,0.5)";
+ one.fillRect(0, 0, 200, 200);
+ two.fillStyle = "rgba(0,255,0,0.5)";
+ two.fillRect(0, 0, 200, 200);
+
+ document.documentElement.removeAttribute("class");
+ }
+</script>
+</head>
+<body onload="load()">
+
+<div style="opacity:0.8">
+ <canvas id="one" style="position:absolute; left:0px;"></canvas>
+ <canvas id="two" style="position:absolute; left:0px;"></canvas>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/layers/opacity-flattening-large-image-ref.html b/layout/reftests/layers/opacity-flattening-large-image-ref.html
new file mode 100644
index 0000000000..47c398086c
--- /dev/null
+++ b/layout/reftests/layers/opacity-flattening-large-image-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Reference: Opacity Flattening for Large Images</title>
+<style>
+div {
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ opacity: 0.25;
+}
+
+.blackcolor {
+ background: black;
+}
+</style>
+</head>
+
+<body>
+<div class="blackcolor"></div>
+<div class="blackcolor"></div>
+<div class="blackcolor"></div>
+<div class="blackcolor"></div>
+<div class="blackcolor"></div>
+</body>
+</html>
diff --git a/layout/reftests/layers/opacity-flattening-large-image.html b/layout/reftests/layers/opacity-flattening-large-image.html
new file mode 100644
index 0000000000..299abb56ba
--- /dev/null
+++ b/layout/reftests/layers/opacity-flattening-large-image.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Opacity Flattening for Large Images</title>
+<style>
+div {
+ display: inline-block;
+ height: 40px;
+ width: 40px;
+ opacity: 0.25;
+}
+
+.png40x40 {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoAQMAAAC2MCouAAAAA1BMVEUAAACnej3aAAAADElEQVQI12NgGFkAAADwAAHXt5aiAAAAAElFTkSuQmCC) no-repeat;
+}
+
+.png40x4096 {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAABAAAQMAAAA6ETG7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QceCDgMmIF9RQAAAANQTFRFAAAAp3o92gAAAC5JREFUGBntwTEBAAAAwiD7p14IX2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAtYAAAAfQusroAAAAASUVORK5CYII=) no-repeat;
+}
+
+.png40x4097 {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAABABAQMAAADxTeIeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QceCDgchTZtIQAAAANQTFRFAAAAp3o92gAAAC5JREFUGBntwTEBAAAAwiD7p14JT2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJYAYAAYO1lz8AAAAASUVORK5CYII=) no-repeat;
+}
+
+.png4096x40 {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAAAAAAoAQMAAABETK3BAAAAA1BMVEUAAACnej3aAAAAK0lEQVR42u3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAACAFwNQKAAB/x49MAAAAABJRU5ErkJggg==) no-repeat;
+}
+
+.png4097x40 {
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAEAAAAoAQMAAACrjsb/AAAAA1BMVEUAAACnej3aAAAAK0lEQVR42u3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAACANwNQUAABp9gL6AAAAABJRU5ErkJggg==) no-repeat;
+}
+</style>
+</head>
+
+<body>
+<div class="png40x40"></div>
+<div class="png40x4096"></div>
+<div class="png40x4097"></div>
+<div class="png4096x40"></div>
+<div class="png4097x40"></div>
+</body>
+</html>
diff --git a/layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html
new file mode 100644
index 0000000000..6c5d2ad084
--- /dev/null
+++ b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
+<title>Clicking the canvas should turn it green (and shift it slighly)</title>
+
+<style>
+
+canvas {
+ border: 10px solid black;
+}
+
+.opacity {
+ opacity: 0.8;
+}
+
+</style>
+
+</head><body><div style="transform: translateX(1px)">
+ <div class="wrapper" style="transform: translateX(1px);">
+ <div class="opacity">
+ <div class="border">
+ <canvas id="canvas" width="200" height="200"></canvas>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+
+var canvas = document.getElementById('canvas');
+canvas.width = 200;
+canvas.height = 200;
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'lime';
+ctx.fillRect(0, 0, 200, 200);
+</script>
+</body></html>
diff --git a/layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html
new file mode 100644
index 0000000000..03e2e92769
--- /dev/null
+++ b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
+<title>Clicking the canvas should turn it green (and shift it slighly)</title>
+
+<style>
+
+canvas {
+ border: 10px solid black;
+}
+
+.opacity {
+ opacity: 0.8;
+}
+
+</style>
+
+</head><body><div style="transform: translateX(1px)"><!-- create reference frame -->
+ <div class="wrapper"><!-- this starts out without a transform but later gets transformed -->
+ <div class="opacity"><!-- this creates a ContainerLayer with an intermediate surface for group opacity -->
+ <div class="border"><!-- this adds another visual element into the group opacity -->
+ <canvas id="canvas" width="200" height="200"></canvas><!-- this causes all ancestor effects to become active ContainerLayers -->
+ </div>
+ </div>
+ </div>
+</div>
+
+<script>
+
+var canvas = document.getElementById('canvas');
+var wrapper = document.querySelector('.wrapper');
+canvas.width = 200;
+canvas.height = 200;
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'red';
+ctx.fillRect(0, 0, 200, 200);
+
+function doTest() {
+ ctx.fillStyle = 'lime';
+ ctx.fillRect(0, 0, 200, 200);
+ wrapper.style.transform = 'translateX(1px)';
+ document.documentElement.removeAttribute("class");
+}
+document.addEventListener("MozReftestInvalidate", doTest);
+
+</script>
+</body></html>
diff --git a/layout/reftests/layers/pull-background-1.html b/layout/reftests/layers/pull-background-1.html
new file mode 100644
index 0000000000..09e2f27c9f
--- /dev/null
+++ b/layout/reftests/layers/pull-background-1.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="scrollable border">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-2.html b/layout/reftests/layers/pull-background-2.html
new file mode 100644
index 0000000000..75b625eb32
--- /dev/null
+++ b/layout/reftests/layers/pull-background-2.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even through an opacity container layer</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: 150px;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+.opacity {
+ opacity: 0.9;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="opacity border">
+ <div class="opacity scrollable">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-3.html b/layout/reftests/layers/pull-background-3.html
new file mode 100644
index 0000000000..00ab846b2a
--- /dev/null
+++ b/layout/reftests/layers/pull-background-3.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.underlap {
+ border: 1px solid #088;
+ margin-left: 120px;
+ width: 80px;
+ margin-bottom: -30px;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="underlap">
+ <!--
+ This item intersects with the scrollable box and is positioned below
+ .scrollable, in z-order.
+ -->
+</div>
+
+<div class="scrollable border">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-no-paint">
+ <!--
+ This box starts out above solid white background, but it will move so
+ that it intersects .underlap, so it shouldn't pull up a background
+ color to begin with so that it doesn't need to invalidate.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+function doTest() {
+ scrollable.scrollLeft = 100;
+ document.documentElement.removeAttribute("class");
+}
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 10;
+document.addEventListener("MozReftestInvalidate", doTest);
+
+</script>
diff --git a/layout/reftests/layers/pull-background-4.html b/layout/reftests/layers/pull-background-4.html
new file mode 100644
index 0000000000..6b2ff200fd
--- /dev/null
+++ b/layout/reftests/layers/pull-background-4.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title>
+<!--
+ This is the same test as pull-background-3.html, but with an additional
+ wrapping opacity container layer.
+-->
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.underlap {
+ border: 1px solid #088;
+ margin-left: 120px;
+ width: 80px;
+ margin-bottom: -30px;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="underlap">
+ <!--
+ This item intersects with the scrollable box and is positioned below
+ .scrollable, in z-order.
+ -->
+</div>
+
+<div class="opacity border">
+ <div class="opacity scrollable">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-no-paint">
+ <!--
+ This box starts out above solid white background, but it will move so
+ that it intersects .underlap, so it shouldn't pull up a background
+ color to begin with so that it doesn't need to invalidate.
+ -->
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+function doTest() {
+ scrollable.scrollLeft = 100;
+ document.documentElement.removeAttribute("class");
+}
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 10;
+document.addEventListener("MozReftestInvalidate", doTest);
+
+</script>
diff --git a/layout/reftests/layers/pull-background-5.html b/layout/reftests/layers/pull-background-5.html
new file mode 100644
index 0000000000..b91f81a7b7
--- /dev/null
+++ b/layout/reftests/layers/pull-background-5.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title>
+<!--
+ Very similar to pull-background-2.html, but with a .scrolled element that is
+ wider than the scrollbox.
+-->
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: 150px;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 2000px;
+ height: 100px;
+ border-color: red;
+}
+
+.opacity {
+ opacity: 0.9;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="opacity border">
+ <div class="scrollable">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-6.html b/layout/reftests/layers/pull-background-6.html
new file mode 100644
index 0000000000..49e919db58
--- /dev/null
+++ b/layout/reftests/layers/pull-background-6.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title>
+<!--
+ Very similar to pull-background-1.html, but with a .scrolled element that is
+ wider than the scrollbox.
+-->
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 2000px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="scrollable border">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-animated-position-1.html b/layout/reftests/layers/pull-background-animated-position-1.html
new file mode 100644
index 0000000000..e627f2b6bb
--- /dev/null
+++ b/layout/reftests/layers/pull-background-animated-position-1.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if those contents have an animated position</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+ position: relative;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+.animated-position {
+ position: relative;
+ left: 20px;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="scrollable border">
+ <div class="scrollarea">
+ <div class="scrolled border animated-position reftest-no-paint reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+
+var animatedLeft = document.querySelector(".animated-position");
+
+function doTest() {
+ animatedLeft.style.left = "100px";
+ document.documentElement.removeAttribute("class");
+}
+
+// Layerize #animatedLeft
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "40px";
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "60px";
+animatedLeft.offsetLeft;
+
+document.addEventListener("MozReftestInvalidate", doTest);
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-animated-position-2.html b/layout/reftests/layers/pull-background-animated-position-2.html
new file mode 100644
index 0000000000..3065593132
--- /dev/null
+++ b/layout/reftests/layers/pull-background-animated-position-2.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds and have an animated position</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+ position: relative;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.underlap {
+ border: 1px solid #088;
+ margin-left: 120px;
+ width: 80px;
+ margin-bottom: -30px;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+.animated-position {
+ position: relative;
+ left: 20px;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="underlap">
+ <!--
+ This item intersects with the scrollable box and is positioned below
+ .scrollable, in z-order.
+ -->
+</div>
+
+<div class="scrollable border">
+ <div class="scrollarea">
+ <div class="scrolled border animated-position reftest-no-paint">
+ <!--
+ This box starts out above solid white background, but it will move so
+ that it intersects .underlap, so it shouldn't pull up a background
+ color to begin with so that it doesn't need to invalidate.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+
+var animatedLeft = document.querySelector(".animated-position");
+
+function doTest() {
+ animatedLeft.style.left = "-40px";
+ document.documentElement.removeAttribute("class");
+}
+
+// Layerize #animatedLeft
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "40px";
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "60px";
+animatedLeft.offsetLeft;
+
+document.addEventListener("MozReftestInvalidate", doTest);
+setTimeout(doTest, 200);
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-animated-position-3.html b/layout/reftests/layers/pull-background-animated-position-3.html
new file mode 100644
index 0000000000..b791b20a51
--- /dev/null
+++ b/layout/reftests/layers/pull-background-animated-position-3.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>This test fails - Layerization should respect overflow:hidden clips around things with animated position</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+ position: relative;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.underlap {
+ border: 1px solid #088;
+ margin-left: 120px;
+ width: 80px;
+ margin-bottom: -30px;
+}
+
+.clip {
+ height: auto;
+ overflow: hidden;
+ padding: 10px 0 20px;
+}
+
+.animated-position {
+ position: relative;
+ left: 20px;
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="underlap">
+ <!--
+ This item intersects with the scrollable box and is positioned below
+ .scrollable, in z-order.
+ -->
+</div>
+
+<div class="clip border">
+ <div class="border animated-position reftest-no-paint">
+ <!--
+ This box starts out above solid white background, but it will move so
+ that it intersects .underlap, so it shouldn't pull up a background
+ color to begin with so that it doesn't need to invalidate.
+ -->
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ However, we don't take .animated-position's clip into account when
+ layerizing, so .second will be pulled up into its own layer above
+ .animated-position. So this test will fail.
+ -->
+</div>
+
+<script>
+
+var animatedLeft = document.querySelector(".animated-position");
+
+function doTest() {
+ animatedLeft.style.left = "-40px";
+ document.documentElement.removeAttribute("class");
+}
+
+// Layerize #animatedLeft
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "40px";
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "60px";
+animatedLeft.offsetLeft;
+
+document.addEventListener("MozReftestInvalidate", doTest);
+setTimeout(doTest, 200);
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-animated-position-4.html b/layout/reftests/layers/pull-background-animated-position-4.html
new file mode 100644
index 0000000000..c92f2fd3ee
--- /dev/null
+++ b/layout/reftests/layers/pull-background-animated-position-4.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>This test fails - layerization should respect overflow:hidden clips around things with animated position</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+ position: relative;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.clip {
+ height: auto;
+ overflow: hidden;
+ padding: 10px 0 20px;
+}
+
+.animated-position {
+ position: relative;
+ left: 20px;
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="clip border">
+ <div class="border animated-position reftest-no-paint reftest-opaque-layer">
+ <!--
+ The background of .clip is uniform and opaque,
+ .animated-position should be able to pull up that background color and
+ become opaque itself.
+ However, since this clip is not created by an animated geometry root that
+ is a scrollable frame, we currently fail to recognize it, so this test
+ will fail.
+ -->
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ However, since we don't recognize that .animated-position is contained in
+ a clip, .second gets its own layer above .animated-position, so this test
+ will fail.
+ -->
+</div>
+
+<script>
+
+var animatedLeft = document.querySelector(".animated-position");
+
+function doTest() {
+ animatedLeft.style.left = "-40px";
+ document.documentElement.removeAttribute("class");
+}
+
+// Layerize #animatedLeft
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "40px";
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "60px";
+animatedLeft.offsetLeft;
+
+document.addEventListener("MozReftestInvalidate", doTest);
+setTimeout(doTest, 200);
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-animated-position-5.html b/layout/reftests/layers/pull-background-animated-position-5.html
new file mode 100644
index 0000000000..c213a1e32d
--- /dev/null
+++ b/layout/reftests/layers/pull-background-animated-position-5.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>This test fails - Opacity containers should anticipate animations of the contents when deciding whether to pull a background color</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+ position: relative;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.underlap {
+ border: 1px solid #088;
+ margin-left: 120px;
+ width: 80px;
+ margin-bottom: -30px;
+}
+
+.opacity {
+ opacity: 0.9;
+ height: auto;
+ padding: 10px 0 20px;
+}
+
+.animated-position {
+ position: relative;
+ left: 20px;
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="underlap">
+ <!--
+ This item intersects with the scrollable box and is positioned below
+ .scrollable, in z-order.
+ -->
+</div>
+
+<div class="border">
+ <div class="opacity">
+ <div class="border animated-position reftest-no-paint">
+ <!--
+ This item start out above solid white background but will move to
+ intersect .underlap, so it shouldn't pull up the background color.
+ However, the opacity item that wraps this item only looks at the
+ current bounds of its contents, so this test will fail.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var animatedLeft = document.querySelector(".animated-position");
+
+function doTest() {
+ animatedLeft.style.left = "-40px";
+ document.documentElement.removeAttribute("class");
+}
+
+// Layerize #animatedLeft
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "40px";
+animatedLeft.offsetLeft;
+animatedLeft.style.left = "60px";
+animatedLeft.offsetLeft;
+
+document.addEventListener("MozReftestInvalidate", doTest);
+setTimeout(doTest, 200);
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-displayport-1.html b/layout/reftests/layers/pull-background-displayport-1.html
new file mode 100644
index 0000000000..b3a5aa9f9c
--- /dev/null
+++ b/layout/reftests/layers/pull-background-displayport-1.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if their contents have a visible region that extends beyond the scrollbox clip</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="scrollable border"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="2000" reftest-displayport-h="200">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-displayport-2.html b/layout/reftests/layers/pull-background-displayport-2.html
new file mode 100644
index 0000000000..fb69775157
--- /dev/null
+++ b/layout/reftests/layers/pull-background-displayport-2.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if their contents have a visible region that extends beyond the scrollbox clip, even through an opacity container layer</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: 150px;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+.opacity {
+ opacity: 0.9;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="opacity border">
+ <div class="opacity scrollable"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="2000" reftest-displayport-h="200">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-displayport-3.html b/layout/reftests/layers/pull-background-displayport-3.html
new file mode 100644
index 0000000000..d375935df4
--- /dev/null
+++ b/layout/reftests/layers/pull-background-displayport-3.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.underlap {
+ border: 1px solid #088;
+ margin-left: 120px;
+ width: 80px;
+ margin-bottom: -30px;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="underlap">
+ <!--
+ This item intersects with the scrollable box and is positioned below
+ .scrolled, in z-order.
+ -->
+</div>
+
+<div class="scrollable border"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="2000" reftest-displayport-h="200">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-no-paint">
+ <!--
+ This box starts out above solid white background, but it will move so
+ that it intersects .underlap, so it shouldn't pull up a background
+ color to begin with so that it doesn't need to invalidate.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+function doTest() {
+ scrollable.scrollLeft = 100;
+ document.documentElement.removeAttribute("class");
+}
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 10;
+document.addEventListener("MozReftestInvalidate", doTest);
+// setTimeout(doTest, 500);
+
+</script>
diff --git a/layout/reftests/layers/pull-background-displayport-4.html b/layout/reftests/layers/pull-background-displayport-4.html
new file mode 100644
index 0000000000..884cfe0418
--- /dev/null
+++ b/layout/reftests/layers/pull-background-displayport-4.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title>
+<!--
+ This is the same test as pull-background-displayport-3.html, but with an additional
+ wrapping opacity container layer.
+-->
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.underlap {
+ border: 1px solid #088;
+ margin-left: 120px;
+ width: 80px;
+ margin-bottom: -30px;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 100px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="underlap">
+ <!--
+ This item intersects with the scrollable box and is positioned below
+ .scrolled, in z-order.
+ -->
+</div>
+
+<div class="opacity border">
+ <div class="opacity scrollable"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="2000" reftest-displayport-h="200">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-no-paint">
+ <!--
+ This box starts out above solid white background, but it will move so
+ that it intersects .underlap, so it shouldn't pull up a background
+ color to begin with so that it doesn't need to invalidate.
+ -->
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+function doTest() {
+ scrollable.scrollLeft = 100;
+ document.documentElement.removeAttribute("class");
+}
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 10;
+document.addEventListener("MozReftestInvalidate", doTest);
+// setTimeout(doTest, 500);
+
+</script>
diff --git a/layout/reftests/layers/pull-background-displayport-5.html b/layout/reftests/layers/pull-background-displayport-5.html
new file mode 100644
index 0000000000..6b865e7d64
--- /dev/null
+++ b/layout/reftests/layers/pull-background-displayport-5.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title>
+<!--
+ Very similar to pull-background-displayport-2.html, but with a .scrolled element that is
+ wider than the scrollbox.
+-->
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: 150px;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 2000px;
+ height: 100px;
+ border-color: red;
+}
+
+.opacity {
+ opacity: 0.9;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="opacity border">
+ <div class="scrollable"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="2000" reftest-displayport-h="200">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/pull-background-displayport-6.html b/layout/reftests/layers/pull-background-displayport-6.html
new file mode 100644
index 0000000000..27f66d6ac4
--- /dev/null
+++ b/layout/reftests/layers/pull-background-displayport-6.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en" reftest-async-scroll>
+<meta charset="utf-8">
+<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title>
+
+<style>
+
+div {
+ min-height: 50px;
+ box-model: border-box;
+}
+
+.first, .second {
+ border: 1px solid blue;
+ margin: 50px 0;
+}
+
+.border {
+ border: 1px solid black;
+}
+
+.scrollable {
+ height: auto;
+ overflow: auto;
+}
+
+.scrollarea {
+ width: 5000px;
+ border: none;
+ padding: 10px 0 20px;
+ height: auto;
+}
+
+.scrolled {
+ margin-left: 220px;
+ width: 2000px;
+ height: 100px;
+ border-color: red;
+}
+
+body {
+ margin: 0;
+ padding: 0 100px;
+ height: 3000px;
+}
+
+</style>
+
+<div class="first" reftest-assigned-layer="page-background">
+ <!--
+ This is just a regular box, it should end up in the page background layer.
+ -->
+</div>
+
+<div class="scrollable border"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="2000" reftest-displayport-h="200">
+ <div class="scrollarea">
+ <div class="scrolled border reftest-opaque-layer">
+ <!--
+ The background of .scrollable is uniform and opaque,
+ .scrolled should be able to pull up that background color and become
+ opaque itself.
+ -->
+ </div>
+ </div>
+</div>
+
+<div class="second" reftest-assigned-layer="page-background">
+ <!--
+ This should share a layer with .first and the page background.
+ -->
+</div>
+
+<script>
+
+var scrollable = document.querySelector(".scrollable");
+
+// Make .scrollable start out with active scrolling.
+scrollable.scrollLeft = 0;
+scrollable.scrollLeft = 20;
+
+</script>
+
diff --git a/layout/reftests/layers/reftest.list b/layout/reftests/layers/reftest.list
new file mode 100644
index 0000000000..b037d5d2c9
--- /dev/null
+++ b/layout/reftests/layers/reftest.list
@@ -0,0 +1,45 @@
+== move-to-background-1.html move-to-background-1-ref.html
+fuzzy-if(cocoaWidget,0-2,0-6) random-if(Android) == component-alpha-exit-1.html component-alpha-exit-1-ref.html # bug 760275
+fuzzy-if(cocoaWidget,0-2,0-6) random-if(Android) == component-alpha-enter-1.html component-alpha-enter-1-ref.html
+
+!= pull-background-1.html about:blank
+!= pull-background-2.html about:blank
+!= pull-background-3.html about:blank
+!= pull-background-4.html about:blank
+!= pull-background-5.html about:blank
+!= pull-background-6.html about:blank
+
+# The animated-position tests are disabled for intermittent failures / passes, bug 1150941
+skip != pull-background-animated-position-1.html about:blank # Fails with event regions
+skip != pull-background-animated-position-2.html about:blank
+skip != pull-background-animated-position-3.html about:blank # Fails because PaintedLayer item assignment doesn't recognize overflow:hidden clips
+skip != pull-background-animated-position-4.html about:blank # Fails because PaintedLayer item assignment and background pulling don't recognize overflow:hidden clips
+skip != pull-background-animated-position-5.html about:blank # Fails because ownLayer bounds don't anticipate changes of animated contents, but doesn't fail with event regions
+
+skip-if(!asyncPan) != pull-background-displayport-1.html about:blank
+skip-if(!asyncPan) != pull-background-displayport-2.html about:blank
+skip-if(!asyncPan) != pull-background-displayport-3.html about:blank # fails with non-overlay scrollbars and event regions due to bug 1148515
+skip-if(!asyncPan) != pull-background-displayport-4.html about:blank # fails with non-overlay scrollbars and event regions due to bug 1148515
+skip-if(!asyncPan) != pull-background-displayport-5.html about:blank
+skip-if(!asyncPan) != pull-background-displayport-6.html about:blank # fails with non-overlay scrollbars and event regions due to bug 1148515
+
+skip-if(Android&&emulator) fuzzy(0-2,0-30150) == opacity-blending.html opacity-blending-ref.html
+fuzzy(0-16,0-29) == mask-layer-transform.html mask-layer-transform-ref.html
+fuzzy-if(gtkWidget,0-1,0-17) fuzzy-if(Android,0-3,0-4) == forced-bg-color-outside-visible-region.html forced-bg-color-outside-visible-region-ref.html
+!= layerize-over-fixed-bg-1.html about:blank
+skip-if(!asyncPan) != fixed-pos-scrolled-clip-layerize.html about:blank
+skip-if(!asyncPan) == fixed-pos-scrolled-clip-opacity-layerize.html fixed-pos-scrolled-clip-opacity-inside-layerize.html
+
+# These tests check whether the GPU process is working. We expect it to work if:
+# E10S is enabled, and
+# Direct2D 1.1 works (as a proxy for Windows 7 SP1 + Platform Update or higher), OR
+# The GPU process has been forced on.
+# If these conditions are met, but the GPU process is not on, these tests will turn on
+# and compare false.
+skip-if(!browserIsRemote||!d2d||gpuProcess) == data:text/plain,FAIL about:blank
+skip-if(!gpuProcessForceEnabled||gpuProcess) == data:text/plain,FAIL about:blank
+
+fuzzy(0-1,0-8033) == opacity-background-1.html opacity-background-1-ref.html
+== opacity-flattening-large-image.html opacity-flattening-large-image-ref.html
+
+== opacity-keep-intermediate-surface-too-long.html opacity-keep-intermediate-surface-too-long-ref.html