From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../layers/component-alpha-enter-1-ref.html        |  33 ++++++
 .../reftests/layers/component-alpha-enter-1.html   |  56 ++++++++++
 .../layers/component-alpha-exit-1-ref.html         |  30 ++++++
 layout/reftests/layers/component-alpha-exit-1.html |  36 +++++++
 .../layers/fixed-pos-scrolled-clip-layerize.html   |  62 +++++++++++
 ...-pos-scrolled-clip-opacity-inside-layerize.html |  67 ++++++++++++
 .../fixed-pos-scrolled-clip-opacity-layerize.html  |  68 ++++++++++++
 ...forced-bg-color-outside-visible-region-ref.html |  39 +++++++
 .../forced-bg-color-outside-visible-region.html    | 105 ++++++++++++++++++
 .../reftests/layers/layerize-over-fixed-bg-1.html  |  40 +++++++
 .../reftests/layers/mask-layer-transform-ref.html  |   8 ++
 layout/reftests/layers/mask-layer-transform.html   |  10 ++
 .../reftests/layers/move-to-background-1-ref.html  |  19 ++++
 layout/reftests/layers/move-to-background-1.html   |  19 ++++
 .../reftests/layers/opacity-background-1-ref.html  |  55 ++++++++++
 layout/reftests/layers/opacity-background-1.html   |  55 ++++++++++
 layout/reftests/layers/opacity-blending-ref.html   |  26 +++++
 layout/reftests/layers/opacity-blending.html       |  28 +++++
 .../layers/opacity-flattening-large-image-ref.html |  27 +++++
 .../layers/opacity-flattening-large-image.html     |  43 ++++++++
 ...ity-keep-intermediate-surface-too-long-ref.html |  37 +++++++
 ...opacity-keep-intermediate-surface-too-long.html |  47 ++++++++
 layout/reftests/layers/pull-background-1.html      |  82 ++++++++++++++
 layout/reftests/layers/pull-background-2.html      |  88 +++++++++++++++
 layout/reftests/layers/pull-background-3.html      | 101 +++++++++++++++++
 layout/reftests/layers/pull-background-4.html      | 107 ++++++++++++++++++
 layout/reftests/layers/pull-background-5.html      |  92 ++++++++++++++++
 layout/reftests/layers/pull-background-6.html      |  86 +++++++++++++++
 .../pull-background-animated-position-1.html       | 105 ++++++++++++++++++
 .../pull-background-animated-position-2.html       | 120 +++++++++++++++++++++
 .../pull-background-animated-position-3.html       | 105 ++++++++++++++++++
 .../pull-background-animated-position-4.html       |  94 ++++++++++++++++
 .../pull-background-animated-position-5.html       | 105 ++++++++++++++++++
 .../layers/pull-background-displayport-1.html      |  84 +++++++++++++++
 .../layers/pull-background-displayport-2.html      |  90 ++++++++++++++++
 .../layers/pull-background-displayport-3.html      | 104 ++++++++++++++++++
 .../layers/pull-background-displayport-4.html      | 110 +++++++++++++++++++
 .../layers/pull-background-displayport-5.html      |  94 ++++++++++++++++
 .../layers/pull-background-displayport-6.html      |  84 +++++++++++++++
 layout/reftests/layers/reftest.list                |  36 +++++++
 40 files changed, 2597 insertions(+)
 create mode 100644 layout/reftests/layers/component-alpha-enter-1-ref.html
 create mode 100644 layout/reftests/layers/component-alpha-enter-1.html
 create mode 100644 layout/reftests/layers/component-alpha-exit-1-ref.html
 create mode 100644 layout/reftests/layers/component-alpha-exit-1.html
 create mode 100644 layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html
 create mode 100644 layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html
 create mode 100644 layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html
 create mode 100644 layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html
 create mode 100644 layout/reftests/layers/forced-bg-color-outside-visible-region.html
 create mode 100644 layout/reftests/layers/layerize-over-fixed-bg-1.html
 create mode 100644 layout/reftests/layers/mask-layer-transform-ref.html
 create mode 100644 layout/reftests/layers/mask-layer-transform.html
 create mode 100644 layout/reftests/layers/move-to-background-1-ref.html
 create mode 100644 layout/reftests/layers/move-to-background-1.html
 create mode 100644 layout/reftests/layers/opacity-background-1-ref.html
 create mode 100644 layout/reftests/layers/opacity-background-1.html
 create mode 100644 layout/reftests/layers/opacity-blending-ref.html
 create mode 100644 layout/reftests/layers/opacity-blending.html
 create mode 100644 layout/reftests/layers/opacity-flattening-large-image-ref.html
 create mode 100644 layout/reftests/layers/opacity-flattening-large-image.html
 create mode 100644 layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html
 create mode 100644 layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html
 create mode 100644 layout/reftests/layers/pull-background-1.html
 create mode 100644 layout/reftests/layers/pull-background-2.html
 create mode 100644 layout/reftests/layers/pull-background-3.html
 create mode 100644 layout/reftests/layers/pull-background-4.html
 create mode 100644 layout/reftests/layers/pull-background-5.html
 create mode 100644 layout/reftests/layers/pull-background-6.html
 create mode 100644 layout/reftests/layers/pull-background-animated-position-1.html
 create mode 100644 layout/reftests/layers/pull-background-animated-position-2.html
 create mode 100644 layout/reftests/layers/pull-background-animated-position-3.html
 create mode 100644 layout/reftests/layers/pull-background-animated-position-4.html
 create mode 100644 layout/reftests/layers/pull-background-animated-position-5.html
 create mode 100644 layout/reftests/layers/pull-background-displayport-1.html
 create mode 100644 layout/reftests/layers/pull-background-displayport-2.html
 create mode 100644 layout/reftests/layers/pull-background-displayport-3.html
 create mode 100644 layout/reftests/layers/pull-background-displayport-4.html
 create mode 100644 layout/reftests/layers/pull-background-displayport-5.html
 create mode 100644 layout/reftests/layers/pull-background-displayport-6.html
 create mode 100644 layout/reftests/layers/reftest.list

(limited to 'layout/reftests/layers')

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..f65a93a165
--- /dev/null
+++ b/layout/reftests/layers/reftest.list
@@ -0,0 +1,36 @@
+== 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-30) == 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
+
+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
-- 
cgit v1.2.3