Bug 1298218 - Tests. r?mattwoodrow
MozReview-Commit-ID: LW4I9M5OXc9
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:fixed with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.greenSquare {
+ position: absolute;
+ top: 300px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ background: lime;
+}
+
+</style>
+
+<div class="greenSquare"></div>
+
+<script>
+
+document.documentElement.scrollTop = 200;
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-1.html
@@ -0,0 +1,40 @@
+<!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;
+}
+
+.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, lime) black 0 100px no-repeat;
+ background-size: 100% 200px;
+}
+
+</style>
+
+<div class="absoluteClip">
+ <div class="fixed"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:fixed should not be clipped by the subframe clip, but it should be clipped by the "clip" clip, and the "clip" clip should be moved by the subframe.</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.subframe {
+ margin-top: 300px;
+ width: 400px;
+ height: 400px;
+ overflow: auto;
+}
+
+.subframeScrolled {
+ height: 800px;
+}
+
+.greenSquare {
+ position: absolute;
+ top: 150px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ background: lime;
+}
+
+</style>
+
+<div class="subframe">
+ <div class="subframeScrolled"></div>
+</div>
+
+<div class="greenSquare"></div>
+
+<script>
+
+document.documentElement.scrollTop = 50;
+document.querySelector('.subframe').scrollTop = 150;
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-2.html
@@ -0,0 +1,59 @@
+<!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="50">
+
+<title>position:fixed should not be clipped by the subframe clip, but it should be clipped by the "clip" clip, and the "clip" clip should be moved by the subframe.</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.subframe {
+ margin-top: 300px;
+ width: 400px;
+ height: 400px;
+ overflow: auto;
+}
+
+.subframeScrolled {
+ height: 800px;
+ position: relative;
+}
+
+.absoluteClip {
+ position: absolute;
+ top: 0px;
+ 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, lime) black 0 100px no-repeat;
+ background-size: 100% 200px;
+}
+
+</style>
+
+<div class="subframe"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="400" reftest-displayport-h="800"
+ reftest-async-scroll-x="0" reftest-async-scroll-y="150">
+ <div class="subframeScrolled">
+ <div class="absoluteClip">
+ <div class="fixed"></div>
+ </div>
+ </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.subframe {
+ position: relative;
+ left: 10px;
+ top: 10px;
+ width: 500px;
+ height: 600px;
+ overflow: auto;
+ box-shadow: 0 0 0 2px black;
+}
+
+.scrolled {
+ height: 4000px;
+}
+
+.greenSquare {
+ position: absolute;
+ top: 300px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ background: lime;
+}
+
+</style>
+
+<div class="subframe">
+ <div class="scrolled">
+ <div class="greenSquare"></div>
+ </div>
+</div>
+
+<script>
+
+document.documentElement.scrollTop = 20;
+document.querySelector('.subframe').scrollTop = 200;
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-3.html
@@ -0,0 +1,65 @@
+<!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="20">
+
+<title>like fixed-pos-scrolled-clip-1.html, but inside a transform. This also tests that scrolling the root scroll frame moves the "fixed" layer which is only fixed with respect to the transform, not with respect to the viewport.</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.transform {
+ transform: translate(10px, 10px);
+ width: 500px;
+}
+
+.subframe {
+ height: 600px;
+ overflow: auto;
+ box-shadow: 0 0 0 2px black;
+}
+
+.scrolled {
+ height: 4000px;
+ position: relative;
+}
+
+.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, lime) black 0 100px no-repeat;
+ background-size: 100% 200px;
+}
+
+</style>
+
+<div class="transform">
+ <div class="subframe"
+ 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">
+ <div class="scrolled">
+ <div class="absoluteClip">
+ <div class="fixed"></div>
+ </div>
+ </div>
+ </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: This is fixed-pos-scrolled-clip-1.html in an iframe</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.subframe {
+ position: relative;
+ left: 10px;
+ top: 10px;
+ width: 500px;
+ height: 600px;
+ overflow: auto;
+ box-shadow: 0 0 0 2px black;
+}
+
+.scrolled {
+ height: 4000px;
+}
+
+.greenSquare {
+ position: absolute;
+ top: 300px;
+ left: 100px;
+ width: 200px;
+ height: 200px;
+ background: lime;
+}
+
+</style>
+
+<div class="subframe">
+ <div class="scrolled">
+ <div class="greenSquare"></div>
+ </div>
+</div>
+
+<script>
+
+document.documentElement.scrollTop = 20;
+document.querySelector('.subframe').scrollTop = 200;
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/fixed-pos-scrolled-clip-4.html
@@ -0,0 +1,29 @@
+<!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="20">
+
+<title>This is fixed-pos-scrolled-clip-1.html in an iframe</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.subframe {
+ position: relative;
+ left: 10px;
+ top: 10px;
+ border: 0;
+ width: 500px;
+ height: 600px;
+ overflow: auto;
+ box-shadow: 0 0 0 2px black;
+}
+
+</style>
+
+<iframe class="subframe" src="fixed-pos-scrolled-clip-1.html"></iframe>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:sticky with scrolled clip should correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.halfBox {
+ position: absolute;
+ left: 0;
+ top: 100px;
+ width: 100px;
+ height: 50px;
+ box-sizing: border-box;
+ border: 1px solid black;
+ border-bottom: none;
+}
+
+</style>
+
+<div class="halfBox"></div>
+
+<script>
+
+document.documentElement.scrollTop = 100;
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-1.html
@@ -0,0 +1,38 @@
+<!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="100">
+
+<title>position:sticky with scrolled clip should correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+ position: relative;
+}
+
+.absoluteClip {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100px;
+ height: 200px;
+ clip: rect(auto, auto, 150px, auto);
+}
+
+.sticky {
+ position: sticky;
+ top: 0;
+ box-sizing: border-box;
+ height: 100px;
+ border: 1px solid black;
+}
+
+</style>
+
+<div class="absoluteClip">
+ <div class="sticky"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<title>Reference for: position:sticky with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+}
+
+.completeBox {
+ position: absolute;
+ left: 0;
+ top: 100px;
+ width: 100px;
+ height: 100px;
+ box-sizing: border-box;
+ border: 1px solid black;
+}
+
+</style>
+
+<div class="completeBox"></div>
+
+<script>
+
+document.documentElement.scrollTop = 100;
+
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-scrolled-clip-2.html
@@ -0,0 +1,38 @@
+<!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="100">
+
+<title>position:sticky with scrolled clip should prerender everything and correctly move the clip</title>
+
+<style>
+
+body {
+ margin: 0;
+ height: 4000px;
+ position: relative;
+}
+
+.absoluteClip {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100px;
+ height: 200px;
+ clip: rect(50px, auto, auto, auto);
+}
+
+.sticky {
+ position: sticky;
+ top: 0;
+ box-sizing: border-box;
+ height: 100px;
+ border: 1px solid black;
+}
+
+</style>
+
+<div class="absoluteClip">
+ <div class="sticky"></div>
+</div>
--- a/layout/reftests/async-scrolling/reftest.list
+++ b/layout/reftests/async-scrolling/reftest.list
@@ -44,16 +44,22 @@ fuzzy-if(Android,6,4) skip-if(!asyncPan)
fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-1.html perspective-scrolling-1-ref.html
fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-2.html perspective-scrolling-2-ref.html
fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-3.html perspective-scrolling-3-ref.html
fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-4.html perspective-scrolling-4-ref.html
pref(apz.disable_for_scroll_linked_effects,true) skip-if(!asyncPan) == disable-apz-for-sle-pages.html disable-apz-for-sle-pages-ref.html
fuzzy-if(browserIsRemote&&d2d,1,19) skip-if(!asyncPan) == background-blend-mode-1.html background-blend-mode-1-ref.html
skip-if(Android||!asyncPan) != opaque-fractional-displayport-1.html about:blank
skip-if(Android||!asyncPan) != opaque-fractional-displayport-2.html about:blank
+fuzzy-if(Android,6,4) skip-if(!asyncPan) == fixed-pos-scrolled-clip-1.html fixed-pos-scrolled-clip-1-ref.html
+fuzzy-if(Android,6,8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-2.html fixed-pos-scrolled-clip-2-ref.html
+fuzzy-if(Android,6,8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-3.html fixed-pos-scrolled-clip-3-ref.html
+fuzzy-if(Android,6,8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-4.html fixed-pos-scrolled-clip-4-ref.html
+fuzzy-if(Android,6,4) skip-if(!asyncPan) == position-sticky-scrolled-clip-1.html position-sticky-scrolled-clip-1-ref.html
+fuzzy-if(Android,6,4) skip == position-sticky-scrolled-clip-2.html position-sticky-scrolled-clip-2-ref.html # bug ?????? - incorrectly applying clip to sticky contents
# for the following tests, we want to disable the low-precision buffer
# as it will expand the displayport beyond what the test specifies in
# its reftest-displayport attributes, and interfere with where we expect
# checkerboarding to occur
default-preferences pref(layers.low-precision-buffer,false)
skip-if(!asyncPan) == checkerboard-1.html checkerboard-1-ref.html
skip-if(!asyncPan) == checkerboard-2.html checkerboard-2-ref.html
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
--- a/layout/reftests/layers/reftest.list
+++ b/layout/reftests/layers/reftest.list
@@ -17,16 +17,18 @@ skip-if(!asyncPan) != pull-background-di
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
fuzzy(2,30150) == opacity-blending.html opacity-blending-ref.html
fuzzy(16,5) == mask-layer-transform.html mask-layer-transform-ref.html
fuzzy-if(gtkWidget,1,17) == forced-bg-color-outside-visible-region.html forced-bg-color-outside-visible-region-ref.html
!= layerize-over-fixed-bg-1.html about:blank
+!= fixed-pos-scrolled-clip-layerize.html about:blank
+== 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
