summaryrefslogtreecommitdiffstats
path: root/layout/reftests/display-list
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /layout/reftests/display-list
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/display-list')
-rw-r--r--layout/reftests/display-list/1413073-ref.html54
-rw-r--r--layout/reftests/display-list/1413073.html69
-rw-r--r--layout/reftests/display-list/1416291-ref.html11
-rw-r--r--layout/reftests/display-list/1416291.html22
-rw-r--r--layout/reftests/display-list/1417601-1-ref.html23
-rw-r--r--layout/reftests/display-list/1417601-1.html32
-rw-r--r--layout/reftests/display-list/1418945-1-ref.html24
-rw-r--r--layout/reftests/display-list/1418945-1.html34
-rw-r--r--layout/reftests/display-list/1420480-1-ref.html26
-rw-r--r--layout/reftests/display-list/1420480-1.html43
-rw-r--r--layout/reftests/display-list/1428993-1-ref.html25
-rw-r--r--layout/reftests/display-list/1428993-1.html57
-rw-r--r--layout/reftests/display-list/1428993-2-ref.html34
-rw-r--r--layout/reftests/display-list/1428993-2.html62
-rw-r--r--layout/reftests/display-list/1429027-1-ref.html19
-rw-r--r--layout/reftests/display-list/1429027-1.html35
-rw-r--r--layout/reftests/display-list/1432553-1-ref.html23
-rw-r--r--layout/reftests/display-list/1432553-1.html66
-rw-r--r--layout/reftests/display-list/1432553-2-ref.html23
-rw-r--r--layout/reftests/display-list/1432553-2.html66
-rw-r--r--layout/reftests/display-list/1436189-1-ref.html8
-rw-r--r--layout/reftests/display-list/1436189-1.html20
-rw-r--r--layout/reftests/display-list/1437374-1-ref.html8
-rw-r--r--layout/reftests/display-list/1437374-1.html23
-rw-r--r--layout/reftests/display-list/1439809-1-ref.html29
-rw-r--r--layout/reftests/display-list/1439809-1.html41
-rw-r--r--layout/reftests/display-list/1443027-1.html93
-rw-r--r--layout/reftests/display-list/1443027-2.html93
-rw-r--r--layout/reftests/display-list/1443027-3-ref.html54
-rw-r--r--layout/reftests/display-list/1443027-3.html91
-rw-r--r--layout/reftests/display-list/1443027-ref.html45
-rw-r--r--layout/reftests/display-list/1451971-1.html36
-rw-r--r--layout/reftests/display-list/1451971-ref.html29
-rw-r--r--layout/reftests/display-list/1452805-1.html39
-rw-r--r--layout/reftests/display-list/1452805-ref.html26
-rw-r--r--layout/reftests/display-list/1453541-1.html18
-rw-r--r--layout/reftests/display-list/1453541-2.html18
-rw-r--r--layout/reftests/display-list/1453541-ref.html11
-rw-r--r--layout/reftests/display-list/1461231-1.html23
-rw-r--r--layout/reftests/display-list/1464288-1.html58
-rw-r--r--layout/reftests/display-list/1464288-ref.html22
-rw-r--r--layout/reftests/display-list/1482403-1-ref.html35
-rw-r--r--layout/reftests/display-list/1482403-1.html45
-rw-r--r--layout/reftests/display-list/1504233-1-ref.html48
-rw-r--r--layout/reftests/display-list/1504233-1.html62
-rw-r--r--layout/reftests/display-list/1533317-1-ref.html15
-rw-r--r--layout/reftests/display-list/1533317-1.html32
-rw-r--r--layout/reftests/display-list/1544948-1-ref.html32
-rw-r--r--layout/reftests/display-list/1544948-1.html43
-rw-r--r--layout/reftests/display-list/1551053-1-ref.html16
-rw-r--r--layout/reftests/display-list/1551053-1.html27
-rw-r--r--layout/reftests/display-list/1553828-1-ref.html31
-rw-r--r--layout/reftests/display-list/1553828-1.html39
-rw-r--r--layout/reftests/display-list/1619370-1-ref.html20
-rw-r--r--layout/reftests/display-list/1619370-1.html31
-rw-r--r--layout/reftests/display-list/1619370-iframe.html19
-rw-r--r--layout/reftests/display-list/1677568-1-ref.html26
-rw-r--r--layout/reftests/display-list/1677568-1.html34
-rw-r--r--layout/reftests/display-list/1709452-1.html34
-rw-r--r--layout/reftests/display-list/1709452-ref.html26
-rw-r--r--layout/reftests/display-list/1719346-1-ref.html25
-rw-r--r--layout/reftests/display-list/1719346-1.gifbin0 -> 238 bytes
-rw-r--r--layout/reftests/display-list/1719346-1.html35
-rw-r--r--layout/reftests/display-list/invalidated-blendmode-sorting-ref.html31
-rw-r--r--layout/reftests/display-list/invalidated-blendmode-sorting.html38
-rw-r--r--layout/reftests/display-list/reftest.list60
-rw-r--r--layout/reftests/display-list/retained-dl-animation-on-pseudo-ref.html28
-rw-r--r--layout/reftests/display-list/retained-dl-animation-on-pseudo.html41
-rw-r--r--layout/reftests/display-list/retained-dl-async-scrolled-1-ref.html20
-rw-r--r--layout/reftests/display-list/retained-dl-async-scrolled-1.html56
-rw-r--r--layout/reftests/display-list/retained-dl-displayport-1-ref.html11
-rw-r--r--layout/reftests/display-list/retained-dl-displayport-1.html21
-rw-r--r--layout/reftests/display-list/retained-dl-frame-created-1.html25
-rw-r--r--layout/reftests/display-list/retained-dl-frame-deleted-1.html24
-rw-r--r--layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split-ref.html12
-rw-r--r--layout/reftests/display-list/retained-dl-opacity-animation-on-ib-split.html22
-rw-r--r--layout/reftests/display-list/retained-dl-prerender-transform-1-ref.html24
-rw-r--r--layout/reftests/display-list/retained-dl-prerender-transform-1.html36
-rw-r--r--layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1-ref.html10
-rw-r--r--layout/reftests/display-list/retained-dl-remove-for-ancestor-change-1.html18
-rw-r--r--layout/reftests/display-list/retained-dl-scroll-out-of-view-1-ref.html8
-rw-r--r--layout/reftests/display-list/retained-dl-scroll-out-of-view-1.html18
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-1-ref.html15
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-1.html23
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-1-ref.html18
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-1.html29
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-2-ref.html20
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-2.html23
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-3-ref.html20
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-3.html29
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-4-ref.html20
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-stacking-context-4.html29
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1-ref.html24
-rw-r--r--layout/reftests/display-list/retained-dl-style-change-with-prerender-transform-1.html30
-rw-r--r--layout/reftests/display-list/retained-dl-wrap-list-ref.html14
-rw-r--r--layout/reftests/display-list/retained-dl-wrap-list.html15
-rw-r--r--layout/reftests/display-list/retained-dl-zindex-1-ref.html27
-rw-r--r--layout/reftests/display-list/retained-dl-zindex-1.html35
-rw-r--r--layout/reftests/display-list/retained-dl-zindex-2-ref.html33
-rw-r--r--layout/reftests/display-list/retained-dl-zindex-2.html41
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-1-ref.html17
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-1.html25
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-abs-pos-1-ref.html17
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-abs-pos-1.html25
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1-ref.html17
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-fixed-pos-1.html25
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-nested-1-ref.html22
-rw-r--r--layout/reftests/display-list/reuse-sc-style-change-nested-1.html28
108 files changed, 3332 insertions, 0 deletions
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
--- /dev/null
+++ b/layout/reftests/display-list/1719346-1.gif
Binary files 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>