diff options
Diffstat (limited to 'layout/reftests/display-list')
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 Binary files differnew file mode 100644 index 0000000000..82cf13d4a2 --- /dev/null +++ b/layout/reftests/display-list/1719346-1.gif 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> |
