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>
---
 layout/reftests/display-list/1413073-ref.html      |  54 ++++++++++++
 layout/reftests/display-list/1413073.html          |  69 +++++++++++++++
 layout/reftests/display-list/1416291-ref.html      |  11 +++
 layout/reftests/display-list/1416291.html          |  22 +++++
 layout/reftests/display-list/1417601-1-ref.html    |  23 +++++
 layout/reftests/display-list/1417601-1.html        |  32 +++++++
 layout/reftests/display-list/1418945-1-ref.html    |  24 ++++++
 layout/reftests/display-list/1418945-1.html        |  34 ++++++++
 layout/reftests/display-list/1420480-1-ref.html    |  26 ++++++
 layout/reftests/display-list/1420480-1.html        |  43 ++++++++++
 layout/reftests/display-list/1428993-1-ref.html    |  25 ++++++
 layout/reftests/display-list/1428993-1.html        |  57 +++++++++++++
 layout/reftests/display-list/1428993-2-ref.html    |  34 ++++++++
 layout/reftests/display-list/1428993-2.html        |  62 ++++++++++++++
 layout/reftests/display-list/1429027-1-ref.html    |  19 +++++
 layout/reftests/display-list/1429027-1.html        |  35 ++++++++
 layout/reftests/display-list/1432553-1-ref.html    |  23 +++++
 layout/reftests/display-list/1432553-1.html        |  66 +++++++++++++++
 layout/reftests/display-list/1432553-2-ref.html    |  23 +++++
 layout/reftests/display-list/1432553-2.html        |  66 +++++++++++++++
 layout/reftests/display-list/1436189-1-ref.html    |   8 ++
 layout/reftests/display-list/1436189-1.html        |  20 +++++
 layout/reftests/display-list/1437374-1-ref.html    |   8 ++
 layout/reftests/display-list/1437374-1.html        |  23 +++++
 layout/reftests/display-list/1439809-1-ref.html    |  29 +++++++
 layout/reftests/display-list/1439809-1.html        |  41 +++++++++
 layout/reftests/display-list/1443027-1.html        |  93 +++++++++++++++++++++
 layout/reftests/display-list/1443027-2.html        |  93 +++++++++++++++++++++
 layout/reftests/display-list/1443027-3-ref.html    |  54 ++++++++++++
 layout/reftests/display-list/1443027-3.html        |  91 ++++++++++++++++++++
 layout/reftests/display-list/1443027-ref.html      |  45 ++++++++++
 layout/reftests/display-list/1451971-1.html        |  36 ++++++++
 layout/reftests/display-list/1451971-ref.html      |  29 +++++++
 layout/reftests/display-list/1452805-1.html        |  39 +++++++++
 layout/reftests/display-list/1452805-ref.html      |  26 ++++++
 layout/reftests/display-list/1453541-1.html        |  18 ++++
 layout/reftests/display-list/1453541-2.html        |  18 ++++
 layout/reftests/display-list/1453541-ref.html      |  11 +++
 layout/reftests/display-list/1461231-1.html        |  23 +++++
 layout/reftests/display-list/1464288-1.html        |  58 +++++++++++++
 layout/reftests/display-list/1464288-ref.html      |  22 +++++
 layout/reftests/display-list/1482403-1-ref.html    |  35 ++++++++
 layout/reftests/display-list/1482403-1.html        |  45 ++++++++++
 layout/reftests/display-list/1504233-1-ref.html    |  48 +++++++++++
 layout/reftests/display-list/1504233-1.html        |  62 ++++++++++++++
 layout/reftests/display-list/1533317-1-ref.html    |  15 ++++
 layout/reftests/display-list/1533317-1.html        |  32 +++++++
 layout/reftests/display-list/1544948-1-ref.html    |  32 +++++++
 layout/reftests/display-list/1544948-1.html        |  43 ++++++++++
 layout/reftests/display-list/1551053-1-ref.html    |  16 ++++
 layout/reftests/display-list/1551053-1.html        |  27 ++++++
 layout/reftests/display-list/1553828-1-ref.html    |  31 +++++++
 layout/reftests/display-list/1553828-1.html        |  39 +++++++++
 layout/reftests/display-list/1619370-1-ref.html    |  20 +++++
 layout/reftests/display-list/1619370-1.html        |  31 +++++++
 layout/reftests/display-list/1619370-iframe.html   |  19 +++++
 layout/reftests/display-list/1677568-1-ref.html    |  26 ++++++
 layout/reftests/display-list/1677568-1.html        |  34 ++++++++
 layout/reftests/display-list/1709452-1.html        |  34 ++++++++
 layout/reftests/display-list/1709452-ref.html      |  26 ++++++
 layout/reftests/display-list/1719346-1-ref.html    |  25 ++++++
 layout/reftests/display-list/1719346-1.gif         | Bin 0 -> 238 bytes
 layout/reftests/display-list/1719346-1.html        |  35 ++++++++
 .../invalidated-blendmode-sorting-ref.html         |  31 +++++++
 .../invalidated-blendmode-sorting.html             |  38 +++++++++
 layout/reftests/display-list/reftest.list          |  60 +++++++++++++
 .../retained-dl-animation-on-pseudo-ref.html       |  28 +++++++
 .../retained-dl-animation-on-pseudo.html           |  41 +++++++++
 .../retained-dl-async-scrolled-1-ref.html          |  20 +++++
 .../display-list/retained-dl-async-scrolled-1.html |  56 +++++++++++++
 .../retained-dl-displayport-1-ref.html             |  11 +++
 .../display-list/retained-dl-displayport-1.html    |  21 +++++
 .../display-list/retained-dl-frame-created-1.html  |  25 ++++++
 .../display-list/retained-dl-frame-deleted-1.html  |  24 ++++++
 ...ained-dl-opacity-animation-on-ib-split-ref.html |  12 +++
 .../retained-dl-opacity-animation-on-ib-split.html |  22 +++++
 .../retained-dl-prerender-transform-1-ref.html     |  24 ++++++
 .../retained-dl-prerender-transform-1.html         |  36 ++++++++
 ...tained-dl-remove-for-ancestor-change-1-ref.html |  10 +++
 .../retained-dl-remove-for-ancestor-change-1.html  |  18 ++++
 .../retained-dl-scroll-out-of-view-1-ref.html      |   8 ++
 .../retained-dl-scroll-out-of-view-1.html          |  18 ++++
 .../retained-dl-style-change-1-ref.html            |  15 ++++
 .../display-list/retained-dl-style-change-1.html   |  23 +++++
 ...ned-dl-style-change-stacking-context-1-ref.html |  18 ++++
 ...etained-dl-style-change-stacking-context-1.html |  29 +++++++
 ...ned-dl-style-change-stacking-context-2-ref.html |  20 +++++
 ...etained-dl-style-change-stacking-context-2.html |  23 +++++
 ...ned-dl-style-change-stacking-context-3-ref.html |  20 +++++
 ...etained-dl-style-change-stacking-context-3.html |  29 +++++++
 ...ned-dl-style-change-stacking-context-4-ref.html |  20 +++++
 ...etained-dl-style-change-stacking-context-4.html |  29 +++++++
 ...tyle-change-with-prerender-transform-1-ref.html |  24 ++++++
 ...dl-style-change-with-prerender-transform-1.html |  30 +++++++
 .../display-list/retained-dl-wrap-list-ref.html    |  14 ++++
 .../display-list/retained-dl-wrap-list.html        |  15 ++++
 .../display-list/retained-dl-zindex-1-ref.html     |  27 ++++++
 .../display-list/retained-dl-zindex-1.html         |  35 ++++++++
 .../display-list/retained-dl-zindex-2-ref.html     |  33 ++++++++
 .../display-list/retained-dl-zindex-2.html         |  41 +++++++++
 .../display-list/reuse-sc-style-change-1-ref.html  |  17 ++++
 .../display-list/reuse-sc-style-change-1.html      |  25 ++++++
 .../reuse-sc-style-change-abs-pos-1-ref.html       |  17 ++++
 .../reuse-sc-style-change-abs-pos-1.html           |  25 ++++++
 .../reuse-sc-style-change-fixed-pos-1-ref.html     |  17 ++++
 .../reuse-sc-style-change-fixed-pos-1.html         |  25 ++++++
 .../reuse-sc-style-change-nested-1-ref.html        |  22 +++++
 .../reuse-sc-style-change-nested-1.html            |  28 +++++++
 108 files changed, 3332 insertions(+)
 create mode 100644 layout/reftests/display-list/1413073-ref.html
 create mode 100644 layout/reftests/display-list/1413073.html
 create mode 100644 layout/reftests/display-list/1416291-ref.html
 create mode 100644 layout/reftests/display-list/1416291.html
 create mode 100644 layout/reftests/display-list/1417601-1-ref.html
 create mode 100644 layout/reftests/display-list/1417601-1.html
 create mode 100644 layout/reftests/display-list/1418945-1-ref.html
 create mode 100644 layout/reftests/display-list/1418945-1.html
 create mode 100644 layout/reftests/display-list/1420480-1-ref.html
 create mode 100644 layout/reftests/display-list/1420480-1.html
 create mode 100644 layout/reftests/display-list/1428993-1-ref.html
 create mode 100644 layout/reftests/display-list/1428993-1.html
 create mode 100644 layout/reftests/display-list/1428993-2-ref.html
 create mode 100644 layout/reftests/display-list/1428993-2.html
 create mode 100644 layout/reftests/display-list/1429027-1-ref.html
 create mode 100644 layout/reftests/display-list/1429027-1.html
 create mode 100644 layout/reftests/display-list/1432553-1-ref.html
 create mode 100644 layout/reftests/display-list/1432553-1.html
 create mode 100644 layout/reftests/display-list/1432553-2-ref.html
 create mode 100644 layout/reftests/display-list/1432553-2.html
 create mode 100644 layout/reftests/display-list/1436189-1-ref.html
 create mode 100644 layout/reftests/display-list/1436189-1.html
 create mode 100644 layout/reftests/display-list/1437374-1-ref.html
 create mode 100644 layout/reftests/display-list/1437374-1.html
 create mode 100644 layout/reftests/display-list/1439809-1-ref.html
 create mode 100644 layout/reftests/display-list/1439809-1.html
 create mode 100644 layout/reftests/display-list/1443027-1.html
 create mode 100644 layout/reftests/display-list/1443027-2.html
 create mode 100644 layout/reftests/display-list/1443027-3-ref.html
 create mode 100644 layout/reftests/display-list/1443027-3.html
 create mode 100644 layout/reftests/display-list/1443027-ref.html
 create mode 100644 layout/reftests/display-list/1451971-1.html
 create mode 100644 layout/reftests/display-list/1451971-ref.html
 create mode 100644 layout/reftests/display-list/1452805-1.html
 create mode 100644 layout/reftests/display-list/1452805-ref.html
 create mode 100644 layout/reftests/display-list/1453541-1.html
 create mode 100644 layout/reftests/display-list/1453541-2.html
 create mode 100644 layout/reftests/display-list/1453541-ref.html
 create mode 100644 layout/reftests/display-list/1461231-1.html
 create mode 100644 layout/reftests/display-list/1464288-1.html
 create mode 100644 layout/reftests/display-list/1464288-ref.html
 create mode 100644 layout/reftests/display-list/1482403-1-ref.html
 create mode 100644 layout/reftests/display-list/1482403-1.html
 create mode 100644 layout/reftests/display-list/1504233-1-ref.html
 create mode 100644 layout/reftests/display-list/1504233-1.html
 create mode 100644 layout/reftests/display-list/1533317-1-ref.html
 create mode 100644 layout/reftests/display-list/1533317-1.html
 create mode 100644 layout/reftests/display-list/1544948-1-ref.html
 create mode 100644 layout/reftests/display-list/1544948-1.html
 create mode 100644 layout/reftests/display-list/1551053-1-ref.html
 create mode 100644 layout/reftests/display-list/1551053-1.html
 create mode 100644 layout/reftests/display-list/1553828-1-ref.html
 create mode 100644 layout/reftests/display-list/1553828-1.html
 create mode 100644 layout/reftests/display-list/1619370-1-ref.html
 create mode 100644 layout/reftests/display-list/1619370-1.html
 create mode 100644 layout/reftests/display-list/1619370-iframe.html
 create mode 100644 layout/reftests/display-list/1677568-1-ref.html
 create mode 100644 layout/reftests/display-list/1677568-1.html
 create mode 100644 layout/reftests/display-list/1709452-1.html
 create mode 100644 layout/reftests/display-list/1709452-ref.html
 create mode 100644 layout/reftests/display-list/1719346-1-ref.html
 create mode 100644 layout/reftests/display-list/1719346-1.gif
 create mode 100644 layout/reftests/display-list/1719346-1.html
 create mode 100644 layout/reftests/display-list/invalidated-blendmode-sorting-ref.html
 create mode 100644 layout/reftests/display-list/invalidated-blendmode-sorting.html
 create mode 100644 layout/reftests/display-list/reftest.list
 create mode 100644 layout/reftests/display-list/retained-dl-animation-on-pseudo-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-animation-on-pseudo.html
 create mode 100644 layout/reftests/display-list/retained-dl-async-scrolled-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-async-scrolled-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-displayport-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-displayport-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-frame-created-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-frame-deleted-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split.html
 create mode 100644 layout/reftests/display-list/retained-dl-prerender-transform-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-prerender-transform-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-scroll-out-of-view-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-scroll-out-of-view-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-2-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-2.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-3-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-3.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-4-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-stacking-context-4.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-wrap-list-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-wrap-list.html
 create mode 100644 layout/reftests/display-list/retained-dl-zindex-1-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-zindex-1.html
 create mode 100644 layout/reftests/display-list/retained-dl-zindex-2-ref.html
 create mode 100644 layout/reftests/display-list/retained-dl-zindex-2.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-1-ref.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-1.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-abs-pos-1-ref.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-abs-pos-1.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1-ref.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-nested-1-ref.html
 create mode 100644 layout/reftests/display-list/reuse-sc-style-change-nested-1.html

(limited to 'layout/reftests/display-list')

diff --git a/layout/reftests/display-list/1413073-ref.html b/layout/reftests/display-list/1413073-ref.html
new file mode 100644
index 0000000000..eac0fd7bf4
--- /dev/null
+++ b/layout/reftests/display-list/1413073-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>The ASR for the opacity item is the root scroll frame instead of the subframe.</title>
+
+<style>
+
+.outer {
+  /* avoid event regions messing with our demonstration */
+  pointer-events: none;
+  /* make sure the .outer opacity item has the root scroll frame as its ASR */
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.opacity {
+  opacity: 0.8;
+}
+
+.scrollFrameWrapper {
+  /* clips off .scrollFrame's scrollbar */
+  margin: 100px;
+  overflow: hidden;
+}
+
+.scrollFrame {
+  height: 300px;
+  margin-right: -20px;
+  padding-right: 20px;
+  overflow: hidden;
+}
+
+.scrolledContents {
+  height: 1000px;
+  width: 200px;
+  border: 5px solid black;
+  pointer-events: auto;
+}
+
+</style>
+
+</head><body>
+
+<div class="opacity outer">
+  <div class="opacity inner">
+    <div class="scrollFrameWrapper">
+      <div class="scrollFrame">
+        <div class="scrolledContents"></div>
+      </div>
+    </div>
+  </div>
+</div>
+</body></html>
diff --git a/layout/reftests/display-list/1413073.html b/layout/reftests/display-list/1413073.html
new file mode 100644
index 0000000000..f266852ae2
--- /dev/null
+++ b/layout/reftests/display-list/1413073.html
@@ -0,0 +1,69 @@
+<!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>The ASR for the opacity item is the root scroll frame instead of the subframe.</title>
+
+<style>
+
+.outer {
+  /* avoid event regions messing with our demonstration */
+  pointer-events: none;
+  /* make sure the .outer opacity item has the root scroll frame as its ASR */
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.opacity {
+  opacity: 0.8;
+}
+
+.scrollFrameWrapper {
+  /* clips off .scrollFrame's scrollbar */
+  margin: 100px;
+  overflow: hidden;
+}
+
+.scrollFrame {
+  height: 300px;
+  margin-right: -20px;
+  padding-right: 20px;
+  overflow: auto;
+}
+
+.scrolledContents {
+  height: 1000px;
+  width: 200px;
+  border: 5px solid black;
+  pointer-events: auto;
+}
+
+</style>
+
+</head><body>
+
+<div class="opacity outer">
+  <div class="opacity inner">
+    <div class="scrollFrameWrapper">
+      <div class="scrollFrame">
+        <div class="scrolledContents"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+
+function doTest()
+{
+  var scrollFrame = document.querySelector('.scrollFrame');
+  scrollFrame.scrollTop = 10;
+  scrollFrame.scrollTop = 20;
+  scrollFrame.scrollTop = 0;
+
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body></html>
diff --git a/layout/reftests/display-list/1416291-ref.html b/layout/reftests/display-list/1416291-ref.html
new file mode 100644
index 0000000000..6a2650a669
--- /dev/null
+++ b/layout/reftests/display-list/1416291-ref.html
@@ -0,0 +1,11 @@
+<html>
+<body>
+<div style="transform-style:preserve-3d; width: 200px; height: 200px;">
+  <div style="transform-style:preserve-3d; transform:translate(10px); width: 200px; height: 200px;" id="transformed">
+    <div style="transform: translate(10px); width: 200px; height: 200px;">
+      <div style="width:200px; height:200px; background-color:red"></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1416291.html b/layout/reftests/display-list/1416291.html
new file mode 100644
index 0000000000..275d6cb069
--- /dev/null
+++ b/layout/reftests/display-list/1416291.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<body>
+<div style="transform-style:preserve-3d; width: 200px; height: 200px;">
+  <div style="transform-style:preserve-3d; transform:translate(5px); width: 200px; height: 200px;" id="transformed">
+    <div style="transform: translate(10px); width: 200px; height: 200px;">
+      <div style="width:200px; height:200px; background-color:red"></div>
+    </div>
+  </div>
+</div>
+<script>
+
+function doTest()
+{
+  var div = document.getElementById("transformed");
+  transformed.style.transform = "translate(10px)";
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1417601-1-ref.html b/layout/reftests/display-list/1417601-1-ref.html
new file mode 100644
index 0000000000..a794e9914e
--- /dev/null
+++ b/layout/reftests/display-list/1417601-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+
+<style>
+#modified {
+  left: 10px;
+}
+</style>
+
+</head>
+<body>
+<div style="opacity:0.9">
+  <div style="position:fixed; left:300px; top:300px; width:200px; height:200px; background-color:red; z-index:-10"></div>
+  <div style="width:200px; height:200px; position:relative; background-color:green" id="modified">
+    <div style="opacity:0.9">
+      <div style="position:fixed; left:300px; top:300px; width:200px; height:200px; background-color:green; z-index:-10"></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1417601-1.html b/layout/reftests/display-list/1417601-1.html
new file mode 100644
index 0000000000..d52beae807
--- /dev/null
+++ b/layout/reftests/display-list/1417601-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="UTF-8">
+
+<style>
+#modified {
+  left: 0px;
+}
+</style>
+
+<script type="text/javascript">
+function doTest() {
+  document.getElementById("modified").style.left = "10px";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+
+</head>
+<body>
+<div style="opacity:0.9">
+  <div style="position:fixed; left:300px; top:300px; width:200px; height:200px; background-color:red; z-index:-10"></div>
+  <div style="width:200px; height:200px; position:relative; background-color:green" id="modified">
+    <div style="opacity:0.9">
+      <div style="position:fixed; left:300px; top:300px; width:200px; height:200px; background-color:green; z-index:-10"></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1418945-1-ref.html b/layout/reftests/display-list/1418945-1-ref.html
new file mode 100644
index 0000000000..f1498c931d
--- /dev/null
+++ b/layout/reftests/display-list/1418945-1-ref.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    position:relative;
+  }
+  #first {
+    background-color: red;
+    z-index: 1;
+  }
+  #second {
+    top: -50px;
+    background-color: green;
+    z-index: 1;
+  }
+</style>
+</head>
+<body>
+    <div id="first"></div>
+    <div id="second"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1418945-1.html b/layout/reftests/display-list/1418945-1.html
new file mode 100644
index 0000000000..527d91211d
--- /dev/null
+++ b/layout/reftests/display-list/1418945-1.html
@@ -0,0 +1,34 @@
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    position:relative;
+  }
+  #first {
+    background-color: red;
+    z-index: 2;
+  }
+  #second {
+    top: -50px;
+    background-color: green;
+    z-index: 1;
+  }
+</style>
+<script>
+
+function doTest()
+{
+  document.getElementById("first").style.zIndex = 1;
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+    <div id="first"></div>
+    <div id="second"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1420480-1-ref.html b/layout/reftests/display-list/1420480-1-ref.html
new file mode 100644
index 0000000000..bd014eff7e
--- /dev/null
+++ b/layout/reftests/display-list/1420480-1-ref.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <style>
+    div {
+      width: 200px;
+      height: 200px;
+      background-color: blue;
+      opacity: 0.95;
+      position: absolute;
+    }
+    #second {
+      width: 600px;
+      height: 800px;
+      background-color: green;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="first">
+        <div id="second"></div>
+    </div>
+    <div style="z-index:-2; top: 220px;"></div>
+    <div style="top: 440px;"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/display-list/1420480-1.html b/layout/reftests/display-list/1420480-1.html
new file mode 100644
index 0000000000..d4bc59173a
--- /dev/null
+++ b/layout/reftests/display-list/1420480-1.html
@@ -0,0 +1,43 @@
+<html class="reftest-wait">
+  <head>
+    <style>
+    div {
+      width: 200px;
+      height: 200px;
+      background-color: blue;
+      opacity: 0.95;
+      position: absolute;
+    }
+    #first {
+      display: none;
+    }
+    #second {
+      width: 600px;
+      height: 800px;
+      display: none;
+      background-color: green;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="first">
+        <div id="second"></div>
+    </div>
+    <div style="z-index:-2; top: 220px;"></div>
+    <div style="top: 440px;"></div>
+
+    <script>
+      function doTest2() {
+        document.getElementById("second").style.display = "block";
+        document.documentElement.removeAttribute("class");
+      }
+
+      function doTest() {
+        document.getElementById("first").style.display = "block";
+        setTimeout(doTest2, 500);
+      }
+      document.addEventListener("MozReftestInvalidate", doTest);
+    </script>
+  </body>
+</html>
+
diff --git a/layout/reftests/display-list/1428993-1-ref.html b/layout/reftests/display-list/1428993-1-ref.html
new file mode 100644
index 0000000000..d04ab0273b
--- /dev/null
+++ b/layout/reftests/display-list/1428993-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+.container {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+
+    width: 400px;
+    height: 400px;
+
+    background-color: green;
+}
+</style>
+</head>
+
+<body>
+<div class="container">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1428993-1.html b/layout/reftests/display-list/1428993-1.html
new file mode 100644
index 0000000000..340633249a
--- /dev/null
+++ b/layout/reftests/display-list/1428993-1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+.box {
+    left: 0px;
+    top: 0px;
+    width: 400px;
+    height: 400px;
+}
+
+button {
+    position: fixed;
+    outline: none;
+    background-color: green;
+    border: none;
+}
+
+.red {
+    position: absolute;
+    background-color: red;
+}
+
+.translate {
+    transform: translateX(0px);
+}
+
+.container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+}
+</style>
+</head>
+
+<body>
+<div class="container">
+    <div class="box red"></div>
+    <button class="box" id="green"></button>
+</div>
+
+<script type="text/javascript">
+function doTest() {
+  document.getElementById("green").classList.add("translate");
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+
+// setTimeout(doTest, 5000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1428993-2-ref.html b/layout/reftests/display-list/1428993-2-ref.html
new file mode 100644
index 0000000000..a5ed24618f
--- /dev/null
+++ b/layout/reftests/display-list/1428993-2-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+#child {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    top: 300px;
+    left: 0px;
+    background-color: green;
+}
+
+.container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 200px;
+    height: 200px;
+    z-index: 1;
+    background-color: green;
+}
+</style>
+</head>
+
+<body>
+<div class="container">
+    <div id="child"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1428993-2.html b/layout/reftests/display-list/1428993-2.html
new file mode 100644
index 0000000000..24515231bc
--- /dev/null
+++ b/layout/reftests/display-list/1428993-2.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+.back {
+    width: 200px;
+    height: 200px;
+    background-color: red;
+}
+
+#parent {
+    position: fixed;
+    width: 200px;
+    height: 200px;
+    top: 0px;
+    left: 0px;
+    background-color: green;
+}
+
+#child {
+    position: fixed;
+    width: 100px;
+    height: 100px;
+    top: 300px;
+    background-color: green;
+}
+
+.translate {
+    transform: translateX(0px);
+}
+
+.container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+}
+</style>
+</head>
+
+<body>
+<div class="container">
+    <div class="back"></div>
+    <div id="parent">
+        <div id="child"></div>
+    </div>
+</div>
+<script type="text/javascript">
+function doTest() {
+  document.getElementById("parent").classList.add("translate");
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+
+// setTimeout(doTest, 5000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1429027-1-ref.html b/layout/reftests/display-list/1429027-1-ref.html
new file mode 100644
index 0000000000..a161155609
--- /dev/null
+++ b/layout/reftests/display-list/1429027-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>Bug 1429027 - No caret</title>
+  <meta charset="utf-8">
+</head>
+<body>
+<form autocomplete="off">
+  <input autofocus value="" onfocus="done()">
+</form>
+
+<script type="text/javascript">
+function done() {
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1429027-1.html b/layout/reftests/display-list/1429027-1.html
new file mode 100644
index 0000000000..ea89a57634
--- /dev/null
+++ b/layout/reftests/display-list/1429027-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>Bug 1429027 - No caret</title>
+  <meta charset="utf-8">
+</head>
+<body>
+<form autocomplete="off">
+  <input autofocus value="test">
+</form>
+
+<script type="text/javascript">
+function done() {
+  document.documentElement.removeAttribute("class");
+}
+
+function focus() {
+  document.querySelector("input").focus();
+  setTimeout(done, 0);
+}
+
+function clearInput() {
+  document.querySelector("input").value = "";
+  setTimeout(focus, 0);
+}
+
+function doTest() {
+  document.querySelector("input").focus();
+  setTimeout(clearInput, 0);
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1432553-1-ref.html b/layout/reftests/display-list/1432553-1-ref.html
new file mode 100644
index 0000000000..aed22a3297
--- /dev/null
+++ b/layout/reftests/display-list/1432553-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+#parent {
+    position: fixed;
+    top: 0px;
+    left: 300px;
+    width: 200px;
+    height: 200px;
+
+    border: none;
+    background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1432553-1.html b/layout/reftests/display-list/1432553-1.html
new file mode 100644
index 0000000000..2605f9ef1e
--- /dev/null
+++ b/layout/reftests/display-list/1432553-1.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+.back {
+    position: absolute;
+    left: 50px;
+    top: 50px;
+    height: 400px;
+    width: 400px;
+
+    background: white;
+}
+
+#parent {
+    position: fixed;
+    top: 0px;
+    left: 300px;
+    width: 200px;
+    height: 200px;
+
+    border: none;
+    background-color: green;
+}
+
+.translate {
+    transform: translateX(0px);
+}
+
+#child {
+    position: fixed;
+}
+
+.container {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 600px;
+    height: 600px;
+    z-index: 1;
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="back"></div>
+    <div id="parent">
+      <div id="child"></div>
+    </div>
+</div>
+
+<script type="text/javascript">
+function doTest() {
+  document.getElementById("parent").classList.add("translate");
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+
+// setTimeout(doTest, 1000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1432553-2-ref.html b/layout/reftests/display-list/1432553-2-ref.html
new file mode 100644
index 0000000000..2ccf9dc4a2
--- /dev/null
+++ b/layout/reftests/display-list/1432553-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+#parent {
+    position: fixed;
+    top: 300px;
+    left: 300px;
+    width: 200px;
+    height: 200px;
+
+    border: none;
+    background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="parent"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1432553-2.html b/layout/reftests/display-list/1432553-2.html
new file mode 100644
index 0000000000..d10e29227d
--- /dev/null
+++ b/layout/reftests/display-list/1432553-2.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Retained display list test</title>
+<style type="text/css">
+.back {
+    position: absolute;
+    left: 50px;
+    top: 50px;
+    height: 400px;
+    width: 400px;
+
+    background: white;
+}
+
+#parent {
+    position: fixed;
+    top: 300px;
+    left: 300px;
+    width: 200px;
+    height: 200px;
+
+    border: none;
+    background-color: green;
+}
+
+.translate {
+    transform: translateX(0px);
+}
+
+#child {
+    position: fixed;
+}
+
+.container {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 600px;
+    height: 600px;
+    z-index: 1;
+}
+</style>
+</head>
+<body>
+<div class="container">
+    <div class="back"></div>
+    <div id="parent">
+      <div id="child"></div>
+    </div>
+</div>
+
+<script type="text/javascript">
+function doTest() {
+  document.getElementById("parent").classList.add("translate");
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+
+// setTimeout(doTest, 1000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1436189-1-ref.html b/layout/reftests/display-list/1436189-1-ref.html
new file mode 100644
index 0000000000..d97cc1e835
--- /dev/null
+++ b/layout/reftests/display-list/1436189-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+<body>
+<div style="opacity:0.5" id="hi">
+  <div style="position:fixed; width:200px; height:200px; background-color:blue"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1436189-1.html b/layout/reftests/display-list/1436189-1.html
new file mode 100644
index 0000000000..96c1dd2e23
--- /dev/null
+++ b/layout/reftests/display-list/1436189-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<body>
+<div style="opacity:0.5" id="hi">
+  <div style="position:fixed; width:200px; height:200px; background-color:blue"></div>
+</div>
+
+<script>
+
+function doTest()
+{
+  var opacityElement = document.getElementById("hi");
+  opacityElement.style.left = '100px';
+  document.documentElement.removeAttribute("class");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1437374-1-ref.html b/layout/reftests/display-list/1437374-1-ref.html
new file mode 100644
index 0000000000..f7c40e2c5e
--- /dev/null
+++ b/layout/reftests/display-list/1437374-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:500px; border:2px solid black">
+    <div style="height:450px"></div>
+    <div style="height:50px; background:purple"></div>
+  </div>
+</html>
diff --git a/layout/reftests/display-list/1437374-1.html b/layout/reftests/display-list/1437374-1.html
new file mode 100644
index 0000000000..bce8597f6d
--- /dev/null
+++ b/layout/reftests/display-list/1437374-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll class="reftest-wait reftest-snapshot-all">
+<body>
+<div style="width:400px; height:500px; overflow: scroll; scrollbar-width: none; border:2px solid black"
+     reftest-displayport-x="0" reftest-displayport-y="0"
+     reftest-displayport-w="800" reftest-displayport-h="2000"
+     reftest-async-scroll-x="0" reftest-async-scroll-y="50">
+  <div style="height:500px"></div>
+  <div style="height:100px; background-color:red" id="scrolled"></div>
+</div>
+<script>
+
+function doTest()
+{
+  var scrolled = document.getElementById("scrolled");
+  scrolled.style.backgroundColor = "purple";
+  document.documentElement.setAttribute("class", "reftest-snapshot-all");
+}
+
+document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1439809-1-ref.html b/layout/reftests/display-list/1439809-1-ref.html
new file mode 100644
index 0000000000..9841512362
--- /dev/null
+++ b/layout/reftests/display-list/1439809-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+  div {
+    width: 200px;
+    height: 200px;
+  }
+  #one {
+    background-color: green;
+  }
+  #two {
+    background-color: red;
+  }
+  #three {
+    position: absolute;
+    width: 500px;
+    height: 500px;
+    top: 0px;
+    background-color: rgba(255,0,255,0.2);
+  }
+</style>
+</head>
+<body>
+  <div id="one"></div>
+  <div id="two"></div>
+  <div id="three"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1439809-1.html b/layout/reftests/display-list/1439809-1.html
new file mode 100644
index 0000000000..97e0006a99
--- /dev/null
+++ b/layout/reftests/display-list/1439809-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width: 200px;
+    height: 200px;
+  }
+  #one {
+    background-color: green;
+    visibility: hidden;
+  }
+  #two {
+    background-color: red;
+  }
+  #three {
+    position: absolute;
+    width: 500px;
+    height: 500px;
+    top: 0px;
+    background-color: rgba(0,0,255,0.2);
+  }
+</style>
+</head>
+<body>
+  <div id="one"></div>
+  <div id="two"></div>
+  <div id="three"></div>
+  <script>
+    function doTest2() {
+      document.getElementById("three").style.backgroundColor = "rgba(255,0,255,0.2)";
+      document.documentElement.removeAttribute('class');
+    }
+    function doTest() {
+      document.getElementById("one").style.visibility = "visible";
+      window.requestAnimationFrame(function() { window.requestAnimationFrame(doTest2); });
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1443027-1.html b/layout/reftests/display-list/1443027-1.html
new file mode 100644
index 0000000000..703b0b0501
--- /dev/null
+++ b/layout/reftests/display-list/1443027-1.html
@@ -0,0 +1,93 @@
+<!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>Bug 1443027 - Test merging across multiple paints</title>
+
+<style>
+
+body { opacity: 0.9; }
+
+div {
+  position: absolute;
+}
+
+#A {
+  left: 250px;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+#B {
+  left: 200px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: yellow;
+}
+
+#C {
+  left: 0px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+#D {
+  left: 80px;
+  top: 20px;
+  width: 140px;
+  height: 100px;
+  background-color: blue;
+}
+
+</style>
+</head>
+<body>
+<div id="A"></div>
+<div id="B"></div>
+<div id="C"></div>
+<div id="D"></div>
+
+<script>
+
+var A = document.getElementById("A");
+var B = document.getElementById("B");
+var C = document.getElementById("C");
+var D = document.getElementById("D");
+
+A.style.visibility = "hidden";
+B.style.visibility = "hidden";
+C.style.visibility = "hidden";
+D.style.visibility = "hidden";
+
+window.addEventListener("MozReftestInvalidate", step1);
+
+function step1() {
+  C.style.visibility = "visible";
+  C.style.transform = "translatez(1px)";
+  D.style.visibility = "visible";
+  D.style.transform = "translatez(1px)";
+
+  window.requestAnimationFrame(function() { window.requestAnimationFrame(step2); });
+}
+
+function step2() {
+  A.style.visibility = "visible";
+  A.style.transform = "translatez(1px)";
+  B.style.visibility = "visible";
+  B.style.transform = "translatez(1px)";
+
+  window.requestAnimationFrame(step3);
+}
+
+function step3() {
+  D.style.visibility = "hidden";
+  D.style.transform = "";
+  document.documentElement.removeAttribute('class');
+}
+
+</script>
+</body></html>
diff --git a/layout/reftests/display-list/1443027-2.html b/layout/reftests/display-list/1443027-2.html
new file mode 100644
index 0000000000..55a632ab1d
--- /dev/null
+++ b/layout/reftests/display-list/1443027-2.html
@@ -0,0 +1,93 @@
+<!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>Bug 1443027 - Test merging across multiple paints</title>
+
+<style>
+
+body { opacity: 0.9; }
+
+div {
+  position: absolute;
+}
+
+#A {
+  left: 250px;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+#B {
+  left: 200px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: yellow;
+}
+
+#C {
+  left: 0px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+#D {
+  left: 80px;
+  top: 20px;
+  width: 140px;
+  height: 100px;
+  background-color: blue;
+}
+
+</style>
+</head>
+<body>
+<div id="A"></div>
+<div id="B"></div>
+<div id="C"></div>
+<div id="D"></div>
+
+<script>
+
+var A = document.getElementById("A");
+var B = document.getElementById("B");
+var C = document.getElementById("C");
+var D = document.getElementById("D");
+
+A.style.visibility = "hidden";
+B.style.visibility = "hidden";
+C.style.visibility = "hidden";
+D.style.visibility = "hidden";
+
+window.addEventListener("MozReftestInvalidate", step1);
+
+function step1() {
+  A.style.visibility = "visible";
+  A.style.transform = "translatez(1px)";
+  B.style.visibility = "visible";
+  B.style.transform = "translatez(1px)";
+  D.style.visibility = "visible";
+  D.style.transform = "translatez(1px)";
+
+  window.requestAnimationFrame(function() { window.requestAnimationFrame(step2); });
+}
+
+function step2() {
+  C.style.visibility = "visible";
+  C.style.transform = "translatez(1px)";
+
+  window.requestAnimationFrame(step3);
+}
+
+function step3() {
+  D.style.visibility = "hidden";
+  D.style.transform = "";
+  document.documentElement.removeAttribute('class');
+}
+
+</script>
+</body></html>
diff --git a/layout/reftests/display-list/1443027-3-ref.html b/layout/reftests/display-list/1443027-3-ref.html
new file mode 100644
index 0000000000..1b04963a30
--- /dev/null
+++ b/layout/reftests/display-list/1443027-3-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
+<title>Bug 1443027 - Test merging across multiple paints</title>
+
+<style>
+
+body { opacity: 0.9; }
+
+div {
+  position: absolute;
+  transform: translatez(1px);
+}
+
+#A {
+  left: 250px;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+#B {
+  left: 200px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: yellow;
+}
+
+#C {
+  left: 0px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+#D {
+  left: 80px;
+  top: 20px;
+  width: 140px;
+  height: 100px;
+  background-color: blue;
+}
+
+</style>
+</head>
+<body>
+<div id="A"></div>
+<div id="B"></div>
+<div id="D"></div>
+<div id="C"></div>
+</body></html>
diff --git a/layout/reftests/display-list/1443027-3.html b/layout/reftests/display-list/1443027-3.html
new file mode 100644
index 0000000000..87972a5941
--- /dev/null
+++ b/layout/reftests/display-list/1443027-3.html
@@ -0,0 +1,91 @@
+<!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>Bug 1443027 - Test merging across multiple paints</title>
+
+<style>
+
+body { opacity: 0.9; }
+
+div {
+  position: absolute;
+}
+
+#A {
+  left: 250px;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+#B {
+  left: 200px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: yellow;
+}
+
+#C {
+  left: 0px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+#D {
+  left: 80px;
+  top: 20px;
+  width: 140px;
+  height: 100px;
+  background-color: blue;
+}
+
+</style>
+</head>
+<body>
+<div id="A"></div>
+<div id="B"></div>
+<div id="D"></div>
+<div id="C"></div>
+
+<script>
+
+var A = document.getElementById("A");
+var B = document.getElementById("B");
+var C = document.getElementById("C");
+var D = document.getElementById("D");
+
+A.style.visibility = "hidden";
+B.style.visibility = "hidden";
+C.style.visibility = "hidden";
+D.style.visibility = "hidden";
+
+window.addEventListener("MozReftestInvalidate", step1);
+
+function step1() {
+  A.style.visibility = "visible";
+  A.style.transform = "translatez(1px)";
+
+  window.requestAnimationFrame(function() { window.requestAnimationFrame(step2); });
+}
+
+function step2() {
+  C.style.visibility = "visible";
+  C.style.transform = "translatez(1px)";
+  D.style.visibility = "visible";
+  D.style.transform = "translatez(1px)";
+
+  window.requestAnimationFrame(step3);
+}
+
+function step3() {
+  B.style.visibility = "visible";
+  B.style.transform = "translatez(1px)";
+  document.documentElement.removeAttribute('class');
+}
+
+</script>
+</body></html>
diff --git a/layout/reftests/display-list/1443027-ref.html b/layout/reftests/display-list/1443027-ref.html
new file mode 100644
index 0000000000..13f9f825c5
--- /dev/null
+++ b/layout/reftests/display-list/1443027-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8">
+<title>Bug 1443027 - Test merging across multiple paints</title>
+
+<style>
+
+body { opacity: 0.9; }
+
+div {
+  position: absolute;
+  transform: translatez(1px);
+}
+
+#A {
+  left: 250px;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+#B {
+  left: 200px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: yellow;
+}
+
+#C {
+  left: 0px;
+  top: 0px;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+</style>
+</head>
+<body>
+<div id="A"></div>
+<div id="B"></div>
+<div id="C"></div>
+</body></html>
diff --git a/layout/reftests/display-list/1451971-1.html b/layout/reftests/display-list/1451971-1.html
new file mode 100644
index 0000000000..fd8bd8561e
--- /dev/null
+++ b/layout/reftests/display-list/1451971-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width: 200px;
+    height: 200px;
+  }
+  .sort-marker {
+    position: fixed;
+    background-color: green;
+  }
+  .inner {
+    position: absolute;
+    background-color: blue;
+  }
+</style>
+</head>
+<body>
+
+<div class="sort-marker"></div>
+<div style="perspective: 200px">
+  <div class="inner" style="left: 5px; top: 5px;"></div>
+  <div class="inner" id="move" style="left: 220px;"></div>
+</div>
+<div class="sort-marker" style="left: 20px; top: 20px;"></div>
+
+<script>
+  function doTest() {
+    document.getElementById("move").style.left = "221px";
+    document.documentElement.removeAttribute('class');
+  }
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1451971-ref.html b/layout/reftests/display-list/1451971-ref.html
new file mode 100644
index 0000000000..e205ed9009
--- /dev/null
+++ b/layout/reftests/display-list/1451971-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  div {
+    width: 200px;
+    height: 200px;
+  }
+  .sort-marker {
+    position: fixed;
+    background-color: green;
+  }
+  .inner {
+    position: absolute;
+    background-color: blue;
+  }
+</style>
+</head>
+<body>
+
+<div class="sort-marker"></div>
+<div style="perspective: 200px">
+  <div class="inner" style="left: 5px; top: 5px;"></div>
+  <div class="inner" id="move" style="left: 221px;"></div>
+</div>
+<div class="sort-marker" style="left: 20px; top: 20px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/display-list/1452805-1.html b/layout/reftests/display-list/1452805-1.html
new file mode 100644
index 0000000000..d797b5e36b
--- /dev/null
+++ b/layout/reftests/display-list/1452805-1.html
@@ -0,0 +1,39 @@
+<html class="reftest-wait">
+  <head>
+    <style>
+    div {
+      width: 200px;
+      height: 200px;
+      background-color: blue;
+      filter: greyscale(50%);
+      position: relative;
+    }
+    #second {
+      width: 600px;
+      height: 500px;
+      display: none;
+      background-color: green;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="top" style="z-index:-4;"></div>
+    <div style="top: 10px;"></div>
+    <div style="top: 20px;">
+        <div id="second" style="top: -400px;"></div>
+    </div>
+
+    <script>
+      function doTest2() {
+        document.getElementById("second").style.display = "block";
+        document.documentElement.removeAttribute("class");
+      }
+      function doTest() {
+        document.getElementById("top").style.zIndex = -5;
+        setTimeout(doTest2, 500);
+      }
+      document.addEventListener("MozReftestInvalidate", doTest);
+    </script>
+  </body>
+</html>
+
diff --git a/layout/reftests/display-list/1452805-ref.html b/layout/reftests/display-list/1452805-ref.html
new file mode 100644
index 0000000000..30d9c4a21c
--- /dev/null
+++ b/layout/reftests/display-list/1452805-ref.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <style>
+    div {
+      width: 200px;
+      height: 200px;
+      background-color: blue;
+      filter: greyscale(50%);
+      position: relative;
+    }
+    #second {
+      width: 600px;
+      height: 500px;
+      background-color: green;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="top" style="z-index:-4;"></div>
+    <div style="top: 10px;"></div>
+    <div style="top: 20px;">
+        <div id="second" style="top: -400px;"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/display-list/1453541-1.html b/layout/reftests/display-list/1453541-1.html
new file mode 100644
index 0000000000..509da8c70d
--- /dev/null
+++ b/layout/reftests/display-list/1453541-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<body>
+
+<div id="empty" style="position:fixed; z-index: 4; left:200px; top:200px; width: 0px">
+  <div style="position:fixed; width:400px; height: 400px; background-color:green; top: 200px; left: 200px"></div>
+</div>
+<div style="width:400px; height: 400px; background-color:blue"></div>
+
+<script>
+  function doTest() {
+    document.getElementById("empty").style.left = "201px";
+    document.documentElement.removeAttribute("class");
+  }
+  document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1453541-2.html b/layout/reftests/display-list/1453541-2.html
new file mode 100644
index 0000000000..897945fec0
--- /dev/null
+++ b/layout/reftests/display-list/1453541-2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<body>
+
+<div id="empty" style="position:relative; z-index: 4; left:192px; top:192px; width: 0px">
+  <div style="position:fixed; width:400px; height: 400px; background-color:green; top: 200px; left: 200px"></div>
+</div>
+<div style="width:400px; height: 400px; background-color:blue"></div>
+
+<script>
+  function doTest() {
+    document.getElementById("empty").style.left = "193px";
+    document.documentElement.removeAttribute("class");
+  }
+  document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1453541-ref.html b/layout/reftests/display-list/1453541-ref.html
new file mode 100644
index 0000000000..a920976907
--- /dev/null
+++ b/layout/reftests/display-list/1453541-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<div id="empty" style="position:fixed; z-index: 4; left:200px; top:200px; width: 0px">
+  <div style="position:fixed; width:400px; height: 400px; background-color:green"></div>
+</div>
+<div style="width:400px; height: 400px; background-color:blue"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/display-list/1461231-1.html b/layout/reftests/display-list/1461231-1.html
new file mode 100644
index 0000000000..3dfb1698ac
--- /dev/null
+++ b/layout/reftests/display-list/1461231-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<head>
+<style>
+  #test {
+    background: #050;
+    position: fixed;
+    width: 200px;
+    height: 200px;
+  }
+</style>
+</head>
+<body>
+<p id="test" onclick="this.remove()"></p>
+</body>
+<script>
+  function doTest() {
+    document.getElementById("test").remove();
+    document.documentElement.removeAttribute('class');
+  }
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/1464288-1.html b/layout/reftests/display-list/1464288-1.html
new file mode 100644
index 0000000000..03f93f7d8e
--- /dev/null
+++ b/layout/reftests/display-list/1464288-1.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="400"
+      class="reftest-wait">
+<head>
+
+<style>
+
+html {
+  scrollbar-width: none;
+}
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+div {
+  left: 200px;
+  top: 200px;
+  width: 200px;
+  height: 200px;
+}
+
+.scrolled {
+  position: absolute;
+  z-index: 1;
+}
+
+.fixed {
+  position: fixed;
+  background-color: red;
+}
+
+</style>
+</head>
+<body>
+
+<div style="opacity:0.5">
+  <div class="scrolled" style="top: 200px; background-color: green"></div>
+  <div class="scrolled" style="top: 600px; background-color:blue" id="scrolled"></div>
+  <div class="fixed" style="top: 200px"></div>
+  <div class="fixed" id="fixed" style="top: 200px; width: 100px; height: 100px; z-index: 2; background-color: orange"></div>
+</div>
+
+</body>
+
+<script>
+function doTest() {
+  document.getElementById("fixed").style.backgroundColor = "red";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/1464288-ref.html b/layout/reftests/display-list/1464288-ref.html
new file mode 100644
index 0000000000..29f0fcf752
--- /dev/null
+++ b/layout/reftests/display-list/1464288-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+  margin: 0;
+}
+
+div {
+  left: 200px;
+  top: 200px;
+  position:absolute;
+}
+</style>
+</head>
+<body>
+<div style="opacity:0.5; position:static">
+  <div style="width: 200px; height: 200px; background-color: blue;"></div>
+  <div style="width: 100px; height: 100px; background-color: red;"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1482403-1-ref.html b/layout/reftests/display-list/1482403-1-ref.html
new file mode 100644
index 0000000000..f083bcdaa9
--- /dev/null
+++ b/layout/reftests/display-list/1482403-1-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Bug 1482403</title>
+    <style type="text/css">
+    #col2 {
+        display: inline-block;
+        height: 35px;
+        background: orange;
+        filter: sepia(0.2);
+    }
+
+    #subnav {
+        display: block;
+        position: absolute;
+        top: 25px;
+        left: 0;
+    }
+    </style>
+</head>
+
+<body>
+    <div>Column 1</div>
+    <div id="col2">Column 2
+        <div id="subnav" style="">
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1482403-1.html b/layout/reftests/display-list/1482403-1.html
new file mode 100644
index 0000000000..b973507026
--- /dev/null
+++ b/layout/reftests/display-list/1482403-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Bug 1482403</title>
+    <style type="text/css">
+    #col2 {
+        display: inline-block;
+        height: 35px;
+        background: orange;
+        filter: sepia(0.2);
+    }
+
+    #subnav {
+        display: none;
+        position: absolute;
+        top: 25px;
+        left: 0;
+    }
+    </style>
+    <script type="text/javascript">
+    function doTest() {
+      var col2 = document.getElementById('col2');
+      var subnav = document.getElementById('subnav');
+      subnav.style.display = 'block';
+      document.documentElement.className = "";
+    }
+
+    window.addEventListener("MozReftestInvalidate", doTest);
+    </script>
+</head>
+
+<body>
+    <div>Column 1</div>
+    <div id="col2">Column 2
+        <div id="subnav" style="">
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1504233-1-ref.html b/layout/reftests/display-list/1504233-1-ref.html
new file mode 100644
index 0000000000..8cdd9d0172
--- /dev/null
+++ b/layout/reftests/display-list/1504233-1-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1504233</title>
+  <style type="text/css">
+    body {
+      margin: 0 0;
+    }
+
+    #wrapper {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    #header {
+      background: green;
+      flex: 0 0 200px;
+    }
+
+    #container {
+      overflow: scroll;
+      will-change: transform;
+      flex: 0 1 auto;
+      scrollbar-width: none;
+    }
+
+    #bg {
+      background: green;
+      height: 1700px;
+    }
+  </style>
+</head>
+<body>
+<div id="wrapper">
+  <div id="header"></div>
+  <div id="container">
+    <div id="bg"></div>
+  </div>
+</div>
+<script type="text/javascript">
+document.getElementById("container").scrollTop = 200;
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1504233-1.html b/layout/reftests/display-list/1504233-1.html
new file mode 100644
index 0000000000..598869d38e
--- /dev/null
+++ b/layout/reftests/display-list/1504233-1.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <meta charset="utf-8">
+  <title>Testcase for bug 1504233</title>
+  <style type="text/css">
+    body {
+      margin: 0 0;
+    }
+
+    #wrapper {
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    #header {
+      background: blue;
+      flex: 0 0 200px;
+    }
+
+    #container {
+      overflow: scroll;
+      will-change: transform;
+      flex: 0 1 auto;
+      scrollbar-width: none;
+    }
+
+    #red {
+      background: red;
+      height: 200px;
+    }
+
+    #bg {
+      background: green;
+      height: 1500px;
+    }
+  </style>
+</head>
+<body>
+<div id="wrapper">
+  <div id="header"></div>
+  <div id="container">
+    <div id="red"></div>
+    <div id="bg"></div>
+  </div>
+</div>
+<script type="text/javascript">
+document.getElementById("container").scrollTop = 200;
+
+function doTest() {
+  var e = document.getElementById("header");
+  e.style.background = "green";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1533317-1-ref.html b/layout/reftests/display-list/1533317-1-ref.html
new file mode 100644
index 0000000000..989dde6dc8
--- /dev/null
+++ b/layout/reftests/display-list/1533317-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+  <head>
+    <style>
+    div {
+      width: 400px;
+      height: 200px;
+      background-color: green;
+    }
+
+    </style>
+  </head>
+  <body>
+      <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/display-list/1533317-1.html b/layout/reftests/display-list/1533317-1.html
new file mode 100644
index 0000000000..9f34a865ba
--- /dev/null
+++ b/layout/reftests/display-list/1533317-1.html
@@ -0,0 +1,32 @@
+<html class="reftest-wait">
+  <head>
+    <style>
+    div {
+      width: 200px;
+      height: 200px;
+    }
+    .positioned {
+      position: absolute;
+      top: 0px;
+      left: 200px;
+      background-color: green;
+    }
+    .outer {
+      position: relative;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div id="test"></div>
+      <div class="positioned"></div>
+    </div>
+    <script>
+      function doTest() {
+        document.getElementById("test").style.backgroundColor = "green";
+        document.documentElement.removeAttribute("class");
+      }
+      document.addEventListener("MozReftestInvalidate", doTest);
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/display-list/1544948-1-ref.html b/layout/reftests/display-list/1544948-1-ref.html
new file mode 100644
index 0000000000..0086df752c
--- /dev/null
+++ b/layout/reftests/display-list/1544948-1-ref.html
@@ -0,0 +1,32 @@
+<html>
+<head>
+<style>
+  div {
+    width:10px;
+    height:10px;
+    background-color:green;
+    display: inline-block;
+    position: relative;
+  }
+  #wrapper {
+    opacity: 0.5;
+    width: 200px;
+    height: 200px;
+    background-color: transparent;
+  }
+
+  #first {
+    z-index: 1;
+  }
+
+  #second {
+    background-color: blue;
+  }
+</style>
+</head>
+<body id="body">
+  <div id="wrapper">
+    <div id="first" class="reftest-no-display-list"></div><div id="second" class="reftest-no-display-list"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1544948-1.html b/layout/reftests/display-list/1544948-1.html
new file mode 100644
index 0000000000..f8d1609faf
--- /dev/null
+++ b/layout/reftests/display-list/1544948-1.html
@@ -0,0 +1,43 @@
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width:10px;
+    height:10px;
+    background-color:green;
+    display: inline-block;
+    position: relative;
+  }
+  #wrapper {
+    opacity: 0.5;
+    width: 200px;
+    height: 200px;
+    background-color: transparent;
+  }
+
+  #first {
+    z-index: 1;
+  }
+</style>
+<script>
+function doTest2() {
+  var elem = document.getElementById("second");
+  elem.style.backgroundColor = "blue";
+}
+
+function doTest() {
+  var elem = document.getElementById("third");
+  elem.parentNode.removeChild(elem);
+  document.documentElement.removeAttribute("class");
+  requestAnimationFrame(doTest2);
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body id="body">
+  <div id="wrapper">
+    <div id="first" class="reftest-no-display-list"></div><div id="second"></div><div id="third"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1551053-1-ref.html b/layout/reftests/display-list/1551053-1-ref.html
new file mode 100644
index 0000000000..3e9f12e81e
--- /dev/null
+++ b/layout/reftests/display-list/1551053-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.will-merge {
+  opacity: 0.5;
+}
+</style>
+</head>
+
+<body>
+<span class="will-merge">bar<br>baz</span>
+<span>qux</span>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1551053-1.html b/layout/reftests/display-list/1551053-1.html
new file mode 100644
index 0000000000..700d5ba1d7
--- /dev/null
+++ b/layout/reftests/display-list/1551053-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<style>
+.will-merge {
+  opacity: 0.5;
+}
+</style>
+</head>
+
+<body>
+<span id="foo">foo</span>
+<span class="will-merge">bar<br>baz</span>
+<span>qux</span>
+<script type="text/javascript">
+function doTest() {
+  var e = document.getElementById("foo");
+  e.parentNode.removeChild(e);
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+setTimeout(doTest, 5000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1553828-1-ref.html b/layout/reftests/display-list/1553828-1-ref.html
new file mode 100644
index 0000000000..9079b62abc
--- /dev/null
+++ b/layout/reftests/display-list/1553828-1-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Bug 1553828</title>
+    <style type="text/css">
+    .container {
+        transform-style: preserve-3d;
+        perspective: 1000px;
+        width: 500px;
+        background-color: white;
+    }
+
+    .child {
+        width: 500px;
+        height: 500px;
+        background-color: red;
+        transform: translateY(0px);
+        mix-blend-mode: difference;
+    }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="child"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/layout/reftests/display-list/1553828-1.html b/layout/reftests/display-list/1553828-1.html
new file mode 100644
index 0000000000..feaea66c20
--- /dev/null
+++ b/layout/reftests/display-list/1553828-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Bug 1553828</title>
+    <style type="text/css">
+    .container {
+        transform-style: preserve-3d;
+        perspective: 1000px;
+        width: 500px;
+        background-color: white;
+    }
+
+    .child {
+        width: 500px;
+        height: 500px;
+        background-color: blue;
+        transform: translateY(0px);
+        mix-blend-mode: difference;
+    }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="child"></div>
+    </div>
+    <script type="text/javascript">
+    function doTest() {
+        document.querySelector(".child").style["background-color"] = "red";
+        document.documentElement.className = "";
+    }
+    window.addEventListener("MozReftestInvalidate", doTest);
+    // setTimeout(doTest, 5000);
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/layout/reftests/display-list/1619370-1-ref.html b/layout/reftests/display-list/1619370-1-ref.html
new file mode 100644
index 0000000000..38524f2ed7
--- /dev/null
+++ b/layout/reftests/display-list/1619370-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.5">
+<head>
+    <meta charset="UTF-8">
+    <title>Testcase for bug 1619370</title>
+    <style>
+    html, body {
+        padding: 0;
+        margin: 0;
+    }
+
+    html {
+        background-color: blue;
+    }
+    </style>
+</head>
+<body>
+    <iframe width="500" height="500" scrolling="no" frameborder="0" src="1619370-iframe.html"></iframe>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1619370-1.html b/layout/reftests/display-list/1619370-1.html
new file mode 100644
index 0000000000..afc671c8e5
--- /dev/null
+++ b/layout/reftests/display-list/1619370-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.5" class="reftest-wait">
+<head>
+    <meta charset="UTF-8">
+    <title>Testcase for bug 1619370</title>
+    <style>
+    html, body {
+        padding: 0;
+        margin: 0;
+    }
+
+    html {
+        background-color: red;
+    }
+    </style>
+</head>
+<body>
+    <iframe width="500" height="500" scrolling="no" frameborder="0" src="data:text/html,
+    <div style='background-color: green; width: 100px; height: 100px; position: fixed; top: 495px;'></div>">
+    </iframe>
+
+    <script type="text/javascript">
+    function doTest() {
+        document.documentElement.style["background-color"] = "blue";
+        document.documentElement.classList.remove("reftest-wait");
+    }
+
+    window.addEventListener("MozReftestInvalidate", doTest);
+    </script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1619370-iframe.html b/layout/reftests/display-list/1619370-iframe.html
new file mode 100644
index 0000000000..4bf485f876
--- /dev/null
+++ b/layout/reftests/display-list/1619370-iframe.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Testcase for bug 1619370</title>
+    <style>
+    #content {
+        background-color: green;
+        width: 100px;
+        height: 100px;
+        position: fixed;
+        top: 495px;
+    }
+    </style>
+</head>
+<body>
+    <div id="content"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1677568-1-ref.html b/layout/reftests/display-list/1677568-1-ref.html
new file mode 100644
index 0000000000..6b80c45207
--- /dev/null
+++ b/layout/reftests/display-list/1677568-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+		<style>
+			a:hover { color: rgb(0, 86, 179); }
+			.d-relative { position: relative; }
+			.d-inline { display: inline;}
+			.d-flex { display: flex; }
+		</style>
+	</head>
+	<body>
+		<div class="d-flex">
+			<div>
+				<div class="d-inline d-relative">
+					<a href="#">
+						--
+					</a>
+					<div style="position: absolute; transform: translate(0px, 160px);">
+						<a style="color: rgb(0, 86, 179);" href="#">i vanish on-hover in Firefox</a>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+</body></html>
diff --git a/layout/reftests/display-list/1677568-1.html b/layout/reftests/display-list/1677568-1.html
new file mode 100644
index 0000000000..e876692b51
--- /dev/null
+++ b/layout/reftests/display-list/1677568-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+		<style>
+			a:hover { color: rgb(0, 86, 179); }
+			.d-relative { position: relative; }
+			.d-inline { display: inline;}
+			.d-flex { display: flex; }
+		</style>
+	</head>
+	<body>
+		<div class="d-flex">
+			<div>
+				<div class="d-inline d-relative">
+					<a href="#">
+						--
+					</a>
+					<div style="position: absolute; transform: translate(0px, 160px);">
+						<a id="target" href="#">i vanish on-hover in Firefox</a>
+					</div>
+				</div>
+			</div>
+		</div>
+
+<script>
+	function doTest() {
+		var elem = document.getElementById("target");
+		elem.style.color = "rgb(0, 86, 179)";
+		document.documentElement.removeAttribute("class");
+	}
+	document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+
+</body></html>
diff --git a/layout/reftests/display-list/1709452-1.html b/layout/reftests/display-list/1709452-1.html
new file mode 100644
index 0000000000..f9fb28cbca
--- /dev/null
+++ b/layout/reftests/display-list/1709452-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+    <meta charset="UTF-8">
+    <style>
+    a {
+        color: rgb(255, 0, 0);
+    }
+    </style>
+</head>
+
+<body>
+    <div style="display: flex;">
+        <div style="display: block;">
+            <div style="display: inline; filter: invert(0);">
+                <a href="#">
+                    <span>FOO</span>
+                </a>
+                <div style="position: absolute; top: 100px; left: 100px;">
+                    <a id="bar" href="#">BAR</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+    function doTest() {
+      const bar = document.getElementById('bar');
+      bar.style.color = 'rgb(0, 255, 0)';
+      document.documentElement.removeAttribute('class');
+    }
+    document.addEventListener("MozReftestInvalidate", doTest, false);
+    </script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1709452-ref.html b/layout/reftests/display-list/1709452-ref.html
new file mode 100644
index 0000000000..1def95c7b6
--- /dev/null
+++ b/layout/reftests/display-list/1709452-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+    a {
+        color: rgb(255, 0, 0);
+    }
+    </style>
+</head>
+
+<body>
+    <div style="display: flex;">
+        <div style="display: block;">
+            <div style="display: inline; filter: invert(0);">
+                <a href="#">
+                    <span>FOO</span>
+                </a>
+                <div style="position: absolute; top: 100px; left: 100px;">
+                    <a id="bar" style="color:rgb(0, 255, 0)" href="#">BAR</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1719346-1-ref.html b/layout/reftests/display-list/1719346-1-ref.html
new file mode 100644
index 0000000000..67ba46d098
--- /dev/null
+++ b/layout/reftests/display-list/1719346-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+.main {
+	border-image: url('1719346-1.gif') 16 fill / 16px / 0 repeat;
+	width: 100px;
+	height: 100px;
+}
+
+#mover {
+	position: fixed;
+	padding: 0;
+	margin: 0;
+	bottom: 0;
+	top: 100px;
+	left: 250px;
+}
+</style>
+</head>
+<body>
+<div class="main"></div>
+<div id="mover">text</div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/1719346-1.gif b/layout/reftests/display-list/1719346-1.gif
new file mode 100644
index 0000000000..82cf13d4a2
Binary files /dev/null and b/layout/reftests/display-list/1719346-1.gif differ
diff --git a/layout/reftests/display-list/1719346-1.html b/layout/reftests/display-list/1719346-1.html
new file mode 100644
index 0000000000..28508c9039
--- /dev/null
+++ b/layout/reftests/display-list/1719346-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<head>
+<style>
+.main {
+	border-image: url('1719346-1.gif') 16 fill / 16px / 0 repeat;
+	width: 100px;
+	height: 100px;
+}
+
+#mover {
+	position: fixed;
+	padding: 0;
+	margin: 0;
+	bottom: 0;
+	top: 250px;
+	left: 250px;
+}
+</style>
+</head>
+<body>
+<div class="main"></div>
+<div id="mover">text</div>
+
+<script>
+	function doTest() {
+		var elem = document.getElementById("mover");
+		elem.style.top = "100px";
+		document.documentElement.removeAttribute("class");
+	}
+	document.addEventListener("MozReftestInvalidate", doTest);
+	setTimeout(doTest, 5000);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/display-list/invalidated-blendmode-sorting-ref.html b/layout/reftests/display-list/invalidated-blendmode-sorting-ref.html
new file mode 100644
index 0000000000..9ba08744f7
--- /dev/null
+++ b/layout/reftests/display-list/invalidated-blendmode-sorting-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  div {
+    width: 200px;
+    height: 200px;
+  }
+  .sort-marker {
+    position: fixed;
+    background-color: green;
+  }
+  .wrapper {
+    position: absolute;
+    isolation: isolate;
+  }
+  .inner {
+    position: absolute;
+    background-color: blue;
+  }
+</style>
+</head>
+<body>
+  <div class="sort-marker"></div>
+  <div class="wrapper">
+    <div class="inner" style="left: 5px; top: 5px; mix-blend-mode:screen"></div>
+    <div class="inner" id="move" style="left: 221px;"></div>
+  </div>
+  <div class="sort-marker" style="left: 20px; top: 20px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/invalidated-blendmode-sorting.html b/layout/reftests/display-list/invalidated-blendmode-sorting.html
new file mode 100644
index 0000000000..cd42694d6e
--- /dev/null
+++ b/layout/reftests/display-list/invalidated-blendmode-sorting.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width: 200px;
+    height: 200px;
+  }
+  .sort-marker {
+    position: fixed;
+    background-color: green;
+  }
+  .wrapper {
+    position: absolute;
+    isolation: isolate;
+  }
+  .inner {
+    position: absolute;
+    background-color: blue;
+  }
+</style>
+</head>
+<body>
+  <div class="sort-marker"></div>
+  <div class="wrapper">
+    <div class="inner" style="left: 5px; top: 5px; mix-blend-mode:screen"></div>
+    <div class="inner" id="move" style="left: 220px;"></div>
+  </div>
+  <div class="sort-marker" style="left: 20px; top: 20px;"></div>
+</body>
+<script>
+  function doTest() {
+    document.getElementById("move").style.left = "221px";
+    document.documentElement.removeAttribute("class");
+  }
+  document.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/reftest.list b/layout/reftests/display-list/reftest.list
new file mode 100644
index 0000000000..7ac7edc4f8
--- /dev/null
+++ b/layout/reftests/display-list/reftest.list
@@ -0,0 +1,60 @@
+# These tests are testing merging RDL implementation.
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-style-change-1.html retained-dl-style-change-1-ref.html
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-frame-deleted-1.html retained-dl-style-change-1-ref.html
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-frame-created-1.html retained-dl-style-change-1-ref.html
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-style-change-stacking-context-1.html retained-dl-style-change-stacking-context-1-ref.html
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-style-change-stacking-context-2.html retained-dl-style-change-stacking-context-2-ref.html
+fails == retained-dl-style-change-stacking-context-3.html retained-dl-style-change-stacking-context-3-ref.html # bug 1650699 tracks this failure
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-style-change-stacking-context-4.html retained-dl-style-change-stacking-context-4-ref.html
+skip-if(!retainedDisplayList||retainedDisplayListNew||Android) == retained-dl-displayport-1.html retained-dl-displayport-1-ref.html
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-prerender-transform-1.html retained-dl-prerender-transform-1-ref.html
+skip-if(!retainedDisplayList||retainedDisplayListNew) == retained-dl-animation-on-pseudo.html retained-dl-animation-on-pseudo-ref.html
+#
+
+skip-if(!retainedDisplayList||!asyncPan) == retained-dl-async-scrolled-1.html retained-dl-async-scrolled-1-ref.html
+skip-if(!retainedDisplayList) == retained-dl-remove-for-ancestor-change-1.html retained-dl-remove-for-ancestor-change-1-ref.html
+skip-if(!retainedDisplayList) == retained-dl-scroll-out-of-view-1.html retained-dl-scroll-out-of-view-1-ref.html
+skip-if(!retainedDisplayList) == retained-dl-opacity-animation-on-ib-split.html retained-dl-opacity-animation-on-ib-split-ref.html
+skip-if(!retainedDisplayList) == 1544948-1.html 1544948-1-ref.html
+
+skip-if(!retainedDisplayListNew) == reuse-sc-style-change-1.html reuse-sc-style-change-1-ref.html
+skip-if(!retainedDisplayListNew) == reuse-sc-style-change-nested-1.html reuse-sc-style-change-nested-1-ref.html
+skip-if(!retainedDisplayListNew) == reuse-sc-style-change-abs-pos-1.html reuse-sc-style-change-abs-pos-1-ref.html
+skip-if(!retainedDisplayListNew) == reuse-sc-style-change-fixed-pos-1.html reuse-sc-style-change-fixed-pos-1-ref.html
+
+== retained-dl-wrap-list.html retained-dl-wrap-list-ref.html
+== retained-dl-zindex-1.html retained-dl-zindex-1-ref.html
+== retained-dl-zindex-2.html retained-dl-zindex-2-ref.html
+== retained-dl-style-change-with-prerender-transform-1.html retained-dl-style-change-with-prerender-transform-1-ref.html
+== invalidated-blendmode-sorting.html invalidated-blendmode-sorting-ref.html
+fuzzy(0-1,0-235200) == 1413073.html 1413073-ref.html
+== 1416291.html 1416291-ref.html
+== 1417601-1.html 1417601-1-ref.html
+== 1418945-1.html 1418945-1-ref.html
+skip-if(Android) == 1428993-1.html 1428993-1-ref.html
+== 1420480-1.html 1420480-1-ref.html
+== 1428993-2.html 1428993-2-ref.html
+needs-focus fuzzy(0-3,0-2) == 1429027-1.html 1429027-1-ref.html
+== 1432553-1.html 1432553-1-ref.html
+== 1432553-2.html 1432553-2-ref.html
+== 1436189-1.html 1436189-1-ref.html
+skip-if(!asyncPan) == 1437374-1.html 1437374-1-ref.html
+== 1439809-1.html 1439809-1-ref.html
+== 1443027-1.html 1443027-ref.html
+== 1443027-2.html 1443027-ref.html
+== 1443027-3.html 1443027-3-ref.html
+== 1451971-1.html 1451971-ref.html
+== 1453541-1.html 1453541-ref.html
+== 1453541-2.html 1453541-ref.html
+== 1452805-1.html 1452805-ref.html
+== 1461231-1.html about:blank
+fuzzy(0-2,0-40000) skip-if(!asyncPan) == 1464288-1.html 1464288-ref.html
+== 1482403-1.html 1482403-1-ref.html
+== 1504233-1.html 1504233-1-ref.html
+== 1533317-1.html 1533317-1-ref.html
+fuzzy-if(swgl,0-1,0-1) == 1551053-1.html 1551053-1-ref.html
+== 1553828-1.html 1553828-1-ref.html
+fuzzy-if(browserIsFission,0-1,0-300) == 1619370-1.html 1619370-1-ref.html
+== 1677568-1.html 1677568-1-ref.html
+== 1709452-1.html 1709452-ref.html
+== 1719346-1.html 1719346-1-ref.html
diff --git a/layout/reftests/display-list/retained-dl-animation-on-pseudo-ref.html b/layout/reftests/display-list/retained-dl-animation-on-pseudo-ref.html
new file mode 100644
index 0000000000..2b00ab20bd
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-animation-on-pseudo-ref.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+<style>
+body {
+  margin: 0px;
+}
+#child {
+  width:100px;
+  height:100px;
+  background-color: green;
+  display: inline-block;
+}
+
+#parent::before {
+  content: '';
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  background-color: blue;
+}
+</style>
+</head>
+<body>
+  <div id="parent">
+    <div id="child"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-animation-on-pseudo.html b/layout/reftests/display-list/retained-dl-animation-on-pseudo.html
new file mode 100644
index 0000000000..cdd641ecb9
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-animation-on-pseudo.html
@@ -0,0 +1,41 @@
+<html class="reftest-wait">
+<head>
+<style>
+body {
+  margin: 0px;
+}
+#child {
+  width:100px;
+  height:100px;
+  background-color: green;
+  display: inline-block;
+}
+
+#parent::before {
+  content: '';
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+}
+
+@keyframes anim {
+  from, to { background-color: blue; }
+}
+
+.anim::before {
+  animation: anim 100s infinite;
+}
+</style>
+</head>
+<body>
+  <div id="parent">
+    <div id="child" class="reftest-no-display-list"></div>
+  </div>
+</body>
+<script>
+window.addEventListener("MozReftestInvalidate", () => {
+  document.getElementById("parent").classList.add("anim");
+  document.documentElement.removeAttribute("class");
+});
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-async-scrolled-1-ref.html b/layout/reftests/display-list/retained-dl-async-scrolled-1-ref.html
new file mode 100644
index 0000000000..70922e0032
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-async-scrolled-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+  margin: 0;
+}
+
+div {
+  left: 200px;
+  top: 200px;
+  position:absolute;
+}
+</style>
+</head>
+<body>
+<div style="width: 200px; height: 200px; background-color: blue;"></div>
+<div style="width: 100px; height: 100px; background-color: red;"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-async-scrolled-1.html b/layout/reftests/display-list/retained-dl-async-scrolled-1.html
new file mode 100644
index 0000000000..8805b58c5d
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-async-scrolled-1.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="400"
+      class="reftest-wait">
+<head>
+
+<style>
+
+html {
+  scrollbar-width: none;
+}
+
+body {
+  margin: 0;
+  height: 4000px;
+}
+
+div {
+  left: 200px;
+  top: 200px;
+  width: 200px;
+  height: 200px;
+}
+
+.scrolled {
+  position: absolute;
+  z-index: 1;
+}
+
+.fixed {
+  position: fixed;
+  background-color: red;
+}
+
+</style>
+</head>
+<body>
+
+<div class="scrolled reftest-no-display-list" style="top: 200px; background-color: green"></div>
+<div class="scrolled" style="top: 600px;" id="scrolled"></div>
+<div class="fixed" style="top: 200px"></div>
+<div class="fixed" style="top: 200px; width: 100px; height: 100px; z-index: 2"></div>
+
+</body>
+
+<script>
+function doTest() {
+  document.getElementById("scrolled").style.backgroundColor = "blue";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-displayport-1-ref.html b/layout/reftests/display-list/retained-dl-displayport-1-ref.html
new file mode 100644
index 0000000000..54ce333d56
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-displayport-1-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+    <div id="container" style="width: 100px; height: 100px; overflow: auto;">
+    	<div id="first" style="background-color:blue; width: 10px; height: 10px;"></div>
+    	<div id="second" style="background-color:green; width: 10px; height: 10px;"></div>
+    	<div id="spacer" style="height: 200px;"></div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-displayport-1.html b/layout/reftests/display-list/retained-dl-displayport-1.html
new file mode 100644
index 0000000000..63a901394c
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-displayport-1.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait reftest-async-scroll">
+<head>
+</head>
+<body>
+    <div id="container" style="width: 100px; height: 100px; overflow: auto;"
+         reftest-displayport-x="0" reftest-displayport-y="0"
+         reftest-displayport-width="100" reftest-displayport-height="100">
+    	<div id="first" style="background-color:blue; width: 10px; height: 10px;" class="reftest-no-display-list"></div>
+    	<div id="second" style="background-color:red; width: 10px; height: 10px;"></div>
+    	<div id="spacer" style="height: 200px;"></div>
+    </div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("second").style.backgroundColor = "green";
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-frame-created-1.html b/layout/reftests/display-list/retained-dl-frame-created-1.html
new file mode 100644
index 0000000000..92b96da293
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-frame-created-1.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width:10px;
+    height:10px;
+    background-color:green;
+    display: inline-block;
+  }
+</style>
+</head>
+<body id="body">
+  <div id="first" class="reftest-no-display-list"></div>
+</body>
+<script>
+function doTest() {
+  var div = document.createElement("div");
+  var prev = document.getElementById("first");
+  prev.parentNode.insertBefore(div, prev.nextSibling);
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-frame-deleted-1.html b/layout/reftests/display-list/retained-dl-frame-deleted-1.html
new file mode 100644
index 0000000000..3c3821cdf1
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-frame-deleted-1.html
@@ -0,0 +1,24 @@
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width:10px;
+    height:10px;
+    background-color:green;
+    display: inline-block;
+  }
+</style>
+</head>
+<body id="body">
+  <div id="first" class="reftest-no-display-list"></div><div id="second" class="reftest-no-display-list"></div><div id="third"></div>
+</body>
+<script>
+function doTest() {
+  var elem = document.getElementById("third");
+  elem.parentNode.removeChild(elem);
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split-ref.html b/layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split-ref.html
new file mode 100644
index 0000000000..2fcba49a3b
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split-ref.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+<style>
+#animating {
+  opacity: 0;
+}
+</style>
+</head>
+<body>
+  <span id="animating">A <span style="display:block"></span> C</span>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split.html b/layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split.html
new file mode 100644
index 0000000000..39d8d93b19
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+<head>
+<style>
+@keyframes anim {
+  from, to { opacity: 0; }
+}
+
+.anim {
+  animation: anim 100s infinite;
+}
+</style>
+</head>
+<body>
+  <span id="animating" class="reftest-no-display-list">A <span style="display:block"></span> C</span>
+</body>
+<script>
+window.addEventListener("MozReftestInvalidate", () => {
+  document.getElementById("animating").classList.add("anim");
+  document.documentElement.removeAttribute("class");
+});
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-prerender-transform-1-ref.html b/layout/reftests/display-list/retained-dl-prerender-transform-1-ref.html
new file mode 100644
index 0000000000..a0ba644d92
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-prerender-transform-1-ref.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+<style>
+  * {
+    margin: 0px;
+    padding: 0px;
+  }
+  .inner {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    display: inline-block;
+  }
+  body {
+    overflow: hidden;
+  }
+</style>
+</head>
+<body id="body">
+  <div id="transformed" style="transform:translateX(700px);">
+      <div id="first" class="inner"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-prerender-transform-1.html b/layout/reftests/display-list/retained-dl-prerender-transform-1.html
new file mode 100644
index 0000000000..fe5214fa54
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-prerender-transform-1.html
@@ -0,0 +1,36 @@
+<html class="reftest-wait">
+<head>
+<style>
+  * {
+    margin: 0px;
+    padding: 0px;
+  }
+  .inner {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    display: inline-block;
+  }
+  #third {
+    background-color: red;
+  }
+  body {
+    overflow: hidden;
+  }
+</style>
+</head>
+<body id="body">
+  <div id="transformed" style="transform:translateX(700px); will-change:transform;">
+      <div id="first" class="reftest-no-display-list inner"></div><div id="second" class="reftest-no-display-list inner"></div><div id="third" class="reftest-display-list inner"></div>
+  </div>
+</body>
+<script>
+function doTest() {
+  var third = document.getElementById("third")
+  third.style.backgroundColor = "green";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1-ref.html b/layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1-ref.html
new file mode 100644
index 0000000000..ed86834bd5
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1-ref.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+</head>
+<body>
+    <div id="container" style="height: 40px; overflow: hidden;">
+    	<div id="spacer" style="height: 50px;"></div>
+    	<div id="second" style="background-color:red; width: 10px; height: 10px;"></div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1.html b/layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1.html
new file mode 100644
index 0000000000..0b5fd4c08f
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+<head>
+</head>
+<body>
+    <div id="container" style="height: 100px; overflow: hidden;">
+    	<div id="spacer" style="height: 50px;"></div>
+    	<div id="second" style="background-color:red; width: 10px; height: 10px;"></div>
+    </div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("container").style.height = "40px";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-scroll-out-of-view-1-ref.html b/layout/reftests/display-list/retained-dl-scroll-out-of-view-1-ref.html
new file mode 100644
index 0000000000..acfe100390
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-scroll-out-of-view-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+    <div id="container" style="height: 100px; overflow: hidden;">
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-scroll-out-of-view-1.html b/layout/reftests/display-list/retained-dl-scroll-out-of-view-1.html
new file mode 100644
index 0000000000..329a11389d
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-scroll-out-of-view-1.html
@@ -0,0 +1,18 @@
+<html class="reftest-wait">
+<head>
+</head>
+<body>
+    <div id="container" style="height: 100px; overflow: hidden;">
+    	<div id="second" style="background-color:red; width: 10px; height: 10px;"></div>
+    	<div id="spacer" style="height: 200px;"></div>
+    </div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("container").scrollTop = 100;
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-1-ref.html b/layout/reftests/display-list/retained-dl-style-change-1-ref.html
new file mode 100644
index 0000000000..8840f2c70a
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+<style>
+  div {
+    width:10px;
+    height:10px;
+    background-color:green;
+    display: inline-block;
+  }
+</style>
+</head>
+<body id="body">
+    <div id="first"></div><div id="second"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-1.html b/layout/reftests/display-list/retained-dl-style-change-1.html
new file mode 100644
index 0000000000..35e7185093
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-1.html
@@ -0,0 +1,23 @@
+<html class="reftest-wait">
+<head>
+<style>
+  div {
+    width:10px;
+    height:10px;
+    background-color:green;
+    display: inline-block;
+  }
+</style>
+</head>
+<body id="body">
+    <div id="first" class="reftest-no-display-list"></div><div id="second" style="background-color:red"></div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("second").style.backgroundColor = "green";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-1-ref.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-1-ref.html
new file mode 100644
index 0000000000..1d32684030
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-1-ref.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+  div {
+    width:200px;
+    height:200px;
+    display: inline-block;
+    position: absolute;
+  }
+</style>
+</head>
+<body>
+  <div style="background-color:green"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-1.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-1.html
new file mode 100644
index 0000000000..02cdb2dbb3
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-1.html
@@ -0,0 +1,29 @@
+<html class="reftest-wait">
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+  div {
+    width:100px;
+    height:100px;
+    display: inline-block;
+    position:absolute;
+  }
+</style>
+</head>
+<body>
+  <div id="first" style="background-color:green; width:200px; height:200px" class="reftest-no-display-list"></div>
+  <div style="transform:translateZ(1px)">
+    <div id="second" style="background-color:red"></div>
+  </div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("second").style.backgroundColor = "green";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-2-ref.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-2-ref.html
new file mode 100644
index 0000000000..056f0b2086
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-2-ref.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+  div {
+    left: 50px;
+    width:100px;
+    height:100px;
+    display: inline-block;
+    position: absolute;
+    background-color: green;
+  }
+</style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-2.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-2.html
new file mode 100644
index 0000000000..248c7e6247
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-2.html
@@ -0,0 +1,23 @@
+<html class="reftest-wait">
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+</style>
+</head>
+<body>
+  <div style="transform-origin: left top 0px; transform: translate(50px, 0px) scale(0.5);">
+    <div id="first" style="width: 100px; height: 200px; background-color: green; float: left;" class="reftest-no-display-list"></div>
+    <div id="second" style="width: 100px; height: 200px; position: absolute; transform: translate(100px, 0px); background-color: red;"></div>
+  </div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("second").style.backgroundColor = "green";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-3-ref.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-3-ref.html
new file mode 100644
index 0000000000..0da0ec14f1
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-3-ref.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+  div {
+    width:100px;
+    height:100px;
+    display: inline-block;
+    position:absolute;
+    background-color: green;
+  }
+</style>
+</head>
+<body>
+  <div></div>
+  <div style="top: 110px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-3.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-3.html
new file mode 100644
index 0000000000..a3c800862f
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-3.html
@@ -0,0 +1,29 @@
+<html class="reftest-wait">
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+  div {
+    width:100px;
+    height:100px;
+    display: inline-block;
+    position:absolute;
+  }
+</style>
+</head>
+<body>
+  <div style="position:fixed;" class="reftest-display-list">
+    <div style="background-color:green;" class="reftest-no-display-list"></div>
+  </div>
+  <div id="second" style="background-color:red; top: 110px;"></div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("second").style.backgroundColor = "green";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-4-ref.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-4-ref.html
new file mode 100644
index 0000000000..0da0ec14f1
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-4-ref.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+  div {
+    width:100px;
+    height:100px;
+    display: inline-block;
+    position:absolute;
+    background-color: green;
+  }
+</style>
+</head>
+<body>
+  <div></div>
+  <div style="top: 110px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-stacking-context-4.html b/layout/reftests/display-list/retained-dl-style-change-stacking-context-4.html
new file mode 100644
index 0000000000..a0df3a4c1e
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-stacking-context-4.html
@@ -0,0 +1,29 @@
+<html class="reftest-wait">
+<head>
+<style>
+  body {
+    margin: 0px;
+  }
+  div {
+    width:100px;
+    height:100px;
+    display: inline-block;
+    position:absolute;
+  }
+</style>
+</head>
+<body>
+  <div style="position:fixed;" class="reftest-display-list">
+    <div style="background-color:green;" class="reftest-no-display-list"></div>
+    <div id="second" style="background-color:red; top: 110px;"></div>
+  </div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("second").style.backgroundColor = "green";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1-ref.html b/layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1-ref.html
new file mode 100644
index 0000000000..81682df6f6
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style>
+.wrapper {
+  width: 810vw;
+  transform: translateX(-50%);
+  height: 90vh;
+}
+.slides {
+  will-change: transform;
+}
+.button {
+  background-color: green;
+  position: absolute;
+  left:50%;
+}
+</style>
+<div class="wrapper">
+  <div class="slides">
+    <span class="button">Add to cart</span>
+  </div>
+</div>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1.html b/layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1.html
new file mode 100644
index 0000000000..c6c31bdf5c
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style>
+.wrapper {
+  width: 810vw;
+  transform: translateX(-50%);
+  height: 90vh;
+}
+.slides {
+  will-change: transform;
+}
+.button {
+  background-color: red;
+  position: absolute;
+  left: 50%;
+}
+</style>
+<div class="wrapper">
+  <div class="slides">
+    <span class="button">Add to cart</span>
+  </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  document.querySelector(".button").style.backgroundColor = "green";
+  document.documentElement.classList.remove("reftest-wait");
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-wrap-list-ref.html b/layout/reftests/display-list/retained-dl-wrap-list-ref.html
new file mode 100644
index 0000000000..ae90e4c1ac
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-wrap-list-ref.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+<style>
+#hover {
+  background-color:blue;
+}
+</style>
+</head>
+<body>
+  <div style="float:left; width:200px; height:200px; background-color: red">
+    <div style="width:100px; height:100px; " id="hover"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-wrap-list.html b/layout/reftests/display-list/retained-dl-wrap-list.html
new file mode 100644
index 0000000000..ab0541bac9
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-wrap-list.html
@@ -0,0 +1,15 @@
+<html class="reftest-wait">
+<body>
+  <div style="float:left; width:200px; height:200px; background-color: red">
+    <div style="width:100px; height:100px;" id="hover"></div>
+  </div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("hover").style.backgroundColor = "blue";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-zindex-1-ref.html b/layout/reftests/display-list/retained-dl-zindex-1-ref.html
new file mode 100644
index 0000000000..d9cd43b5e9
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-zindex-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  position:relative;
+  will-change: transform;
+}
+#one {
+  top:120px;
+  background-color:blue;
+}
+#two {
+  top: -200px;
+  left: 100px;
+  background-color:green;
+  z-index: -1;
+}
+</style>
+</head>
+<body>
+  <div id="one"></div>
+  <div id="two"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-zindex-1.html b/layout/reftests/display-list/retained-dl-zindex-1.html
new file mode 100644
index 0000000000..dd640539c9
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-zindex-1.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  position:relative;
+  will-change: transform;
+}
+#one {
+  top:120px;
+  background-color:blue;
+}
+#two {
+  top: -200px;
+  left: 100px;
+  background-color:green;
+  z-index: 1;
+}
+</style>
+</head>
+<body>
+  <div id="one"></div>
+  <div id="two"></div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("two").style.zIndex = -1;
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-zindex-2-ref.html b/layout/reftests/display-list/retained-dl-zindex-2-ref.html
new file mode 100644
index 0000000000..1eac061a7e
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-zindex-2-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  position:relative;
+  will-change:transform;
+}
+#one {
+  top:120px;
+  background-color:blue;
+}
+#two {
+  top: -200px;
+  left: 100px;
+  background-color:green;
+}
+#three {
+  top: -180px;
+  left: 100px;
+  background-color:red;
+  z-index: -1;
+}
+</style>
+</head>
+<body>
+  <div id="one"></div>
+  <div id="two"></div>
+  <div id="three"></div>
+</body>
+</html>
diff --git a/layout/reftests/display-list/retained-dl-zindex-2.html b/layout/reftests/display-list/retained-dl-zindex-2.html
new file mode 100644
index 0000000000..db3b6e75b6
--- /dev/null
+++ b/layout/reftests/display-list/retained-dl-zindex-2.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  position:relative;
+  will-change:transform;
+}
+#one {
+  top:120px;
+  background-color:blue;
+}
+#two {
+  top: -200px;
+  left: 100px;
+  background-color:green;
+}
+#three {
+  top: -180px;
+  left: 100px;
+  background-color:red;
+  z-index: 1;
+}
+</style>
+</head>
+<body>
+  <div id="one"></div>
+  <div id="two"></div>
+  <div id="three"></div>
+</body>
+<script>
+function doTest() {
+  document.getElementById("three").style.zIndex = -1;
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-1-ref.html b/layout/reftests/display-list/reuse-sc-style-change-1-ref.html
new file mode 100644
index 0000000000..bfe0ac1bde
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="will-change: transform;">
+    Foo
+  </div>
+  <div style="color: green;">
+    Bar
+  </div>
+</body>
+
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-1.html b/layout/reftests/display-list/reuse-sc-style-change-1.html
new file mode 100644
index 0000000000..9aaad24966
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="will-change: transform;" class="reftest-no-display-list">
+    Foo
+  </div>
+  <div style="color: red;" id="changed">
+    Bar
+  </div>
+  <script>
+    function doTest() {
+      const e = document.getElementById('changed');
+      e.style.color = 'green';
+      document.documentElement.removeAttribute('class');
+    }
+    document.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</body>
+
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-abs-pos-1-ref.html b/layout/reftests/display-list/reuse-sc-style-change-abs-pos-1-ref.html
new file mode 100644
index 0000000000..0909192947
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-abs-pos-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="position: absolute; will-change: transform;">
+    Foo
+  </div>
+  <div style="color: green;">
+    Bar
+  </div>
+</body>
+
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-abs-pos-1.html b/layout/reftests/display-list/reuse-sc-style-change-abs-pos-1.html
new file mode 100644
index 0000000000..027bf0a4e8
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-abs-pos-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="position: absolute; will-change: transform;" class="reftest-no-display-list">
+    Foo
+  </div>
+  <div style="color: red;" id="changed">
+    Bar
+  </div>
+  <script>
+    function doTest() {
+      const e = document.getElementById('changed');
+      e.style.color = 'green';
+      document.documentElement.removeAttribute('class');
+    }
+    document.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</body>
+
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1-ref.html b/layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1-ref.html
new file mode 100644
index 0000000000..044c073954
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="position: fixed; will-change: transform;">
+    Foo
+  </div>
+  <div style="color: green;">
+    Bar
+  </div>
+</body>
+
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1.html b/layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1.html
new file mode 100644
index 0000000000..e676c0364b
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="position: fixed; will-change: transform;" class="reftest-no-display-list">
+    Foo
+  </div>
+  <div style="color: red;" id="changed">
+    Bar
+  </div>
+  <script>
+    function doTest() {
+      const e = document.getElementById('changed');
+      e.style.color = 'green';
+      document.documentElement.removeAttribute('class');
+    }
+    document.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</body>
+
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-nested-1-ref.html b/layout/reftests/display-list/reuse-sc-style-change-nested-1-ref.html
new file mode 100644
index 0000000000..00bd5f097f
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-nested-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="will-change: transform;">
+    Foo
+
+    <div style="will-change: transform;">
+      Baz
+    </div>
+    <div style="color: green;">
+    </div>
+    <div style="color: green;">
+      Bar
+    </div>
+</body>
+
+</html>
diff --git a/layout/reftests/display-list/reuse-sc-style-change-nested-1.html b/layout/reftests/display-list/reuse-sc-style-change-nested-1.html
new file mode 100644
index 0000000000..73318a2e4b
--- /dev/null
+++ b/layout/reftests/display-list/reuse-sc-style-change-nested-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+
+<head>
+  <meta charset="UTF-8">
+</head>
+
+<body>
+  <div style="will-change: transform;" class="reftest-no-display-list">
+    Foo
+    <div style="will-change: transform;">
+      Baz
+    </div>
+  </div>
+  <div style="color: red;" id="changed">
+    Bar
+  </div>
+  <script>
+    function doTest() {
+      const e = document.getElementById('changed');
+      e.style.color = 'green';
+      document.documentElement.removeAttribute('class');
+    }
+    document.addEventListener("MozReftestInvalidate", doTest);
+  </script>
+</body>
+
+</html>
-- 
cgit v1.2.3