diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/layers | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/layers')
40 files changed, 2606 insertions, 0 deletions
diff --git a/layout/reftests/layers/component-alpha-enter-1-ref.html b/layout/reftests/layers/component-alpha-enter-1-ref.html new file mode 100644 index 0000000000..c7b38b4f49 --- /dev/null +++ b/layout/reftests/layers/component-alpha-enter-1-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Test transition from single-alpha layer to component-alpha layer from a display port size change</title> +<script type="text/javascript"> + document.addEventListener('MozReftestInvalidate', function() { + var scrollbox = document.getElementById('scrollbox'); + scrollbox.scrollTop = 1000; + document.documentElement.className = ''; + }); +</script> +<style> +#scrollbox { + margin: 20px; + width: 300px; + height: 400px; + overflow-y: scroll; + background: linear-gradient(#FFF, #FFF); +} + +#inner { + background-color: #000; + margin-top: 10px; + height: 5px; + line-height: 5px; + padding-bottom: 400px; +} +</style> + +<div id="scrollbox"> + <div id="inner"> + Text + </div> +</div> diff --git a/layout/reftests/layers/component-alpha-enter-1.html b/layout/reftests/layers/component-alpha-enter-1.html new file mode 100644 index 0000000000..b5a945b523 --- /dev/null +++ b/layout/reftests/layers/component-alpha-enter-1.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Test transition from single-alpha layer to component-alpha layer from a display port size change</title> +<script type="text/javascript"> + document.addEventListener('MozReftestInvalidate', function() { + var scrollbox = document.getElementById('scrollbox'); + scrollbox.scrollTop = 1000; + + window.addEventListener("MozAfterPaint", function() { + // Remove dummy to make scrollbox the first scroll element giving it a + // display port. The display port will then contain the text forcing the + // layer to transition to component alpha. + document.getElementById('dummy').remove(); + document.documentElement.className = ''; + }, {once: true}); + }); +</script> +<style> +#dummy { + margin: 20px; + width: 300px; + height: 400px; + overflow: scroll; +} + +#filler { + height: 600px; +} + +#scrollbox { + margin: 20px; + width: 300px; + height: 400px; + overflow-y: scroll; + background: linear-gradient(#FFF, #FFF); +} + +#inner { + background-color: #000; + margin-top: 10px; + height: 5px; + line-height: 5px; + padding-bottom: 400px; +} +</style> + +<div id="dummy"> + <div id="filler"> + </div> +</div> + +<div id="scrollbox"> + <div id="inner"> + Text + </div> +</div> diff --git a/layout/reftests/layers/component-alpha-exit-1-ref.html b/layout/reftests/layers/component-alpha-exit-1-ref.html new file mode 100644 index 0000000000..164467e7e7 --- /dev/null +++ b/layout/reftests/layers/component-alpha-exit-1-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Reference for test transition from component-alpha layer to single-alpha layer</title> +<script type="text/javascript"> +document.addEventListener("MozReftestInvalidate", function scrollDownAllTheWay () { + var scrollbox = document.getElementById("scrollbox"); + scrollbox.scrollTop = 1000; + document.documentElement.className = ""; +}); +</script> +<style> +#scrollbox { + margin: 20px; + width: 300px; + height: 400px; + overflow-y: hidden; + background: linear-gradient(#FFF, #FFF); +} + +#inner { + background-color: #000; + padding-bottom: 415px; +} +</style> + +<div id="scrollbox"> + <div id="inner"> + + </div> +</div> diff --git a/layout/reftests/layers/component-alpha-exit-1.html b/layout/reftests/layers/component-alpha-exit-1.html new file mode 100644 index 0000000000..2e7902ab6d --- /dev/null +++ b/layout/reftests/layers/component-alpha-exit-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Test transition from component-alpha layer to single-alpha layer</title> +<script type="text/javascript"> +document.addEventListener("MozReftestInvalidate", function scrollOnePixelDown () { + var scrollbox = document.getElementById("scrollbox"); + window.addEventListener("MozAfterPaint", function() { + scrollbox.scrollTop = 1000; + document.documentElement.className = ""; + }, {once: true}); + scrollbox.scrollTop = 1; // activate scroll layer +}); +</script> +<style> +#scrollbox { + margin: 20px; + width: 300px; + height: 400px; + overflow-y: hidden; + background: linear-gradient(#FFF, #FFF); +} + +#inner { + background-color: #000; + margin-top: 10px; + height: 5px; + line-height: 5px; + padding-bottom: 400px; +} +</style> + +<div id="scrollbox"> + <div id="inner"> + Text + </div> +</div> diff --git a/layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html b/layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html new file mode 100644 index 0000000000..806377335a --- /dev/null +++ b/layout/reftests/layers/fixed-pos-scrolled-clip-layerize.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html reftest-async-scroll + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="200"> + +<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title> + +<style> + +body { + margin: 0; + height: 4000px; +} + +.blueBox { + margin: 10px; + width: 200px; + height: 200px; + box-sizing: border-box; + border: 1px solid blue; +} + +.absoluteClip { + position: absolute; + top: 300px; + left: 100px; + width: 200px; + height: 200px; + background: red; + clip: rect(auto auto auto auto); +} + +.fixed { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(lime 300px, black 0); +} + +.absoluteCyanBox { + position: absolute; + top: 200px; + left: 400px; + width: 200px; + height: 200px; + box-sizing: border-box; + border: 1px solid cyan; +} + + +</style> + +<div class="blueBox" reftest-assigned-layer="page-background"></div> + +<div class="absoluteClip"> + <div class="fixed"></div> +</div> + +<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div> diff --git a/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html new file mode 100644 index 0000000000..a3a1e67651 --- /dev/null +++ b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-inside-layerize.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html reftest-async-scroll + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="200"> + +<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title> + +<style> + +body { + margin: 0; + height: 4000px; +} + +.blueBox { + margin: 10px; + width: 200px; + height: 200px; + box-sizing: border-box; + border: 1px solid blue; +} + +.opacity { + opacity: 0.8; +} + +.absoluteClip { + position: absolute; + top: 300px; + left: 100px; + width: 200px; + height: 200px; + clip: rect(auto auto auto auto); +} + +.fixed { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(lime 300px, black 0); +} + +.absoluteCyanBox { + position: absolute; + top: 200px; + left: 400px; + width: 200px; + height: 200px; + box-sizing: border-box; + border: 1px solid cyan; +} + + +</style> + +<div class="blueBox" reftest-assigned-layer="page-background"></div> + +<div class="absoluteClip"> + <div class="opacity"> + <div class="fixed"></div> + </div> +</div> + +<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div> diff --git a/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html new file mode 100644 index 0000000000..2f302da25d --- /dev/null +++ b/layout/reftests/layers/fixed-pos-scrolled-clip-opacity-layerize.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html reftest-async-scroll + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="200"> + +<title>position:fixed with scrolled clip should prerender everything and correctly move the clip</title> + +<style> + +body { + margin: 0; + height: 4000px; +} + +.blueBox { + margin: 10px; + width: 200px; + height: 200px; + box-sizing: border-box; + border: 1px solid blue; +} + +.opacity { + opacity: 0.8; +} + +.absoluteClip { + position: absolute; + top: 300px; + left: 100px; + width: 200px; + height: 200px; + background: red; + clip: rect(auto auto auto auto); +} + +.fixed { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient(lime 300px, black 0); +} + +.absoluteCyanBox { + position: absolute; + top: 200px; + left: 400px; + width: 200px; + height: 200px; + box-sizing: border-box; + border: 1px solid cyan; +} + + +</style> + +<div class="blueBox" reftest-assigned-layer="page-background"></div> + +<div class="opacity"> + <div class="absoluteClip"> + <div class="fixed"></div> + </div> +</div> + +<div class="absoluteCyanBox" reftest-assigned-layer="page-background"></div> diff --git a/layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html b/layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html new file mode 100644 index 0000000000..8a5c68ac5e --- /dev/null +++ b/layout/reftests/layers/forced-bg-color-outside-visible-region-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Bug 1266161 - Reference</title> + +<style type="text/css"> + +html, body { + margin: 0; +} + +#scrollbox { + overflow: auto; + height: 500px; + width: 500px; +} + +#scrolled { + height: 1201px; +} + +</style> + +<div id="wrapper"> + + <div id="scrollbox"> + + <div id="scrolled"> + </div> + + </div> + +</div> + +<script> + +var scrollbox = document.getElementById("scrollbox"); +scrollbox.scrollTop = 80; + +</script> diff --git a/layout/reftests/layers/forced-bg-color-outside-visible-region.html b/layout/reftests/layers/forced-bg-color-outside-visible-region.html new file mode 100644 index 0000000000..fe7d75a272 --- /dev/null +++ b/layout/reftests/layers/forced-bg-color-outside-visible-region.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait" reftest-async-scroll> +<meta charset="utf-8"> +<title>Bug 1266161 - Black boxes during scrolling</title> + +<style type="text/css"> + +html, body { + margin: 0; + height: 100%; +} + +body { + outline: 2px solid white; +} + +#scrollbox { + overflow: auto; + will-change: transform, scroll-position; + height: 500px; + width: 500px; +} + +#scrolled { + padding-top: 1px; + height: 1200px; +} + +p { + height: 20px; + background: white; + margin-top: 16px; +} + +span, em { + display: block; + background: white; + width: 134px; + height: 14px; + margin-top: 32px; +} + +em { + width: 10px; +} + +</style> + +<div id="scrollbox" + reftest-displayport-x="0" + reftest-displayport-y="0" + reftest-displayport-w="500" + reftest-displayport-h="500"> + + <div id="scrolled"> + <p></p> + <p></p> + <p></p> + <span style="margin-top: 48px"></span> + <span style="margin-top: 64px"></span> + <span style="margin-top: 96px"></span> + <span style="margin-top: 96px"></span> + <em></em> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + <span></span> + </div> + +</div> + +<script> + +var scrollbox = document.getElementById("scrollbox"); + +var pos = [ 170, 100, 248, 182, 130, 80 ]; + +var i = 0; +function scrollToNextPos() { + scrollbox.scrollTop = pos[i++]; +} + +scrollToNextPos(); + +window.addEventListener("MozReftestInvalidate", function () { + requestAnimationFrame(function scrollAndScheduleNext() { + scrollToNextPos(); + if (i < pos.length) { + requestAnimationFrame(scrollAndScheduleNext); + } else { + document.documentElement.className = ""; + } + }); +}); + +</script> diff --git a/layout/reftests/layers/layerize-over-fixed-bg-1.html b/layout/reftests/layers/layerize-over-fixed-bg-1.html new file mode 100644 index 0000000000..26e677e0a0 --- /dev/null +++ b/layout/reftests/layers/layerize-over-fixed-bg-1.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>The fixed background should not cause .inner to move to a different layer than .outer</title> + +<style> + +body { + margin: 0; + height: 3000px; +} + +.outer { + border: 1px solid black; + margin: 10px; +} + +.outer > div { + margin: 10px; +} + +.fixed-bg { + height: 100px; + background-image: linear-gradient(lime, lime); + background-attachment: fixed; +} + +.inner { + border: 1px solid blue; + padding: 20px; +} + +</style> + +<div class="outer" reftest-assigned-layer="page-background"> + <!-- .inner and .fixed-bg do not overlap, so .inner should be merged into + the same layer as .outer. --> + <div class="fixed-bg"></div> + <div class="inner" reftest-assigned-layer="page-background"></div> +</div> diff --git a/layout/reftests/layers/mask-layer-transform-ref.html b/layout/reftests/layers/mask-layer-transform-ref.html new file mode 100644 index 0000000000..54cd38607f --- /dev/null +++ b/layout/reftests/layers/mask-layer-transform-ref.html @@ -0,0 +1,8 @@ +<html> +<body> + <div style="position:relative; left: 400px; width: 200px; height: 200px; overflow:hidden; border-radius: 20px;"> + <div style="width:200px; height:200px; background-color:red; transform: perspective(100px) rotateY(10deg)"></div> + </div> +</body> +</html> + diff --git a/layout/reftests/layers/mask-layer-transform.html b/layout/reftests/layers/mask-layer-transform.html new file mode 100644 index 0000000000..0a809c50bd --- /dev/null +++ b/layout/reftests/layers/mask-layer-transform.html @@ -0,0 +1,10 @@ +<html> +<body> + <div style="width:200px; height: 200px; transform: translate(400px);"> + <div style="width: 200px; height: 200px; overflow:hidden; border-radius: 20px;"> + <div style="width:200px; height:200px; background-color:red; transform: perspective(100px) rotateY(10deg)"></div> + </div> + </div> +</body> +</html> + diff --git a/layout/reftests/layers/move-to-background-1-ref.html b/layout/reftests/layers/move-to-background-1-ref.html new file mode 100644 index 0000000000..c5ac7391d8 --- /dev/null +++ b/layout/reftests/layers/move-to-background-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + overflow:hidden; + width:200px; + height:80px; + position:absolute; + left:10px; +} +</style> +</head> +<body> + <div style="top:0px; z-index:0">Hello</div> + <div style="top:200px; z-index:1">Hello</div> + <div style="opacity:0.5; top:100px; z-index:2">Hello</div> +</body> +</html> diff --git a/layout/reftests/layers/move-to-background-1.html b/layout/reftests/layers/move-to-background-1.html new file mode 100644 index 0000000000..18ca9c8cee --- /dev/null +++ b/layout/reftests/layers/move-to-background-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + overflow:hidden; + width:200px; + height:80px; + position:absolute; + left:10px; +} +</style> +</head> +<body> + <div style="top:0px; z-index:0">Hello</div> + <div style="opacity:0.5; top:100px; z-index:1">Hello</div> + <div style="top:200px; z-index:2">Hello</div> +</body> +</html> diff --git a/layout/reftests/layers/opacity-background-1-ref.html b/layout/reftests/layers/opacity-background-1-ref.html new file mode 100644 index 0000000000..c80ed88866 --- /dev/null +++ b/layout/reftests/layers/opacity-background-1-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> + +<style> +.main { + top: 0px; + left: 0px; + width: 100px; + height: 100px; + position: absolute; + background-color: red; +} + +.background { + background-color: white; + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + opacity: 0.9; +} + +.container { + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + overflow: scroll; +} + +.message { + position: absolute; + top: 0px; + left: 0px; + width: 101%; + height: 101%; +} +</style> +</head> + +<body> +<div class="main"> + <div class="background"></div> + <div class="container"> + <div class="message">foo</div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/layers/opacity-background-1.html b/layout/reftests/layers/opacity-background-1.html new file mode 100644 index 0000000000..5a942ccaab --- /dev/null +++ b/layout/reftests/layers/opacity-background-1.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> + +<style> +.main { + top: 0px; + left: 0px; + width: 100px; + height: 100px; + position: absolute; + background-color: red; +} + +.background { + background: linear-gradient(#ffffff, #ffffff); + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + opacity: 0.9; +} + +.container { + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; + overflow: scroll; +} + +.message { + position: absolute; + top: 0px; + left: 0px; + width: 101%; + height: 101%; +} +</style> +</head> + +<body> +<div class="main"> + <div class="background"></div> + <div class="container"> + <div class="message">foo</div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/layers/opacity-blending-ref.html b/layout/reftests/layers/opacity-blending-ref.html new file mode 100644 index 0000000000..533ecef701 --- /dev/null +++ b/layout/reftests/layers/opacity-blending-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Compositor opacity blending should work correctly (and the same as canvas)</title> +<html class="reftest-wait"> +<head> +<script> + function load() { + var one = document.getElementById("one").getContext("2d"); + + one.fillStyle = "rgba(255,0,0,0.5)"; + one.fillRect(0, 0, 200, 200); + one.fillStyle = "rgba(0,255,0,0.5)"; + one.fillRect(0, 0, 200, 200); + + document.documentElement.removeAttribute("class"); + } +</script> +</head> +<body onload="load()"> + +<div style="opacity:0.8"> + <canvas id="one" style="position:absolute; left:0px;"></canvas> +</div> +</body> +</html> diff --git a/layout/reftests/layers/opacity-blending.html b/layout/reftests/layers/opacity-blending.html new file mode 100644 index 0000000000..2b9731f0c0 --- /dev/null +++ b/layout/reftests/layers/opacity-blending.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Compositor opacity blending should work correctly (and the same as canvas)</title> +<html class="reftest-wait"> +<head> +<script> + function load() { + var one = document.getElementById("one").getContext("2d"); + var two = document.getElementById("two").getContext("2d"); + + one.fillStyle = "rgba(255,0,0,0.5)"; + one.fillRect(0, 0, 200, 200); + two.fillStyle = "rgba(0,255,0,0.5)"; + two.fillRect(0, 0, 200, 200); + + document.documentElement.removeAttribute("class"); + } +</script> +</head> +<body onload="load()"> + +<div style="opacity:0.8"> + <canvas id="one" style="position:absolute; left:0px;"></canvas> + <canvas id="two" style="position:absolute; left:0px;"></canvas> +</div> +</body> +</html> diff --git a/layout/reftests/layers/opacity-flattening-large-image-ref.html b/layout/reftests/layers/opacity-flattening-large-image-ref.html new file mode 100644 index 0000000000..47c398086c --- /dev/null +++ b/layout/reftests/layers/opacity-flattening-large-image-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Reference: Opacity Flattening for Large Images</title> +<style> +div { + display: inline-block; + height: 40px; + width: 40px; + opacity: 0.25; +} + +.blackcolor { + background: black; +} +</style> +</head> + +<body> +<div class="blackcolor"></div> +<div class="blackcolor"></div> +<div class="blackcolor"></div> +<div class="blackcolor"></div> +<div class="blackcolor"></div> +</body> +</html> diff --git a/layout/reftests/layers/opacity-flattening-large-image.html b/layout/reftests/layers/opacity-flattening-large-image.html new file mode 100644 index 0000000000..299abb56ba --- /dev/null +++ b/layout/reftests/layers/opacity-flattening-large-image.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Opacity Flattening for Large Images</title> +<style> +div { + display: inline-block; + height: 40px; + width: 40px; + opacity: 0.25; +} + +.png40x40 { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoAQMAAAC2MCouAAAAA1BMVEUAAACnej3aAAAADElEQVQI12NgGFkAAADwAAHXt5aiAAAAAElFTkSuQmCC) no-repeat; +} + +.png40x4096 { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAABAAAQMAAAA6ETG7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QceCDgMmIF9RQAAAANQTFRFAAAAp3o92gAAAC5JREFUGBntwTEBAAAAwiD7p14IX2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAtYAAAAfQusroAAAAASUVORK5CYII=) no-repeat; +} + +.png40x4097 { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAABABAQMAAADxTeIeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QceCDgchTZtIQAAAANQTFRFAAAAp3o92gAAAC5JREFUGBntwTEBAAAAwiD7p14JT2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJYAYAAYO1lz8AAAAASUVORK5CYII=) no-repeat; +} + +.png4096x40 { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAAAAAAoAQMAAABETK3BAAAAA1BMVEUAAACnej3aAAAAK0lEQVR42u3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAACAFwNQKAAB/x49MAAAAABJRU5ErkJggg==) no-repeat; +} + +.png4097x40 { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAEAAAAoAQMAAACrjsb/AAAAA1BMVEUAAACnej3aAAAAK0lEQVR42u3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAACANwNQUAABp9gL6AAAAABJRU5ErkJggg==) no-repeat; +} +</style> +</head> + +<body> +<div class="png40x40"></div> +<div class="png40x4096"></div> +<div class="png40x4097"></div> +<div class="png4096x40"></div> +<div class="png4097x40"></div> +</body> +</html> diff --git a/layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html new file mode 100644 index 0000000000..6c5d2ad084 --- /dev/null +++ b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> +<title>Clicking the canvas should turn it green (and shift it slighly)</title> + +<style> + +canvas { + border: 10px solid black; +} + +.opacity { + opacity: 0.8; +} + +</style> + +</head><body><div style="transform: translateX(1px)"> + <div class="wrapper" style="transform: translateX(1px);"> + <div class="opacity"> + <div class="border"> + <canvas id="canvas" width="200" height="200"></canvas> + </div> + </div> + </div> +</div> + +<script> + +var canvas = document.getElementById('canvas'); +canvas.width = 200; +canvas.height = 200; +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'lime'; +ctx.fillRect(0, 0, 200, 200); +</script> +</body></html> diff --git a/layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html new file mode 100644 index 0000000000..03e2e92769 --- /dev/null +++ b/layout/reftests/layers/opacity-keep-intermediate-surface-too-long.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> +<title>Clicking the canvas should turn it green (and shift it slighly)</title> + +<style> + +canvas { + border: 10px solid black; +} + +.opacity { + opacity: 0.8; +} + +</style> + +</head><body><div style="transform: translateX(1px)"><!-- create reference frame --> + <div class="wrapper"><!-- this starts out without a transform but later gets transformed --> + <div class="opacity"><!-- this creates a ContainerLayer with an intermediate surface for group opacity --> + <div class="border"><!-- this adds another visual element into the group opacity --> + <canvas id="canvas" width="200" height="200"></canvas><!-- this causes all ancestor effects to become active ContainerLayers --> + </div> + </div> + </div> +</div> + +<script> + +var canvas = document.getElementById('canvas'); +var wrapper = document.querySelector('.wrapper'); +canvas.width = 200; +canvas.height = 200; +var ctx = canvas.getContext('2d'); +ctx.fillStyle = 'red'; +ctx.fillRect(0, 0, 200, 200); + +function doTest() { + ctx.fillStyle = 'lime'; + ctx.fillRect(0, 0, 200, 200); + wrapper.style.transform = 'translateX(1px)'; + document.documentElement.removeAttribute("class"); +} +document.addEventListener("MozReftestInvalidate", doTest); + +</script> +</body></html> diff --git a/layout/reftests/layers/pull-background-1.html b/layout/reftests/layers/pull-background-1.html new file mode 100644 index 0000000000..09e2f27c9f --- /dev/null +++ b/layout/reftests/layers/pull-background-1.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="scrollable border"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/pull-background-2.html b/layout/reftests/layers/pull-background-2.html new file mode 100644 index 0000000000..75b625eb32 --- /dev/null +++ b/layout/reftests/layers/pull-background-2.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even through an opacity container layer</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: 150px; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +.opacity { + opacity: 0.9; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="opacity border"> + <div class="opacity scrollable"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/pull-background-3.html b/layout/reftests/layers/pull-background-3.html new file mode 100644 index 0000000000..00ab846b2a --- /dev/null +++ b/layout/reftests/layers/pull-background-3.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.underlap { + border: 1px solid #088; + margin-left: 120px; + width: 80px; + margin-bottom: -30px; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="underlap"> + <!-- + This item intersects with the scrollable box and is positioned below + .scrollable, in z-order. + --> +</div> + +<div class="scrollable border"> + <div class="scrollarea"> + <div class="scrolled border reftest-no-paint"> + <!-- + This box starts out above solid white background, but it will move so + that it intersects .underlap, so it shouldn't pull up a background + color to begin with so that it doesn't need to invalidate. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +function doTest() { + scrollable.scrollLeft = 100; + document.documentElement.removeAttribute("class"); +} + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 10; +document.addEventListener("MozReftestInvalidate", doTest); + +</script> diff --git a/layout/reftests/layers/pull-background-4.html b/layout/reftests/layers/pull-background-4.html new file mode 100644 index 0000000000..6b2ff200fd --- /dev/null +++ b/layout/reftests/layers/pull-background-4.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title> +<!-- + This is the same test as pull-background-3.html, but with an additional + wrapping opacity container layer. +--> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.underlap { + border: 1px solid #088; + margin-left: 120px; + width: 80px; + margin-bottom: -30px; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="underlap"> + <!-- + This item intersects with the scrollable box and is positioned below + .scrollable, in z-order. + --> +</div> + +<div class="opacity border"> + <div class="opacity scrollable"> + <div class="scrollarea"> + <div class="scrolled border reftest-no-paint"> + <!-- + This box starts out above solid white background, but it will move so + that it intersects .underlap, so it shouldn't pull up a background + color to begin with so that it doesn't need to invalidate. + --> + </div> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +function doTest() { + scrollable.scrollLeft = 100; + document.documentElement.removeAttribute("class"); +} + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 10; +document.addEventListener("MozReftestInvalidate", doTest); + +</script> diff --git a/layout/reftests/layers/pull-background-5.html b/layout/reftests/layers/pull-background-5.html new file mode 100644 index 0000000000..b91f81a7b7 --- /dev/null +++ b/layout/reftests/layers/pull-background-5.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title> +<!-- + Very similar to pull-background-2.html, but with a .scrolled element that is + wider than the scrollbox. +--> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: 150px; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 2000px; + height: 100px; + border-color: red; +} + +.opacity { + opacity: 0.9; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="opacity border"> + <div class="scrollable"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/pull-background-6.html b/layout/reftests/layers/pull-background-6.html new file mode 100644 index 0000000000..49e919db58 --- /dev/null +++ b/layout/reftests/layers/pull-background-6.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title> +<!-- + Very similar to pull-background-1.html, but with a .scrolled element that is + wider than the scrollbox. +--> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 2000px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="scrollable border"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/pull-background-animated-position-1.html b/layout/reftests/layers/pull-background-animated-position-1.html new file mode 100644 index 0000000000..e627f2b6bb --- /dev/null +++ b/layout/reftests/layers/pull-background-animated-position-1.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if those contents have an animated position</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; + position: relative; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +.animated-position { + position: relative; + left: 20px; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="scrollable border"> + <div class="scrollarea"> + <div class="scrolled border animated-position reftest-no-paint reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + + +var animatedLeft = document.querySelector(".animated-position"); + +function doTest() { + animatedLeft.style.left = "100px"; + document.documentElement.removeAttribute("class"); +} + +// Layerize #animatedLeft +animatedLeft.offsetLeft; +animatedLeft.style.left = "40px"; +animatedLeft.offsetLeft; +animatedLeft.style.left = "60px"; +animatedLeft.offsetLeft; + +document.addEventListener("MozReftestInvalidate", doTest); + +</script> + diff --git a/layout/reftests/layers/pull-background-animated-position-2.html b/layout/reftests/layers/pull-background-animated-position-2.html new file mode 100644 index 0000000000..3065593132 --- /dev/null +++ b/layout/reftests/layers/pull-background-animated-position-2.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds and have an animated position</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; + position: relative; +} + +.border { + border: 1px solid black; +} + +.underlap { + border: 1px solid #088; + margin-left: 120px; + width: 80px; + margin-bottom: -30px; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +.animated-position { + position: relative; + left: 20px; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="underlap"> + <!-- + This item intersects with the scrollable box and is positioned below + .scrollable, in z-order. + --> +</div> + +<div class="scrollable border"> + <div class="scrollarea"> + <div class="scrolled border animated-position reftest-no-paint"> + <!-- + This box starts out above solid white background, but it will move so + that it intersects .underlap, so it shouldn't pull up a background + color to begin with so that it doesn't need to invalidate. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + + +var animatedLeft = document.querySelector(".animated-position"); + +function doTest() { + animatedLeft.style.left = "-40px"; + document.documentElement.removeAttribute("class"); +} + +// Layerize #animatedLeft +animatedLeft.offsetLeft; +animatedLeft.style.left = "40px"; +animatedLeft.offsetLeft; +animatedLeft.style.left = "60px"; +animatedLeft.offsetLeft; + +document.addEventListener("MozReftestInvalidate", doTest); +setTimeout(doTest, 200); + +</script> + diff --git a/layout/reftests/layers/pull-background-animated-position-3.html b/layout/reftests/layers/pull-background-animated-position-3.html new file mode 100644 index 0000000000..b791b20a51 --- /dev/null +++ b/layout/reftests/layers/pull-background-animated-position-3.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>This test fails - Layerization should respect overflow:hidden clips around things with animated position</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; + position: relative; +} + +.border { + border: 1px solid black; +} + +.underlap { + border: 1px solid #088; + margin-left: 120px; + width: 80px; + margin-bottom: -30px; +} + +.clip { + height: auto; + overflow: hidden; + padding: 10px 0 20px; +} + +.animated-position { + position: relative; + left: 20px; + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="underlap"> + <!-- + This item intersects with the scrollable box and is positioned below + .scrollable, in z-order. + --> +</div> + +<div class="clip border"> + <div class="border animated-position reftest-no-paint"> + <!-- + This box starts out above solid white background, but it will move so + that it intersects .underlap, so it shouldn't pull up a background + color to begin with so that it doesn't need to invalidate. + --> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + However, we don't take .animated-position's clip into account when + layerizing, so .second will be pulled up into its own layer above + .animated-position. So this test will fail. + --> +</div> + +<script> + +var animatedLeft = document.querySelector(".animated-position"); + +function doTest() { + animatedLeft.style.left = "-40px"; + document.documentElement.removeAttribute("class"); +} + +// Layerize #animatedLeft +animatedLeft.offsetLeft; +animatedLeft.style.left = "40px"; +animatedLeft.offsetLeft; +animatedLeft.style.left = "60px"; +animatedLeft.offsetLeft; + +document.addEventListener("MozReftestInvalidate", doTest); +setTimeout(doTest, 200); + +</script> + diff --git a/layout/reftests/layers/pull-background-animated-position-4.html b/layout/reftests/layers/pull-background-animated-position-4.html new file mode 100644 index 0000000000..c92f2fd3ee --- /dev/null +++ b/layout/reftests/layers/pull-background-animated-position-4.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>This test fails - layerization should respect overflow:hidden clips around things with animated position</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; + position: relative; +} + +.border { + border: 1px solid black; +} + +.clip { + height: auto; + overflow: hidden; + padding: 10px 0 20px; +} + +.animated-position { + position: relative; + left: 20px; + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="clip border"> + <div class="border animated-position reftest-no-paint reftest-opaque-layer"> + <!-- + The background of .clip is uniform and opaque, + .animated-position should be able to pull up that background color and + become opaque itself. + However, since this clip is not created by an animated geometry root that + is a scrollable frame, we currently fail to recognize it, so this test + will fail. + --> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + However, since we don't recognize that .animated-position is contained in + a clip, .second gets its own layer above .animated-position, so this test + will fail. + --> +</div> + +<script> + +var animatedLeft = document.querySelector(".animated-position"); + +function doTest() { + animatedLeft.style.left = "-40px"; + document.documentElement.removeAttribute("class"); +} + +// Layerize #animatedLeft +animatedLeft.offsetLeft; +animatedLeft.style.left = "40px"; +animatedLeft.offsetLeft; +animatedLeft.style.left = "60px"; +animatedLeft.offsetLeft; + +document.addEventListener("MozReftestInvalidate", doTest); +setTimeout(doTest, 200); + +</script> + diff --git a/layout/reftests/layers/pull-background-animated-position-5.html b/layout/reftests/layers/pull-background-animated-position-5.html new file mode 100644 index 0000000000..c213a1e32d --- /dev/null +++ b/layout/reftests/layers/pull-background-animated-position-5.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8"> +<title>This test fails - Opacity containers should anticipate animations of the contents when deciding whether to pull a background color</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; + position: relative; +} + +.border { + border: 1px solid black; +} + +.underlap { + border: 1px solid #088; + margin-left: 120px; + width: 80px; + margin-bottom: -30px; +} + +.opacity { + opacity: 0.9; + height: auto; + padding: 10px 0 20px; +} + +.animated-position { + position: relative; + left: 20px; + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="underlap"> + <!-- + This item intersects with the scrollable box and is positioned below + .scrollable, in z-order. + --> +</div> + +<div class="border"> + <div class="opacity"> + <div class="border animated-position reftest-no-paint"> + <!-- + This item start out above solid white background but will move to + intersect .underlap, so it shouldn't pull up the background color. + However, the opacity item that wraps this item only looks at the + current bounds of its contents, so this test will fail. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var animatedLeft = document.querySelector(".animated-position"); + +function doTest() { + animatedLeft.style.left = "-40px"; + document.documentElement.removeAttribute("class"); +} + +// Layerize #animatedLeft +animatedLeft.offsetLeft; +animatedLeft.style.left = "40px"; +animatedLeft.offsetLeft; +animatedLeft.style.left = "60px"; +animatedLeft.offsetLeft; + +document.addEventListener("MozReftestInvalidate", doTest); +setTimeout(doTest, 200); + +</script> + diff --git a/layout/reftests/layers/pull-background-displayport-1.html b/layout/reftests/layers/pull-background-displayport-1.html new file mode 100644 index 0000000000..b3a5aa9f9c --- /dev/null +++ b/layout/reftests/layers/pull-background-displayport-1.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if their contents have a visible region that extends beyond the scrollbox clip</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="scrollable border" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="2000" reftest-displayport-h="200"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/pull-background-displayport-2.html b/layout/reftests/layers/pull-background-displayport-2.html new file mode 100644 index 0000000000..fb69775157 --- /dev/null +++ b/layout/reftests/layers/pull-background-displayport-2.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if their contents have a visible region that extends beyond the scrollbox clip, even through an opacity container layer</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: 150px; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +.opacity { + opacity: 0.9; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="opacity border"> + <div class="opacity scrollable" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="2000" reftest-displayport-h="200"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/pull-background-displayport-3.html b/layout/reftests/layers/pull-background-displayport-3.html new file mode 100644 index 0000000000..d375935df4 --- /dev/null +++ b/layout/reftests/layers/pull-background-displayport-3.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait" reftest-async-scroll> +<meta charset="utf-8"> +<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.underlap { + border: 1px solid #088; + margin-left: 120px; + width: 80px; + margin-bottom: -30px; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="underlap"> + <!-- + This item intersects with the scrollable box and is positioned below + .scrolled, in z-order. + --> +</div> + +<div class="scrollable border" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="2000" reftest-displayport-h="200"> + <div class="scrollarea"> + <div class="scrolled border reftest-no-paint"> + <!-- + This box starts out above solid white background, but it will move so + that it intersects .underlap, so it shouldn't pull up a background + color to begin with so that it doesn't need to invalidate. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +function doTest() { + scrollable.scrollLeft = 100; + document.documentElement.removeAttribute("class"); +} + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 10; +document.addEventListener("MozReftestInvalidate", doTest); +// setTimeout(doTest, 500); + +</script> diff --git a/layout/reftests/layers/pull-background-displayport-4.html b/layout/reftests/layers/pull-background-displayport-4.html new file mode 100644 index 0000000000..884cfe0418 --- /dev/null +++ b/layout/reftests/layers/pull-background-displayport-4.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait" reftest-async-scroll> +<meta charset="utf-8"> +<title>Scrollboxes with non-uniform backgrounds should prevent their contents from pulling background colors, even if those contents start out above uniform backgrounds</title> +<!-- + This is the same test as pull-background-displayport-3.html, but with an additional + wrapping opacity container layer. +--> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.underlap { + border: 1px solid #088; + margin-left: 120px; + width: 80px; + margin-bottom: -30px; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 100px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="underlap"> + <!-- + This item intersects with the scrollable box and is positioned below + .scrolled, in z-order. + --> +</div> + +<div class="opacity border"> + <div class="opacity scrollable" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="2000" reftest-displayport-h="200"> + <div class="scrollarea"> + <div class="scrolled border reftest-no-paint"> + <!-- + This box starts out above solid white background, but it will move so + that it intersects .underlap, so it shouldn't pull up a background + color to begin with so that it doesn't need to invalidate. + --> + </div> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +function doTest() { + scrollable.scrollLeft = 100; + document.documentElement.removeAttribute("class"); +} + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 10; +document.addEventListener("MozReftestInvalidate", doTest); +// setTimeout(doTest, 500); + +</script> diff --git a/layout/reftests/layers/pull-background-displayport-5.html b/layout/reftests/layers/pull-background-displayport-5.html new file mode 100644 index 0000000000..6b865e7d64 --- /dev/null +++ b/layout/reftests/layers/pull-background-displayport-5.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title> +<!-- + Very similar to pull-background-displayport-2.html, but with a .scrolled element that is + wider than the scrollbox. +--> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: 150px; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 2000px; + height: 100px; + border-color: red; +} + +.opacity { + opacity: 0.9; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="opacity border"> + <div class="scrollable" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="2000" reftest-displayport-h="200"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/pull-background-displayport-6.html b/layout/reftests/layers/pull-background-displayport-6.html new file mode 100644 index 0000000000..27f66d6ac4 --- /dev/null +++ b/layout/reftests/layers/pull-background-displayport-6.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if these contents are wider than the uniform area behind the scrollbox</title> + +<style> + +div { + min-height: 50px; + box-model: border-box; +} + +.first, .second { + border: 1px solid blue; + margin: 50px 0; +} + +.border { + border: 1px solid black; +} + +.scrollable { + height: auto; + overflow: auto; +} + +.scrollarea { + width: 5000px; + border: none; + padding: 10px 0 20px; + height: auto; +} + +.scrolled { + margin-left: 220px; + width: 2000px; + height: 100px; + border-color: red; +} + +body { + margin: 0; + padding: 0 100px; + height: 3000px; +} + +</style> + +<div class="first" reftest-assigned-layer="page-background"> + <!-- + This is just a regular box, it should end up in the page background layer. + --> +</div> + +<div class="scrollable border" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="2000" reftest-displayport-h="200"> + <div class="scrollarea"> + <div class="scrolled border reftest-opaque-layer"> + <!-- + The background of .scrollable is uniform and opaque, + .scrolled should be able to pull up that background color and become + opaque itself. + --> + </div> + </div> +</div> + +<div class="second" reftest-assigned-layer="page-background"> + <!-- + This should share a layer with .first and the page background. + --> +</div> + +<script> + +var scrollable = document.querySelector(".scrollable"); + +// Make .scrollable start out with active scrolling. +scrollable.scrollLeft = 0; +scrollable.scrollLeft = 20; + +</script> + diff --git a/layout/reftests/layers/reftest.list b/layout/reftests/layers/reftest.list new file mode 100644 index 0000000000..b037d5d2c9 --- /dev/null +++ b/layout/reftests/layers/reftest.list @@ -0,0 +1,45 @@ +== move-to-background-1.html move-to-background-1-ref.html +fuzzy-if(cocoaWidget,0-2,0-6) random-if(Android) == component-alpha-exit-1.html component-alpha-exit-1-ref.html # bug 760275 +fuzzy-if(cocoaWidget,0-2,0-6) random-if(Android) == component-alpha-enter-1.html component-alpha-enter-1-ref.html + +!= pull-background-1.html about:blank +!= pull-background-2.html about:blank +!= pull-background-3.html about:blank +!= pull-background-4.html about:blank +!= pull-background-5.html about:blank +!= pull-background-6.html about:blank + +# The animated-position tests are disabled for intermittent failures / passes, bug 1150941 +skip != pull-background-animated-position-1.html about:blank # Fails with event regions +skip != pull-background-animated-position-2.html about:blank +skip != pull-background-animated-position-3.html about:blank # Fails because PaintedLayer item assignment doesn't recognize overflow:hidden clips +skip != pull-background-animated-position-4.html about:blank # Fails because PaintedLayer item assignment and background pulling don't recognize overflow:hidden clips +skip != pull-background-animated-position-5.html about:blank # Fails because ownLayer bounds don't anticipate changes of animated contents, but doesn't fail with event regions + +skip-if(!asyncPan) != pull-background-displayport-1.html about:blank +skip-if(!asyncPan) != pull-background-displayport-2.html about:blank +skip-if(!asyncPan) != pull-background-displayport-3.html about:blank # fails with non-overlay scrollbars and event regions due to bug 1148515 +skip-if(!asyncPan) != pull-background-displayport-4.html about:blank # fails with non-overlay scrollbars and event regions due to bug 1148515 +skip-if(!asyncPan) != pull-background-displayport-5.html about:blank +skip-if(!asyncPan) != pull-background-displayport-6.html about:blank # fails with non-overlay scrollbars and event regions due to bug 1148515 + +skip-if(Android&&emulator) fuzzy(0-2,0-30150) == opacity-blending.html opacity-blending-ref.html +fuzzy(0-16,0-29) == mask-layer-transform.html mask-layer-transform-ref.html +fuzzy-if(gtkWidget,0-1,0-17) fuzzy-if(Android,0-3,0-4) == forced-bg-color-outside-visible-region.html forced-bg-color-outside-visible-region-ref.html +!= layerize-over-fixed-bg-1.html about:blank +skip-if(!asyncPan) != fixed-pos-scrolled-clip-layerize.html about:blank +skip-if(!asyncPan) == fixed-pos-scrolled-clip-opacity-layerize.html fixed-pos-scrolled-clip-opacity-inside-layerize.html + +# These tests check whether the GPU process is working. We expect it to work if: +# E10S is enabled, and +# Direct2D 1.1 works (as a proxy for Windows 7 SP1 + Platform Update or higher), OR +# The GPU process has been forced on. +# If these conditions are met, but the GPU process is not on, these tests will turn on +# and compare false. +skip-if(!browserIsRemote||!d2d||gpuProcess) == data:text/plain,FAIL about:blank +skip-if(!gpuProcessForceEnabled||gpuProcess) == data:text/plain,FAIL about:blank + +fuzzy(0-1,0-8033) == opacity-background-1.html opacity-background-1-ref.html +== opacity-flattening-large-image.html opacity-flattening-large-image-ref.html + +== opacity-keep-intermediate-surface-too-long.html opacity-keep-intermediate-surface-too-long-ref.html |