summaryrefslogtreecommitdiffstats
path: root/layout/reftests/layers
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/layers
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/layers')
-rw-r--r--layout/reftests/layers/component-alpha-exit-1-ref.html30
-rw-r--r--layout/reftests/layers/component-alpha-exit-1.html37
-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-blending-ref.html26
-rw-r--r--layout/reftests/layers/opacity-blending.html28
-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-stylo.list33
-rw-r--r--layout/reftests/layers/reftest.list24
30 files changed, 2069 insertions, 0 deletions
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 000000000..46b1cdd76
--- /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 = "";
+}, false);
+</script>
+<style>
+#scrollbox {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow-y: hidden;
+ background: -moz-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 000000000..b9d659042
--- /dev/null
+++ b/layout/reftests/layers/component-alpha-exit-1.html
@@ -0,0 +1,37 @@
+<!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 scrollDownAllTheWay() {
+ window.removeEventListener("MozAfterPaint", arguments.callee, false);
+ scrollbox.scrollTop = 1000;
+ document.documentElement.className = "";
+ }, false);
+ scrollbox.scrollTop = 1; // activate scroll layer
+}, false);
+</script>
+<style>
+#scrollbox {
+ margin: 20px;
+ width: 300px;
+ height: 400px;
+ overflow-y: hidden;
+ background: -moz-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/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 000000000..8a5c68ac5
--- /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 000000000..fe7d75a27
--- /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 000000000..26e677e0a
--- /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 000000000..54cd38607
--- /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 000000000..0a809c50b
--- /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 000000000..c5ac7391d
--- /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 000000000..18ca9c8ce
--- /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-blending-ref.html b/layout/reftests/layers/opacity-blending-ref.html
new file mode 100644
index 000000000..533ecef70
--- /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 000000000..2b9731f0c
--- /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/pull-background-1.html b/layout/reftests/layers/pull-background-1.html
new file mode 100644
index 000000000..09e2f27c9
--- /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 000000000..75b625eb3
--- /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 000000000..0596987ca
--- /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, false);
+
+</script>
diff --git a/layout/reftests/layers/pull-background-4.html b/layout/reftests/layers/pull-background-4.html
new file mode 100644
index 000000000..bf10f8ab6
--- /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, false);
+
+</script>
diff --git a/layout/reftests/layers/pull-background-5.html b/layout/reftests/layers/pull-background-5.html
new file mode 100644
index 000000000..b91f81a7b
--- /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 000000000..49e919db5
--- /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 000000000..6271b22da
--- /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, false);
+
+</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 000000000..8e7ea80c2
--- /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, false);
+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 000000000..5cf988090
--- /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, false);
+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 000000000..45a35bb4b
--- /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, false);
+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 000000000..2cc1a8015
--- /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, false);
+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 000000000..b3a5aa9f9
--- /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 000000000..fb6977515
--- /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 000000000..2602cda3c
--- /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, false);
+// 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 000000000..a87b08da4
--- /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, false);
+// 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 000000000..6b865e7d6
--- /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 000000000..27f66d6ac
--- /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-stylo.list b/layout/reftests/layers/reftest-stylo.list
new file mode 100644
index 000000000..984f829c1
--- /dev/null
+++ b/layout/reftests/layers/reftest-stylo.list
@@ -0,0 +1,33 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== move-to-background-1.html move-to-background-1.html
+fuzzy-if(cocoaWidget,2,6) random-if(Android) == component-alpha-exit-1.html component-alpha-exit-1.html
+# bug 760275
+== pull-background-1.html pull-background-1.html
+== pull-background-2.html pull-background-2.html
+== pull-background-3.html pull-background-3.html
+== pull-background-4.html pull-background-4.html
+== pull-background-5.html pull-background-5.html
+== pull-background-6.html pull-background-6.html
+# The animated-position tests are disabled for intermittent failures / passes, bug 1150941
+skip == pull-background-animated-position-1.html pull-background-animated-position-1.html
+# Fails with event regions
+skip == pull-background-animated-position-2.html pull-background-animated-position-2.html
+skip == pull-background-animated-position-3.html pull-background-animated-position-3.html
+# Fails because PaintedLayer item assignment doesn't recognize overflow:hidden clips
+skip == pull-background-animated-position-4.html pull-background-animated-position-4.html
+# Fails because PaintedLayer item assignment and background pulling don't recognize overflow:hidden clips
+skip == pull-background-animated-position-5.html pull-background-animated-position-5.html
+# 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 pull-background-displayport-1.html
+skip-if(!asyncPan) == pull-background-displayport-2.html pull-background-displayport-2.html
+skip-if(!asyncPan) == pull-background-displayport-3.html pull-background-displayport-3.html
+# fails with non-overlay scrollbars and event regions due to bug 1148515
+skip-if(!asyncPan) == pull-background-displayport-4.html pull-background-displayport-4.html
+# fails with non-overlay scrollbars and event regions due to bug 1148515
+skip-if(!asyncPan) == pull-background-displayport-5.html pull-background-displayport-5.html
+skip-if(!asyncPan) == pull-background-displayport-6.html pull-background-displayport-6.html
+# fails with non-overlay scrollbars and event regions due to bug 1148515
+fuzzy(2,30150) == opacity-blending.html opacity-blending.html
+== mask-layer-transform.html mask-layer-transform.html
+fails fuzzy-if(gtkWidget,1,17) == forced-bg-color-outside-visible-region.html forced-bg-color-outside-visible-region.html
+== layerize-over-fixed-bg-1.html layerize-over-fixed-bg-1.html
diff --git a/layout/reftests/layers/reftest.list b/layout/reftests/layers/reftest.list
new file mode 100644
index 000000000..d2cabf37e
--- /dev/null
+++ b/layout/reftests/layers/reftest.list
@@ -0,0 +1,24 @@
+== move-to-background-1.html move-to-background-1-ref.html
+fuzzy-if(cocoaWidget,2,6) random-if(Android) == component-alpha-exit-1.html component-alpha-exit-1-ref.html # bug 760275
+!= 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
+fuzzy(2,30150) == opacity-blending.html opacity-blending-ref.html
+fuzzy(16,5) == mask-layer-transform.html mask-layer-transform-ref.html
+fuzzy-if(gtkWidget,1,17) == forced-bg-color-outside-visible-region.html forced-bg-color-outside-visible-region-ref.html
+!= layerize-over-fixed-bg-1.html about:blank