diff options
Diffstat (limited to 'layout/reftests/async-scrolling')
105 files changed, 2204 insertions, 0 deletions
diff --git a/layout/reftests/async-scrolling/background-blend-mode-1-ref.html b/layout/reftests/async-scrolling/background-blend-mode-1-ref.html new file mode 100644 index 000000000..b5a9e0c12 --- /dev/null +++ b/layout/reftests/async-scrolling/background-blend-mode-1-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Bug 1248913 - Keep background-attachment:fixed image fixed under APZ scrolling even when a background-blend-mode is applied.</title> + +<style> + +html { + background: radial-gradient(circle 200px at 400px 400px, lime 100px, transparent 0) scroll, + radial-gradient(circle 200px at 400px 300px, blue 100px, transparent 0) scroll + white no-repeat; + background-blend-mode: multiply; + height: 100%; +} + +</style> + +<div></div> diff --git a/layout/reftests/async-scrolling/background-blend-mode-1.html b/layout/reftests/async-scrolling/background-blend-mode-1.html new file mode 100644 index 000000000..607e97e75 --- /dev/null +++ b/layout/reftests/async-scrolling/background-blend-mode-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html reftest-async-scroll + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="1000" + reftest-async-scroll-x="0" reftest-async-scroll-y="100"> + +<meta charset="utf-8"> +<title>Bug 1248913 - Keep background-attachment:fixed image fixed under APZ scrolling even when a background-blend-mode is applied.</title> + +<style> + +html { + background: radial-gradient(circle 200px at 400px 400px, lime 100px, transparent 0) fixed, + radial-gradient(circle 200px at 400px 400px, blue 100px, transparent 0) scroll + white no-repeat; + background-blend-mode: multiply; + overflow: hidden; +} + +body { + height: 4000px; +} + +</style> + +<div></div> diff --git a/layout/reftests/async-scrolling/bg-fixed-1-ref.html b/layout/reftests/async-scrolling/bg-fixed-1-ref.html new file mode 100644 index 000000000..f8f0aef05 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="background-image:url(repeatable-diagonal-gradient.png); + background-repeat:no-repeat; + background-position:top left;"> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-1.html b/layout/reftests/async-scrolling/bg-fixed-1.html new file mode 100644 index 000000000..0e028105d --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-1.html @@ -0,0 +1,13 @@ +<!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"> +<body style="overflow:hidden; height:3000px; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:top left;"> + <!-- test that background-attachment:fixed backgrounds don't move with async scrolling --> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-clip-1.html b/layout/reftests/async-scrolling/bg-fixed-child-clip-1.html new file mode 100644 index 000000000..a39c96e8a --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-1.html @@ -0,0 +1,16 @@ +<!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"> +<body style="overflow:hidden; height:3000px; margin:0;"> + <div style="margin-top: 100px; height: 100px; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:top left;"> + </div> + <!-- test that the clip of a background-attachment:fixed background of a + child element moves correctly during async scrolling --> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-clip-2.html b/layout/reftests/async-scrolling/bg-fixed-child-clip-2.html new file mode 100644 index 000000000..ec63dc8fd --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-2.html @@ -0,0 +1,20 @@ +<!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"> +<body style="overflow:hidden; height:3000px; margin:0;"> + <div style="margin-top: 100px; height: 100px; + position: relative;"> + <div style="position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:top left;"> + </div> + </div> + <!-- test that the clip of a background-attachment:fixed background of a + child element moves correctly during async scrolling --> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html new file mode 100644 index 000000000..7ae384774 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-clip-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; margin:0;"> + <div style="margin-top: 50px; height: 100px; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:top left;"> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html new file mode 100644 index 000000000..c71b15b43 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-mask-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; margin:0;"> + <div style="margin-top: 50px; height: 100px; + background-image:url(repeatable-diagonal-gradient.png); + background-repeat:no-repeat; + background-position:0px -50px; + border-radius:50px;"> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-mask.html b/layout/reftests/async-scrolling/bg-fixed-child-mask.html new file mode 100644 index 000000000..a280259f4 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-mask.html @@ -0,0 +1,17 @@ +<!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"> +<body style="overflow:hidden; height:3000px; margin:0;"> + <div style="margin-top: 100px; height: 100px; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:top left; + border-radius:50px;"> + </div> + <!-- test that the clip of a background-attachment:fixed background of a + child element moves correctly during async scrolling --> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html new file mode 100644 index 000000000..8f647b7c9 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; margin:0;"> + <div style="height: 100px; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:top left;"> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html new file mode 100644 index 000000000..9c385c20c --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-1.html @@ -0,0 +1,14 @@ +<!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"> +<body style="overflow:hidden; height:3000px; margin:0;"> + <div style="height: 50px; position: relative; + background:url(repeatable-diagonal-gradient.png) top left fixed no-repeat;"> + </div> + <div style="height: 100px; + background:url(repeatable-diagonal-gradient.png) top left fixed no-repeat;"> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html new file mode 100644 index 000000000..d5595cd82 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; margin:0;"> + <div style="width: 200px; height: 100px; background: lime; margin-top: 200px;"></div> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html new file mode 100644 index 000000000..028a906c2 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-no-culling-2.html @@ -0,0 +1,12 @@ +<!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="1000"> +<body style="overflow: hidden; height: 3000px; margin: 0;"> + <div style="height: 1200px; + background: linear-gradient(white, white) top left fixed no-repeat;"> + </div> + <div style="width: 200px; height: 100px; background: lime;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child-ref.html b/layout/reftests/async-scrolling/bg-fixed-child-ref.html new file mode 100644 index 000000000..9ca02365f --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; margin:0;"> + <div style="height: 1000px; + background-image:url(repeatable-diagonal-gradient.png); + background-repeat:no-repeat; + background-position:top left;"> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-child.html b/layout/reftests/async-scrolling/bg-fixed-child.html new file mode 100644 index 000000000..eda15304d --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-child.html @@ -0,0 +1,15 @@ +<!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"> +<body style="overflow:hidden; height:3000px; margin:0;"> + <div style="height: 1000px; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:top left;"> + </div> + <!-- test that background-attachment:fixed backgrounds of child elements don't move with async scrolling --> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html b/layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html new file mode 100644 index 000000000..b5efcc741 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-cover-1-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; height:3000px; + background-image:url(repeatable-diagonal-gradient.png); + background-repeat:no-repeat; + background-position:0 300px;"> + <div style="position:absolute; background:black; top:0; left:0; width:500px; height:400px;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-1.html b/layout/reftests/async-scrolling/bg-fixed-cover-1.html new file mode 100644 index 000000000..e2d77da95 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-cover-1.html @@ -0,0 +1,15 @@ +<!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"> +<body style="overflow:hidden; height:3000px; + background-image:url(repeatable-diagonal-gradient.png); + background-attachment:fixed; + background-repeat:no-repeat; + background-position:0 300px;"> + <!-- Test that background-attachment:fixed content covered by scrolling content gets rendered + properly --> + <div style="position:absolute; background:black; top:200px; left:0; width:500px; height:600px;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html b/layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html new file mode 100644 index 000000000..8d9601f2a --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-cover-2-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; height:3000px; + background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png); + background-repeat:no-repeat; + background-position:0 300px, 0 0;"> + <!-- Test that scrolling content covered by background-attachment:fixed content + gets rendered properly --> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-2.html b/layout/reftests/async-scrolling/bg-fixed-cover-2.html new file mode 100644 index 000000000..258d2dd66 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-cover-2.html @@ -0,0 +1,14 @@ +<!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="300"> +<body style="overflow:hidden; height:3000px; + background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png); + background-attachment:fixed, scroll; + background-repeat:no-repeat; + background-position:0 300px;"> + <!-- Test that scrolling content covered by background-attachment:fixed content + gets rendered properly --> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html b/layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html new file mode 100644 index 000000000..eb87febce --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-cover-3-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; height:3000px; + background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png); + background-repeat:no-repeat; + background-position:0 300px, 0 0;"> + <!-- Test that scrolling content above background-attachment:fixed content but not + intersecting it doesn't get moved down to a layer below the + background-attachment:fixed content --> + <div style="position:absolute; background:black; left:0; top:300px; width:500px; height:200px;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-cover-3.html b/layout/reftests/async-scrolling/bg-fixed-cover-3.html new file mode 100644 index 000000000..d909ce6f1 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-cover-3.html @@ -0,0 +1,16 @@ +<!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="300"> +<body style="overflow:hidden; height:3000px; + background-image:url(repeatable-diagonal-gradient.png), url(repeatable-diagonal-gradient.png); + background-attachment:fixed, scroll; + background-repeat:no-repeat; + background-position:0 300px;"> + <!-- Test that scrolling content above background-attachment:fixed content but not + intersecting it doesn't get moved down to a layer below the + background-attachment:fixed content --> + <div style="position:absolute; background:black; left:0; top:600px; width:500px; height:200px;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html b/layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html new file mode 100644 index 000000000..9d54bd813 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-in-opacity-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html reftest-async-scroll > +<style> + +body { + margin: 0px; + position: relative; + height: 1200.23px; + overflow: hidden; +} + +.fixed-background { + position: absolute; + top: 0px; + bottom: 0px; + width: 100px; + background: linear-gradient(blue, blue) no-repeat fixed 0px 200px; + background-size: 100px 100px; + opacity: 0.5; +} + +</style> +<div style="overflow: hidden;" class="fixed-background"></div> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-in-opacity.html b/layout/reftests/async-scrolling/bg-fixed-in-opacity.html new file mode 100644 index 000000000..d668f3b77 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-in-opacity.html @@ -0,0 +1,27 @@ +<!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.23"> +<style> + +body { + margin: 0px; + position: relative; + height: 1200.23px; + overflow: hidden; +} + +.fixed-background { + position: absolute; + top: 0px; + bottom: 0px; + width: 100px; + background: linear-gradient(blue, blue) no-repeat fixed 0px 200px; + background-size: 100px 100px; + opacity: 0.5; +} + +</style> +<div style="overflow: hidden;" class="fixed-background"></div> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html b/layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html new file mode 100644 index 000000000..a59d053c4 --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-transformed-image-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + +<style> + +body { + margin: 0; + overflow: hidden; +} + +div { + height: 1400px; + background: url(repeatable-diagonal-gradient.png) top left / 512px 512px no-repeat +} + +</style> + +<div></div> +</html> diff --git a/layout/reftests/async-scrolling/bg-fixed-transformed-image.html b/layout/reftests/async-scrolling/bg-fixed-transformed-image.html new file mode 100644 index 000000000..360d3682d --- /dev/null +++ b/layout/reftests/async-scrolling/bg-fixed-transformed-image.html @@ -0,0 +1,21 @@ +<!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"> +<style> + +body { + margin: 0; + overflow: hidden; +} + +div { + height: 1400px; + background: url(repeatable-diagonal-gradient.png) top left / 512px 512px fixed no-repeat +} + +</style> + +<div></div> +</html> diff --git a/layout/reftests/async-scrolling/checkerboard-1-ref.html b/layout/reftests/async-scrolling/checkerboard-1-ref.html new file mode 100644 index 000000000..1c3a1e455 --- /dev/null +++ b/layout/reftests/async-scrolling/checkerboard-1-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<html> +<body style="background-color: green; overflow:hidden"> + <div style="position:absolute; left: 0px; top: 0px; width: 100px; height: 200px; background-color: red"></div> +</body> diff --git a/layout/reftests/async-scrolling/checkerboard-1.html b/layout/reftests/async-scrolling/checkerboard-1.html new file mode 100644 index 000000000..2f89dee51 --- /dev/null +++ b/layout/reftests/async-scrolling/checkerboard-1.html @@ -0,0 +1,11 @@ +<!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="1800"> +<!-- This is a simple test where we set the async-scroll position so that it + extends outside the displayport, and ensure that the checkerboarded area + is filled with the expected background color. --> +<body style="background-color: green; height: 5000px; overflow:hidden"> + <div style="position:absolute; left: 0px; top: 1800px; width: 100px; height: 400px; background-color: red"></div> +</body> diff --git a/layout/reftests/async-scrolling/checkerboard-2-ref.html b/layout/reftests/async-scrolling/checkerboard-2-ref.html new file mode 100644 index 000000000..d1927e43d --- /dev/null +++ b/layout/reftests/async-scrolling/checkerboard-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="background-color: green; overflow:hidden"> + <div style="position:absolute; left: 0px; top: 0px; background-color: yellow; width: 100px; height: 200px"></div> + <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div> +</body> diff --git a/layout/reftests/async-scrolling/checkerboard-2.html b/layout/reftests/async-scrolling/checkerboard-2.html new file mode 100644 index 000000000..5d44d0133 --- /dev/null +++ b/layout/reftests/async-scrolling/checkerboard-2.html @@ -0,0 +1,16 @@ +<!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="1800"> +<!-- This is a test where we set the async-scroll position so that it + extends outside the displayport, but also have some fixed-position + elements in the mix. In particular, the purple element is below + (in z-order) the main scrolling content and should not be made visible + while checkerboarding; the checkerboarding code should cover it up + with the appropriate background color. --> +<body style="background-color: green; height: 5000px; overflow:hidden"> + <div style="position:fixed; left: 0px; top: 0px; width: 100px; height: 500px; background-color: purple; z-index: -1"></div> + <div style="position:absolute; left: 0px; top: 500px; background-color: yellow; width: 100px; height: 4500px"></div> + <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div> +</body> diff --git a/layout/reftests/async-scrolling/checkerboard-3-ref.html b/layout/reftests/async-scrolling/checkerboard-3-ref.html new file mode 100644 index 000000000..bba831e93 --- /dev/null +++ b/layout/reftests/async-scrolling/checkerboard-3-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<html> +<body style="background-color: green; overflow:hidden"> + <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div> +</body> diff --git a/layout/reftests/async-scrolling/checkerboard-3.html b/layout/reftests/async-scrolling/checkerboard-3.html new file mode 100644 index 000000000..f8af32ea5 --- /dev/null +++ b/layout/reftests/async-scrolling/checkerboard-3.html @@ -0,0 +1,14 @@ +<!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="2100"> +<!-- This is the exact same test as checkerboard-2.html, but we put + the scroll position entirely outside of the displayport. This ensures + that even we do the proper checkerboarding even if the layer would + otherwise be culled out in the compositor because it is not on-screen. --> +<body style="background-color: green; height: 5000px; overflow:hidden"> + <div style="position:fixed; left: 0px; top: 0px; width: 100px; height: 500px; background-color: purple; z-index: -1"></div> + <div style="position:absolute; left: 0px; top: 500px; background-color: yellow; width: 100px; height: 4500px"></div> + <div style="position:fixed; left: 10px; top: 10px; width: 10px; height: 10px; background-color: blue"></div> +</body> diff --git a/layout/reftests/async-scrolling/culling-1-ref.html b/layout/reftests/async-scrolling/culling-1-ref.html new file mode 100644 index 000000000..5b3bb1669 --- /dev/null +++ b/layout/reftests/async-scrolling/culling-1-ref.html @@ -0,0 +1,23 @@ +<html> + <head> + <title>Culling Test</title> + <meta name="viewport" content="width=device-width"> + </head> + <body style="background:red" onload="loaded()"> + <div style="height:390px; width:300px; overflow-y:hidden; background:red"> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin-top:15px; width:300px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + </div> + <script> + function loaded() { + var scrollableDiv = document.querySelector("div"); + scrollableDiv.scrollTop = 10; + } + </script> + </body> +</html> diff --git a/layout/reftests/async-scrolling/culling-1.html b/layout/reftests/async-scrolling/culling-1.html new file mode 100644 index 000000000..b9766b979 --- /dev/null +++ b/layout/reftests/async-scrolling/culling-1.html @@ -0,0 +1,20 @@ +<html reftest-async-scroll> + <head> + <title>Culling Test</title> + <meta name="viewport" content="width=device-width"> + </head> + <body style="background:red"> + <div style="height:390px; width:300px; overflow-y:hidden; background:red" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="300" reftest-displayport-h="400" + reftest-async-scroll-x="0" reftest-async-scroll-y="10"> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin-top:15px; width:300px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + <div style="margin:15px; width:200px; height:40px; background:blue"></div> + </div> + </body> +</html> diff --git a/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html b/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html new file mode 100644 index 000000000..8e603fbc5 --- /dev/null +++ b/layout/reftests/async-scrolling/disable-apz-for-sle-pages-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Check that the apz.disable_for_sle_pages pref behaves as expected</title> + <script> + addEventListener('load', function() { + window.scrollTo(0, 100); + setTimeout(done, 0); + }, false); + + function done() { + document.documentElement.classList.remove('reftest-wait'); + } + </script> + </head> + <body style="height: 5000px; background-image:url(repeatable-diagonal-gradient.png);"> + <div id="fake-fixed" style="position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: green"></div> + </body> +</html> diff --git a/layout/reftests/async-scrolling/disable-apz-for-sle-pages.html b/layout/reftests/async-scrolling/disable-apz-for-sle-pages.html new file mode 100644 index 000000000..ac3447339 --- /dev/null +++ b/layout/reftests/async-scrolling/disable-apz-for-sle-pages.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-snapshot-all reftest-no-flush" reftest-async-scroll + reftest-async-scroll-y="200"> + <head> + <title>Check that the apz.disable_for_sle_pages pref behaves as expected</title> + <script> + // Upon load, this page scrolls to (0, 100). This triggers a scroll event, + // which runs the scroll listener below. The scroll listener updates the + // position of the div to simulate position:fixed using a scroll-linked + // effect. The scroll-linked effect detector should then report that the + // document contains such an effect, which will disable APZ on the page. + // That in turn will cause the reftest-async-scroll-y to get ignored, and + // that's what the reftest checks for. + + addEventListener('scroll', function() { + document.getElementById('fake-fixed').style.top = window.scrollY + "px"; + }, false); + + addEventListener('load', function() { + window.scrollTo(0, 100); + setTimeout(done, 0); + }, false); + + function done() { + document.documentElement.classList.remove('reftest-wait'); + } + </script> + </head> + <body style="height: 5000px; background-image:url(repeatable-diagonal-gradient.png);"> + <div id="fake-fixed" style="position: absolute; top: 0; left: 100px; width: 100px; height: 100px; background-color: green"></div> + </body> +</html> diff --git a/layout/reftests/async-scrolling/element-1-ref.html b/layout/reftests/async-scrolling/element-1-ref.html new file mode 100644 index 000000000..f7c40e2c5 --- /dev/null +++ b/layout/reftests/async-scrolling/element-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/async-scrolling/element-1.html b/layout/reftests/async-scrolling/element-1.html new file mode 100644 index 000000000..78418c159 --- /dev/null +++ b/layout/reftests/async-scrolling/element-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html reftest-async-scroll> +<body> + <!-- Test that element content scrolls asynchronously --> + <div style="width:400px; height:500px; overflow:hidden; 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:purple"></div> + </div> +</html> diff --git a/layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html b/layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html new file mode 100644 index 000000000..5996b776e --- /dev/null +++ b/layout/reftests/async-scrolling/fixed-pos-scrollable-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<meta name="viewport" content="width=device-width"> +<body style="height: 5000px; overflow:hidden"> + <div style="display: block; margin-top: 100px; position:fixed; overflow:scroll; top: 0px; width: 50px; height: 100px"><div style="height:200px; background-color: red"></div></div> + <div style="display: block; margin-top: 20px; position:relative; left: 50px; width: 50px; height: 100px; background-color: red"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/fixed-pos-scrollable-1.html b/layout/reftests/async-scrolling/fixed-pos-scrollable-1.html new file mode 100644 index 000000000..cabd57a9d --- /dev/null +++ b/layout/reftests/async-scrolling/fixed-pos-scrollable-1.html @@ -0,0 +1,15 @@ +<!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="80"> +<meta name="viewport" content="width=device-width"> +<body style="height: 5000px; overflow:hidden"> + <!-- In this test the fixed-position element is a child of the scrollable layer, but + gets a clip rect because it is itself a container for scrolling sublayers. This + tests that such a layer is transformed correctly while an async scroll transform + is in effect. --> + <div style="display: block; margin-top: 100px; position:fixed; overflow:scroll; top: 0px; width: 50px; height: 100px"><div style="height:200px; background-color: red"></div></div> + <div style="display: block; margin-top: 100px; position:relative; left: 50px; width: 50px; height: 100px; background-color: red"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html b/layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html new file mode 100644 index 000000000..12b6ee367 --- /dev/null +++ b/layout/reftests/async-scrolling/group-opacity-surface-size-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<style> + +body { + margin: 0; + overflow: hidden; +} + +.opacity { + opacity: 0.8; +} + +.box { + left: 0; + top: 200px; + width: 200px; + height: 200px; +} + +.absolute { + position: absolute; + background: green; + top: 100px; +} + +.fixed { + position: absolute; + background: blue; +} + +</style> + +<div class="opacity"> + <div class="box absolute"></div> + <div class="box fixed"></div> +</div> diff --git a/layout/reftests/async-scrolling/group-opacity-surface-size-1.html b/layout/reftests/async-scrolling/group-opacity-surface-size-1.html new file mode 100644 index 000000000..e37626694 --- /dev/null +++ b/layout/reftests/async-scrolling/group-opacity-surface-size-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="100"> +<style> + +body { + margin: 0; + overflow: hidden; + height: 4000px; +} + +.opacity { + opacity: 0.8; +} + +.box { + left: 0; + top: 200px; + width: 200px; + height: 200px; +} + +.absolute { + position: absolute; + background: green; +} + +.fixed { + position: fixed; + background: blue; +} + +</style> + +<div class="opacity"> + <div class="box absolute"></div> + <div class="box fixed"></div> +</div> diff --git a/layout/reftests/async-scrolling/iframe-1-ref.html b/layout/reftests/async-scrolling/iframe-1-ref.html new file mode 100644 index 000000000..76537c52c --- /dev/null +++ b/layout/reftests/async-scrolling/iframe-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<iframe style="width:300px; height:600px; border:2px solid blue" + srcdoc="<!DOCTYPE HTML> + <html style='overflow:hidden'> + <div style='height:450px'></div> + <div style='height:200px; background:purple'> + <div style='display:inline-block; width:20px; height:20px; background:yellow;'></div> + </div>"></iframe> diff --git a/layout/reftests/async-scrolling/iframe-1.html b/layout/reftests/async-scrolling/iframe-1.html new file mode 100644 index 000000000..fbd89d661 --- /dev/null +++ b/layout/reftests/async-scrolling/iframe-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html reftest-async-scroll> +<body> +<iframe style="width:300px; height:600px; border:2px solid blue" + srcdoc="<!DOCTYPE HTML> + <html 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' style='overflow:hidden'> + <div style='height:500px'></div> + <div style='height:200px; background:purple'> + <div style='display:inline-block; width:20px; height:20px; background:yellow;'></div> + </div>"></iframe> diff --git a/layout/reftests/async-scrolling/nested-1-ref.html b/layout/reftests/async-scrolling/nested-1-ref.html new file mode 100644 index 000000000..2ad0568e1 --- /dev/null +++ b/layout/reftests/async-scrolling/nested-1-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:400px; height:500px; overflow:hidden; border:2px solid black"> + <div style="width:300px; height:800px; overflow:hidden; border:2px solid blue; margin-top:-50px"> + <div style="height:450px"></div> + <div style="height:200px; background:purple"></div> + </div> + </div> +</html> diff --git a/layout/reftests/async-scrolling/nested-1.html b/layout/reftests/async-scrolling/nested-1.html new file mode 100644 index 000000000..c8fe42eb3 --- /dev/null +++ b/layout/reftests/async-scrolling/nested-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html reftest-async-scroll> +<body> + <!-- Test that nested active scrolling elements work --> + <div style="width:400px; height:500px; overflow:hidden; 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="width:300px; height:800px; overflow:hidden; border:2px solid blue" + 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:200px; background:purple"></div> + <div style="height:500px"></div> + </div> + </div> +</html> diff --git a/layout/reftests/async-scrolling/nested-2-ref.html b/layout/reftests/async-scrolling/nested-2-ref.html new file mode 100644 index 000000000..10ef23745 --- /dev/null +++ b/layout/reftests/async-scrolling/nested-2-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:400px; height:500px; overflow:hidden; border:2px solid black"> + <div style="width:300px; height:100px; overflow:hidden; border:2px solid blue; margin-top: 50px"> + <div style="height:200px; background:purple"></div> + </div> + <div class="filler" style="height: 1000px"></div> + </div> +</html> diff --git a/layout/reftests/async-scrolling/nested-2.html b/layout/reftests/async-scrolling/nested-2.html new file mode 100644 index 000000000..2ca625795 --- /dev/null +++ b/layout/reftests/async-scrolling/nested-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html reftest-async-scroll> +<body> + <!-- Test that nested active scrolling elements work --> + <div style="width:400px; height:500px; overflow:hidden; 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="width:300px; height:100px; overflow:hidden; border:2px solid blue; margin-top: 100px" + 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="0"> + <div style="height:200px; background:purple"></div> + </div> + <div class="filler" style="height: 1000px"></div> + </div> +</html> diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html new file mode 100644 index 000000000..64795e5cf --- /dev/null +++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-1.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en" + 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="1200"> +<meta charset="utf-8"> +<title>Scrolled blend mode</title> + +<style> + +body { + margin: 0; + padding: 100px; + height: 4000px; + background: white; +} + +#outer { + height: 4000px; + overflow: hidden; +} + +#inner-contents { + border: 1px solid black; + box-sizing: border-box; + width: 50px; + height: 50px; + mix-blend-mode: multiply; + margin-top: 1400px; +} + +</style> + +<div id="outer"> + <div id="inner"> + <div id="inner-contents"></div> + </div> +</div> diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html new file mode 100644 index 000000000..d85dc23e6 --- /dev/null +++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-2.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="en" + 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="1200"> +<meta charset="utf-8"> +<title>Scrolled blend mode</title> + +<style> + +body { + margin: 0; + padding: 100px; + height: 4000px; + background: white; +} + +#outer { + height: 4000px; + overflow: hidden; +} + +#inner { + transform: translateX(0); +} + +#inner-contents { + border: 1px solid black; + box-sizing: border-box; + width: 50px; + height: 50px; + mix-blend-mode: multiply; + margin-top: 1400px; +} + +</style> + +<div id="outer"> + <div id="inner"> + <div id="inner-contents"></div> + </div> +</div> diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html new file mode 100644 index 000000000..e128e2987 --- /dev/null +++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-3.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en" + 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="1200"> +<meta charset="utf-8"> +<title>Scrolled blend mode</title> + +<style> + +body { + margin: 0; + padding: 100px; + height: 4000px; + background: white; +} + +#outer { + height: 4000px; + overflow: hidden; +} + +#inner-contents { + border: 1px solid black; + box-sizing: border-box; + width: 50px; + height: 50px; + mix-blend-mode: multiply; + margin-top: 1400px; + transform: translateX(0); +} + +</style> + +<div id="outer"> + <div id="inner"> + <div id="inner-contents"></div> + </div> +</div> diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html new file mode 100644 index 000000000..883474724 --- /dev/null +++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-4.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html lang="en" + 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="1200"> +<meta charset="utf-8"> +<title>Scrolled blend mode</title> + +<style> + +body { + margin: 0; + padding: 100px; + height: 4000px; + background: white; +} + +#outer { + height: 4000px; + overflow: hidden; +} + +#inner { + transform: translateX(0); +} + +#inner-contents { + border: 1px solid black; + box-sizing: border-box; + width: 50px; + height: 50px; + mix-blend-mode: multiply; + margin-top: 1400px; + transform: translateX(0); +} + +</style> + +<div id="outer"> + <div id="inner"> + <div id="inner-contents"></div> + </div> +</div> diff --git a/layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html new file mode 100644 index 000000000..65660c6ca --- /dev/null +++ b/layout/reftests/async-scrolling/offscreen-clipped-blendmode-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Scrolled blend mode</title> + +<style> + +body { + margin: 0; + padding: 100px; + height: 4000px; + background: white; +} + +#inner-contents { + border: 1px solid black; + box-sizing: border-box; + width: 50px; + height: 50px; + margin-top: 1400px; +} + +</style> + +<div id="inner-contents"></div> + +<script> + +document.documentElement.scrollTop = 1200; + +</script> diff --git a/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html new file mode 100644 index 000000000..da251e5aa --- /dev/null +++ b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>Reference: Active opacity should be rendered if it's inside the display port, even if it's currently offscreen</title> + +<style> + +#scrollbox { + border: 1px solid black; + width: 200px; + height: 200px; + overflow: hidden; +} + +#scrolledContent { + height: 1000px; +} + +#opacity { + will-change: opacity; + opacity: 0.5; + margin-top: 250px; + width: 100px; + height: 100px; + box-sizing: border-box; + border: 1px solid blue; +} + + +</style> + +<div id="scrollbox"> + <div id="scrolledContent"> + <div id="opacity"></div> + </div> +</div> + +<script> + +document.getElementById("scrollbox").scrollTop = 150; + +</script> diff --git a/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html new file mode 100644 index 000000000..d36c940dd --- /dev/null +++ b/layout/reftests/async-scrolling/offscreen-prerendered-active-opacity.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html reftest-async-scroll> +<meta charset="utf-8"> +<title>Active opacity should be rendered if it's inside the display port, even if it's currently offscreen</title> + +<style> + +.scrollbox { + border: 1px solid black; + width: 200px; + height: 200px; + overflow: hidden; +} + +.scrolledContent { + height: 1000px; +} + +.opacity { + will-change: opacity; + opacity: 0.5; + margin-top: 250px; + width: 100px; + height: 100px; + box-sizing: border-box; + border: 1px solid blue; +} + + +</style> + +<div class="scrollbox" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="200" reftest-displayport-h="1000" + reftest-async-scroll-x="0" reftest-async-scroll-y="150"> + <div class="scrolledContent"> + <div class="opacity"></div> + </div> +</div> diff --git a/layout/reftests/async-scrolling/opaque-fractional-displayport-1.html b/layout/reftests/async-scrolling/opaque-fractional-displayport-1.html new file mode 100644 index 000000000..8a73a7f30 --- /dev/null +++ b/layout/reftests/async-scrolling/opaque-fractional-displayport-1.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Make sure the scrolled layer is opaque even if the scrolled area is fractional</title> + +<style> + +body { + margin: 0; +} + +.scrollbox { + margin: 50px; + width: 200px; + height: 200px; + overflow: auto; + + /* Make the background "non-uniform" so that the scrolled layer does not + * pull up a background color. */ + background: linear-gradient(to bottom, white, transparent); +} + +.scrolled-contents { + height: 300.2px; + background-color: lime; + box-sizing: border-box; +} + +.transparent-overlap-of-fractional-edge { + margin: 0 20px; + height: 40px; + /* This element has a box-shadow that overlaps the bottom of the scrolled + * area. Box shadows do not expand the scrollable area. */ + box-shadow: 0 280px rgba(0, 0, 255, 0.5); +} + +</style> + +<body> + +<div class="scrollbox" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="200" reftest-displayport-h="300.2" + reftest-async-scroll-x="0" reftest-async-scroll-y="0"> + <div class="scrolled-contents"> + <div class="transparent-overlap-of-fractional-edge reftest-opaque-layer"> + <!-- This element has the magic "reftest-opaque-layer" class which + constitutes the actual test here. --> + </div> + </div> +</div> diff --git a/layout/reftests/async-scrolling/opaque-fractional-displayport-2.html b/layout/reftests/async-scrolling/opaque-fractional-displayport-2.html new file mode 100644 index 000000000..ddcac0fe8 --- /dev/null +++ b/layout/reftests/async-scrolling/opaque-fractional-displayport-2.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Make sure the scrolled layer is opaque even if the scrolled area is fractional</title> + +<style> + +body { + margin: 0; +} + +.scrollbox { + margin: 50px; + width: 200px; + height: 200px; + overflow: auto; + + /* Make the background "non-uniform" so that the scrolled layer does not + * pull up a background color. */ + background: linear-gradient(to bottom, white, transparent); +} + +.scrolled-contents { + height: 300.2px; + background-color: lime; + box-sizing: border-box; + border: 1px solid lime; +} + +.transparent-overlap-of-fractional-edge { + margin: -10px 20px 0; + height: 40px; + background-color: rgba(0, 0, 255, 0.5); +} + +</style> + +<body> + +<div class="scrollbox" + reftest-displayport-x="0" reftest-displayport-y="-100.2" + reftest-displayport-w="200" reftest-displayport-h="300.2" + reftest-async-scroll-x="0" reftest-async-scroll-y="0"> + <div class="scrolled-contents"> + <div class="transparent-overlap-of-fractional-edge reftest-opaque-layer"> + <!-- This element has the magic "reftest-opaque-layer" class which + constitutes the actual test here. --> + </div> + </div> +</div> + +<script> + +document.querySelector(".scrollbox").scrollTop = 100000; /* will end up at 100.2 */ + +</script> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-1-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-1-ref.html new file mode 100644 index 000000000..433aa7abb --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Perspective scrolling</title> + +<style> + +html { + height: 100%; + overflow: hidden; +} + +body { + height: 100%; + perspective: 1px; + overflow: auto; + margin: 0; +} + +div { + height: 4000px; + margin: 200px 100px; + border: 10px solid black; +} + +</style> + +<div></div> + +<script> + +document.body.scrollTop = 100; + +</script> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-1.html b/layout/reftests/async-scrolling/perspective-scrolling-1.html new file mode 100644 index 000000000..cab2e4f8c --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-1.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Perspective scrolling</title> + +<style> + +html { + height: 100%; + overflow: hidden; +} + +body { + height: 100%; + perspective: 1px; + overflow: auto; + margin: 0; +} + +div { + transform-style: preserve-3d; + height: 4000px; + margin: 200px 100px; + border: 10px solid black; +} + +</style> + +<body 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"> + +<div></div> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-2-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-2-ref.html new file mode 100644 index 000000000..720fbfa8d --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-2-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Perspective in unscrolled state</title> + +<style> + +html { + height: 100%; + overflow: hidden; +} + +body { + height: 100%; + perspective: 1px; + overflow: auto; + margin: 0; +} + +.transformed { + margin: 200px 100px; + width: 200px; + height: 200px; + border: 10px solid black; +} + +.spacer { + height: 4000px; +} + +</style> + +<div class="transformed"></div> +<div class="spacer"></div> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-2.html b/layout/reftests/async-scrolling/perspective-scrolling-2.html new file mode 100644 index 000000000..e2d7c8666 --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-2.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Perspective in unscrolled state</title> + +<style> + +html { + height: 100%; + overflow: hidden; +} + +body { + margin: 0; + height: 100%; + perspective: 1px; + perspective-origin: top left; + overflow: auto; +} + +.transformed { + transform: translateZ(-1px) scale(2); + transform-origin: -100px -200px; + margin: 200px 100px; + width: 200px; + height: 200px; + border: 10px solid black; +} + +.spacer { + height: 4000px; +} + +</style> + +<body 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="0"> <!-- no async scrolling --> + +<div class="transformed"></div> +<div class="spacer"></div> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-3-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-3-ref.html new file mode 100644 index 000000000..9c8474d6c --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-3-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Perspective in scrolled state</title> + +<style> + +html { + height: 100%; + overflow: hidden; +} + +body { + height: 100%; + perspective: 1px; + overflow: auto; + margin: 0; +} + +.transformed { + margin: 300px 100px 100px; + width: 200px; + height: 200px; + border: 10px solid black; +} + +.spacer { + height: 4000px; +} + +</style> + +<div class="transformed"></div> +<div class="spacer"></div> + +<script> + +document.body.scrollTop = 200; + +</script> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-3.html b/layout/reftests/async-scrolling/perspective-scrolling-3.html new file mode 100644 index 000000000..8211c52af --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-3.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="en" reftest-async-scroll> +<meta charset="utf-8"> +<title>Perspective in scrolled state</title> + +<style> + +html { + height: 100%; + overflow: hidden; +} + +body { + margin: 0; + height: 100%; + perspective: 1px; + perspective-origin: top left; + overflow: auto; +} + +.transformed { + transform: translateZ(-1px) scale(2); + transform-origin: -100px -200px; + margin: 200px 100px; + width: 200px; + height: 200px; + border: 10px solid black; +} + +.spacer { + height: 4000px; +} + +</style> + +<body 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="transformed"></div> +<div class="spacer"></div> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-4-ref.html b/layout/reftests/async-scrolling/perspective-scrolling-4-ref.html new file mode 100644 index 000000000..4f5b1fc01 --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-4-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Reference: Perspective scrolling with nested clips</title> + +<style> + +html { + padding: 50px 0 3000px; +} + +body { + margin: 0; +} + +.scrollbox { + width: 600px; + height: 500px; + perspective: 1px; + overflow: auto; +} + +.transformed { + will-change: transform; + width: 200px; + height: 200px; + margin: 200px 100px; + border: 10px solid black; +} + +.spacer { + height: 4000px; +} + +</style> + +<div class="scrollbox"> + <div class="transformed"></div> + <div class="spacer"></div> +</div> + +<script> +document.documentElement.scrollTop = 250; +</script> diff --git a/layout/reftests/async-scrolling/perspective-scrolling-4.html b/layout/reftests/async-scrolling/perspective-scrolling-4.html new file mode 100644 index 000000000..49453d74d --- /dev/null +++ b/layout/reftests/async-scrolling/perspective-scrolling-4.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en" + reftest-async-scroll + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="1000" + reftest-async-scroll-x="0" reftest-async-scroll-y="250"> +<meta charset="utf-8"> +<title>Perspective scrolling with nested clips</title> + +<style> + +html { + padding: 50px 0 3000px; +} + +body { + margin: 0; +} + +.scrollbox { + width: 600px; + height: 500px; + perspective: 1px; + overflow: auto; +} + +.transformed { + will-change: transform; + width: 200px; + height: 200px; + margin: 200px 100px; + border: 10px solid black; +} + +.spacer { + height: 4000px; +} + +</style> + +<div class="scrollbox" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="600" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="0"> + + <div class="transformed"></div> + <div class="spacer"></div> + +</div> diff --git a/layout/reftests/async-scrolling/position-fixed-1-ref.html b/layout/reftests/async-scrolling/position-fixed-1-ref.html new file mode 100644 index 000000000..b373cc114 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-1.html b/layout/reftests/async-scrolling/position-fixed-1.html new file mode 100644 index 000000000..7cd92c453 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-1.html @@ -0,0 +1,10 @@ +<!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"> +<body style="overflow:hidden; height:3000px"> + <!-- Test that position:fixed content stays fixed when we async-scroll --> + <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-2-ref.html b/layout/reftests/async-scrolling/position-fixed-2-ref.html new file mode 100644 index 000000000..8804dd67b --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-2-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; height:3000px"> + <div style="position:absolute; top:-25px; left:0; width:100px; height:200px; background:yellow; z-index:1"></div> + <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"> + <div style="position:absolute; background:cyan; top:40px; left:0; width:50px; height:300px;"></div> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-2.html b/layout/reftests/async-scrolling/position-fixed-2.html new file mode 100644 index 000000000..73add9830 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-2.html @@ -0,0 +1,14 @@ +<!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"> +<body style="overflow:hidden; height:3000px"> + <!-- test that a fixed-pos element whose contents are interleaved in z-order + with non-scrolling content works correctly with async scrolling --> + <div style="position:absolute; top:25px; left:0; width:100px; height:200px; background:yellow; z-index:1"></div> + <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"> + <div style="position:absolute; background:cyan; top:40px; left:0; width:50px; height:300px;"></div> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-body-ref.html b/layout/reftests/async-scrolling/position-fixed-body-ref.html new file mode 100644 index 000000000..3c79116aa --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-body-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html reftest-async-scroll> +<style> +body { + height: 100vh; + margin: 0px; +} +#scrollbox { + width: 100%; + height: 100%; + overflow: hidden; +} +#scrolledContents { + height: 10000px; + background: radial-gradient(circle, blue 30%, transparent 0); + background-size: 80px 80px; +} +</style> +<body> + <div id="scrollbox" + reftest-dislayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="20"> + <div id="scrolledContents"></div> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-body.html b/layout/reftests/async-scrolling/position-fixed-body.html new file mode 100644 index 000000000..f72a5f4d3 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-body.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html reftest-async-scroll> +<style> +body { + position: fixed; + margin: 0px; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +#scrollbox { + width: 100%; + height: 100%; + overflow: hidden; +} +#scrolledContents { + height: 10000px; + background: radial-gradient(circle, blue 30%, transparent 0); + background-size: 80px 80px; +} +</style> +<body> + <div id="scrollbox" + reftest-dislayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="20"> + <div id="scrolledContents"></div> + </div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-cover-1-ref.html b/layout/reftests/async-scrolling/position-fixed-cover-1-ref.html new file mode 100644 index 000000000..9e4dbe95d --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-cover-1-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; height:3000px"> + <div style="position:absolute; background:blue; top:300px; left:0; width:500px; height:200px;"></div> + <div style="position:absolute; background:black; top:0; left:0; width:500px; height:200px;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-cover-1.html b/layout/reftests/async-scrolling/position-fixed-cover-1.html new file mode 100644 index 000000000..c726aec61 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-cover-1.html @@ -0,0 +1,12 @@ +<!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"> +<body style="overflow:hidden; height:3000px"> + <!-- Test that position:fixed content covered by scrolling content gets rendered + properly --> + <div style="position:fixed; background:blue; top:300px; left:0; width:500px; height:200px; z-index:1"></div> + <div style="position:absolute; background:black; top:200px; left:0; width:500px; height:400px; z-index:2"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-cover-2-ref.html b/layout/reftests/async-scrolling/position-fixed-cover-2-ref.html new file mode 100644 index 000000000..134ef7282 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-cover-2-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; height:3000px"> + <div style="position:absolute; background:black; top:0; left:0; width:500px; height:100px;"></div> + <div style="position:absolute; background:blue; top:200px; left:0; width:500px; height:400px;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-cover-2.html b/layout/reftests/async-scrolling/position-fixed-cover-2.html new file mode 100644 index 000000000..d768098c5 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-cover-2.html @@ -0,0 +1,12 @@ +<!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"> +<body style="overflow:hidden; height:3000px"> + <!-- Test that scrolling content covered by position-fixed content + gets rendered properly --> + <div style="position:absolute; background:black; top:300px; left:0; width:500px; height:200px; z-index:1"></div> + <div style="position:fixed; background:blue; top:200px; left:0; width:500px; height:400px; z-index:2"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-cover-3-ref.html b/layout/reftests/async-scrolling/position-fixed-cover-3-ref.html new file mode 100644 index 000000000..a8e706087 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-cover-3-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> +<body style="overflow:hidden; height:3000px"> + <div style="position:absolute; background:blue; top:200px; left:0; width:500px; height:200px;"></div> + <div style="position:absolute; background:gray; top:100px; left:0; width:500px; height:200px;"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-cover-3.html b/layout/reftests/async-scrolling/position-fixed-cover-3.html new file mode 100644 index 000000000..2f8259423 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-cover-3.html @@ -0,0 +1,14 @@ +<!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"> +<body style="overflow:hidden; height:3000px"> + <!-- Test that scrolling content above position-fixed content but not + intersecting it doesn't get moved down to a layer below the + position-fixed content --> + <div style="position:absolute; background:black; top:0; left:0; width:500px; height:200px; z-index:1"></div> + <div style="position:fixed; background:blue; top:200px; left:0; width:500px; height:200px; z-index:2"></div> + <div style="position:absolute; background:gray; top:500px; left:0; width:500px; height:200px; z-index:3"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html b/layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html new file mode 100644 index 000000000..b373cc114 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-iframe-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-1.html b/layout/reftests/async-scrolling/position-fixed-iframe-1.html new file mode 100644 index 000000000..68cccc3dd --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-iframe-1.html @@ -0,0 +1,20 @@ +<!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="0"> +<body style="overflow:hidden; height:3000px; margin:0;"> + <!-- Test that position:fixed content stays fixed when we async-scroll --> + <iframe style="border:0; width:400px; height:400px;" src="data:text/html, + <!DOCTYPE HTML> + <html 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'> + <body style='overflow:hidden; height:3000px'> + <div style='position:fixed; background:blue; top:0; left:0; width:200px; height:100px'></div> + <div style='background:red; margin-top:100px; width:100px; height:50px'></div> + </body> + </html> + "></iframe> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html b/layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html new file mode 100644 index 000000000..b373cc114 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-iframe-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="position:fixed; background:blue; top:0; left:0; width:200px; height:100px"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-iframe-2.html b/layout/reftests/async-scrolling/position-fixed-iframe-2.html new file mode 100644 index 000000000..30d263502 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-iframe-2.html @@ -0,0 +1,20 @@ +<!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="80"> +<body style="overflow:hidden; height:3000px; margin:0;"> + <!-- Test that position:fixed content stays fixed when we async-scroll --> + <iframe style="border:0; width:400px; height:400px; margin-top:80px;" src="data:text/html, + <!DOCTYPE HTML> + <html 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'> + <body style='overflow:hidden; height:3000px'> + <div style='position:fixed; background:blue; top:0; left:0; width:200px; height:100px'></div> + <div style='background:red; margin-top:100px; width:100px; height:50px'></div> + </body> + </html> + "></iframe> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html b/layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html new file mode 100644 index 000000000..3d2ba64eb --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-in-scroll-container-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<style> + +body { + height: 10000px; +} + +.outer-opacity { + opacity: 0.8; +} + +.scrollbox { + border: 1px solid black; + width: 200px; + height: 400px; + overflow: hidden; +} + +.inner-opacity { + height: 1000px; + opacity: 0.8; +} + +.fixed { + background: blue; + width: 100px; + height: 100px; +} + +</style> + +<div class="outer-opacity"> + <div class="scrollbox"> + <div class="inner-opacity"> + <div class="fixed"></div> + </div> + </div> +</div> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-in-scroll-container.html b/layout/reftests/async-scrolling/position-fixed-in-scroll-container.html new file mode 100644 index 000000000..058eac71a --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-in-scroll-container.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html reftest-async-scroll> +<!-- In this test, the div |fixed| is fixed with respect to the + page's root scroll frame, but there's also a subframe |scrollbox| + which is async-scrolled and which generates a container layer + (because of the opacity), so that its async transform is on an + ancestor layer of |fixed|'s layer. We are testing that this + async transform is correctly unapplied to keep |fixed| fixed. --> +<style> + +body { + height: 10000px; +} + +.outer-opacity { + opacity: 0.8; +} + +.scrollbox { + border: 1px solid black; + width: 200px; + height: 400px; + overflow: hidden; +} + +.inner-opacity { + height: 1000px; + opacity: 0.8; +} + +.fixed { + background: blue; + width: 100px; + height: 100px; + position: fixed; +} + +</style> +<div class="outer-opacity"> + <div class="scrollbox" + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="200" reftest-displayport-h="1000" + reftest-async-scroll-x="0" reftest-async-scroll-y="50"> + <div class="inner-opacity"> + <div class="fixed"></div> + </div> + </div> +</div> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html new file mode 100644 index 000000000..8c48da5db --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> +body { + height: 4000px; + margin: 0; + overflow: hidden; +} +#fixed { + position: fixed; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + box-sizing: border-box; + border: 1px solid blue; +} +</style> +<div id="fixed"></div> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html new file mode 100644 index 000000000..2aab3d5d6 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-1.html @@ -0,0 +1,31 @@ +<!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"> +<style> +body { + height: 4000px; + margin: 0; + overflow: hidden; +} +#sticky { + position: sticky; + top: -1000px; /* scrolls regularly until the top edge hits -1000px, then stays fixed */ + height: 1200px; + border-bottom: 1px solid black; +} +#fixed { + position: fixed; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + box-sizing: border-box; + border: 1px solid blue; +} +</style> +<div id="sticky"> + <div id="fixed"></div> +</div> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html new file mode 100644 index 000000000..8c48da5db --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> +body { + height: 4000px; + margin: 0; + overflow: hidden; +} +#fixed { + position: fixed; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + box-sizing: border-box; + border: 1px solid blue; +} +</style> +<div id="fixed"></div> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html new file mode 100644 index 000000000..23a7e02e1 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-inside-sticky-2.html @@ -0,0 +1,32 @@ +<!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"> +<style> +body { + height: 4000px; + margin: 0; + overflow: hidden; +} +#sticky { + position: sticky; + top: 25px; /* scrolls regularly until the top edge hits 25px, then stays fixed */ + margin-top: 50px; + height: 1200px; + border-bottom: 1px solid black; +} +#fixed { + position: fixed; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + box-sizing: border-box; + border: 1px solid blue; +} +</style> +<div id="sticky"> + <div id="fixed"></div> +</div> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html b/layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html new file mode 100644 index 000000000..6cb096303 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-transformed-1-ref.html @@ -0,0 +1,21 @@ +<html> +<head> +<style> +.fixedpos { + transform: translateX(0px); + position: fixed; + top: 0; + width: 100%; + height: 100px; + background: red; +} +.filler { + height: 4000px; +} +</style> +</head> +<body onload="scrollTo(0,200)"> +<div class="fixedpos"></div> +<div class="filler"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-fixed-transformed-1.html b/layout/reftests/async-scrolling/position-fixed-transformed-1.html new file mode 100644 index 000000000..4f9cac419 --- /dev/null +++ b/layout/reftests/async-scrolling/position-fixed-transformed-1.html @@ -0,0 +1,23 @@ +<html reftest-async-scroll + reftest-async-scroll-x="0" + reftest-async-scroll-y="200"> +<head> +<style> +.fixedpos { + transform: translateX(0px); + position: fixed; + top: 0; + width: 100%; + height: 100px; + background: red; +} +.filler { + height: 4000px; +} +</style> +</head> +<body> +<div class="fixedpos"></div> +<div class="filler"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-sticky-transformed-ref.html b/layout/reftests/async-scrolling/position-sticky-transformed-ref.html new file mode 100644 index 000000000..19a91e7cd --- /dev/null +++ b/layout/reftests/async-scrolling/position-sticky-transformed-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body style="height:3000px; margin: 0px; overflow: hidden"> + <div style="position:sticky; transform: rotateX(30deg) rotateY(10deg); background:blue; top:0; left:0; width:200px; height:100px"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/position-sticky-transformed.html b/layout/reftests/async-scrolling/position-sticky-transformed.html new file mode 100644 index 000000000..45b1b796a --- /dev/null +++ b/layout/reftests/async-scrolling/position-sticky-transformed.html @@ -0,0 +1,9 @@ +<!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"> +<body style="height:3000px; margin: 0px; overflow: hidden"> + <div style="position:sticky; transform: rotateX(30deg) rotateY(10deg); background:blue; top:0; left:0; width:200px; height:100px"></div> +</body> +</html> diff --git a/layout/reftests/async-scrolling/reftest-stylo.list b/layout/reftests/async-scrolling/reftest-stylo.list new file mode 100644 index 000000000..b59ee28fd --- /dev/null +++ b/layout/reftests/async-scrolling/reftest-stylo.list @@ -0,0 +1,59 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +skip-if(!asyncPan) == bg-fixed-1.html bg-fixed-1.html +skip-if(!asyncPan) == bg-fixed-cover-1.html bg-fixed-cover-1.html +skip-if(!asyncPan) == bg-fixed-cover-2.html bg-fixed-cover-2.html +skip-if(!asyncPan) == bg-fixed-cover-3.html bg-fixed-cover-3.html +skip-if(!asyncPan) == bg-fixed-child.html bg-fixed-child.html +skip-if(!asyncPan) == bg-fixed-child-clip-1.html bg-fixed-child-clip-1.html +skip-if(!asyncPan) == bg-fixed-child-clip-2.html bg-fixed-child-clip-2.html +fuzzy(1,246) fuzzy-if(skiaContent,2,160) fuzzy-if(browserIsRemote&&d2d,53,185) skip-if(!asyncPan) == bg-fixed-child-mask.html bg-fixed-child-mask.html +skip-if(!asyncPan) == bg-fixed-in-opacity.html bg-fixed-in-opacity.html +skip-if(!asyncPan) == bg-fixed-child-no-culling.html bg-fixed-child-no-culling.html +skip fuzzy-if(B2G,2,5366) fuzzy-if(Android,2,4000) fuzzy-if(browserIsRemote&&cocoaWidget,2,179524) fuzzy-if(browserIsRemote&&winWidget,1,74590) skip-if(!asyncPan) == bg-fixed-transformed-image.html bg-fixed-transformed-image.html +skip-if(!asyncPan) == element-1.html element-1.html +pref(layers.force-active,true) skip-if(!asyncPan) == iframe-1.html iframe-1.html +skip-if(!asyncPan) == nested-1.html nested-1.html +skip-if(!asyncPan) == nested-2.html nested-2.html +skip-if(!asyncPan) == position-fixed-1.html position-fixed-1.html +skip-if(!asyncPan) == position-fixed-2.html position-fixed-2.html +skip-if(!asyncPan) == position-fixed-body.html position-fixed-body.html +skip-if(!asyncPan) == position-fixed-cover-1.html position-fixed-cover-1.html +skip-if(!asyncPan) == position-fixed-cover-2.html position-fixed-cover-2.html +skip-if(!asyncPan) == position-fixed-cover-3.html position-fixed-cover-3.html +fuzzy-if(Android,5,4) skip-if(!asyncPan) == position-fixed-transformed-1.html position-fixed-transformed-1.html +skip-if(!asyncPan) == split-layers-1.html split-layers-1.html +skip-if(!asyncPan) == split-layers-multi-scrolling-1.html split-layers-multi-scrolling-1.html +fuzzy-if(skiaContent,2,240000) fuzzy-if(browserIsRemote&&!skiaContent&&(cocoaWidget||winWidget),1,240000) skip-if(!asyncPan) == split-opacity-layers-1.html split-opacity-layers-1.html +skip-if(!asyncPan) == sticky-pos-scrollable-1.html sticky-pos-scrollable-1.html +skip-if(!asyncPan) == fixed-pos-scrollable-1.html fixed-pos-scrollable-1.html +skip-if(!asyncPan) == culling-1.html culling-1.html +skip-if(!asyncPan) == position-fixed-iframe-1.html position-fixed-iframe-1.html +skip-if(!asyncPan) == position-fixed-iframe-2.html position-fixed-iframe-2.html +fuzzy-if(skiaContent||(browserIsRemote&&cocoaWidget),1,10000) skip-if(!asyncPan) == position-fixed-in-scroll-container.html position-fixed-in-scroll-container.html +skip-if(!asyncPan) == position-fixed-inside-sticky-1.html position-fixed-inside-sticky-1.html +skip-if(!asyncPan) == group-opacity-surface-size-1.html group-opacity-surface-size-1.html +skip-if(!asyncPan) == position-sticky-transformed.html position-sticky-transformed.html +skip-if(!asyncPan) == offscreen-prerendered-active-opacity.html offscreen-prerendered-active-opacity.html +fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-1.html offscreen-clipped-blendmode-1.html +fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-2.html offscreen-clipped-blendmode-2.html +fuzzy-if(Android,6,4) skip == offscreen-clipped-blendmode-3.html offscreen-clipped-blendmode-3.html +# bug 1251588 - wrong AGR on mix-blend-mode item +fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-4.html offscreen-clipped-blendmode-4.html +fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-1.html perspective-scrolling-1.html +fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-2.html perspective-scrolling-2.html +fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-3.html perspective-scrolling-3.html +fuzzy-if(Android,7,4) skip-if(!asyncPan) == perspective-scrolling-4.html perspective-scrolling-4.html +pref(apz.disable_for_scroll_linked_effects,true) skip-if(!asyncPan) == disable-apz-for-sle-pages.html disable-apz-for-sle-pages.html +fuzzy-if(browserIsRemote&&d2d,1,19) skip-if(!asyncPan) == background-blend-mode-1.html background-blend-mode-1.html +skip-if(Android||!asyncPan) == opaque-fractional-displayport-1.html opaque-fractional-displayport-1.html +skip-if(Android||!asyncPan) == opaque-fractional-displayport-2.html opaque-fractional-displayport-2.html + +# 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.html +skip-if(!asyncPan) == checkerboard-2.html checkerboard-2.html +skip-if(!asyncPan) == checkerboard-3.html checkerboard-3.html +default-preferences diff --git a/layout/reftests/async-scrolling/reftest.list b/layout/reftests/async-scrolling/reftest.list new file mode 100644 index 000000000..d2d5e5f03 --- /dev/null +++ b/layout/reftests/async-scrolling/reftest.list @@ -0,0 +1,61 @@ +skip-if(!asyncPan) == bg-fixed-1.html bg-fixed-1-ref.html +skip-if(!asyncPan) == bg-fixed-cover-1.html bg-fixed-cover-1-ref.html +skip-if(!asyncPan) == bg-fixed-cover-2.html bg-fixed-cover-2-ref.html +skip-if(!asyncPan) == bg-fixed-cover-3.html bg-fixed-cover-3-ref.html +skip-if(!asyncPan) == bg-fixed-child.html bg-fixed-child-ref.html +skip-if(!asyncPan) == bg-fixed-child-clip-1.html bg-fixed-child-clip-ref.html +skip-if(!asyncPan) == bg-fixed-child-clip-2.html bg-fixed-child-clip-ref.html +fuzzy(1,246) fuzzy-if(skiaContent,2,160) fuzzy-if(browserIsRemote&&d2d,53,185) skip-if(!asyncPan) == bg-fixed-child-mask.html bg-fixed-child-mask-ref.html +skip-if(!asyncPan) == bg-fixed-in-opacity.html bg-fixed-in-opacity-ref.html +skip-if(!asyncPan) == bg-fixed-child-no-culling-1.html bg-fixed-child-no-culling-1-ref.html +skip-if(!asyncPan) == bg-fixed-child-no-culling-2.html bg-fixed-child-no-culling-2-ref.html +fuzzy-if(Android,2,4000) fuzzy-if(browserIsRemote&&cocoaWidget,2,179524) fuzzy-if(browserIsRemote&&winWidget,1,74590) fuzzy-if(gtkWidget&&layersGPUAccelerated,1,3528) skip-if(!asyncPan) == bg-fixed-transformed-image.html bg-fixed-transformed-image-ref.html +skip-if(!asyncPan) == element-1.html element-1-ref.html +pref(layers.force-active,true) skip-if(!asyncPan) == iframe-1.html iframe-1-ref.html +skip-if(!asyncPan) == nested-1.html nested-1-ref.html +skip-if(!asyncPan) == nested-2.html nested-2-ref.html +skip-if(!asyncPan) == position-fixed-1.html position-fixed-1-ref.html +skip-if(!asyncPan) == position-fixed-2.html position-fixed-2-ref.html +skip-if(!asyncPan) == position-fixed-body.html position-fixed-body-ref.html +skip-if(!asyncPan) == position-fixed-cover-1.html position-fixed-cover-1-ref.html +skip-if(!asyncPan) == position-fixed-cover-2.html position-fixed-cover-2-ref.html +skip-if(!asyncPan) == position-fixed-cover-3.html position-fixed-cover-3-ref.html +fuzzy-if(Android,5,4) skip-if(!asyncPan) == position-fixed-transformed-1.html position-fixed-transformed-1-ref.html +skip-if(!asyncPan) == split-layers-1.html split-layers-1-ref.html +skip-if(!asyncPan) == split-layers-multi-scrolling-1.html split-layers-multi-scrolling-1-ref.html +fuzzy-if(skiaContent,2,240000) fuzzy-if(browserIsRemote&&!skiaContent&&(cocoaWidget||winWidget),1,240000) skip-if(!asyncPan) == split-opacity-layers-1.html split-opacity-layers-1-ref.html +skip-if(!asyncPan) == sticky-pos-scrollable-1.html sticky-pos-scrollable-1-ref.html +skip-if(!asyncPan) == sticky-pos-scrollable-2.html sticky-pos-scrollable-2-ref.html +skip-if(!asyncPan) == sticky-pos-scrollable-3.html sticky-pos-scrollable-3-ref.html +skip-if(!asyncPan) == fixed-pos-scrollable-1.html fixed-pos-scrollable-1-ref.html +skip-if(!asyncPan) == culling-1.html culling-1-ref.html +skip-if(!asyncPan) == position-fixed-iframe-1.html position-fixed-iframe-1-ref.html +skip-if(!asyncPan) == position-fixed-iframe-2.html position-fixed-iframe-2-ref.html +fuzzy-if(skiaContent,1,11300) skip-if(!asyncPan) == position-fixed-in-scroll-container.html position-fixed-in-scroll-container-ref.html +skip-if(!asyncPan) == position-fixed-inside-sticky-1.html position-fixed-inside-sticky-1-ref.html +skip-if(!asyncPan) == position-fixed-inside-sticky-2.html position-fixed-inside-sticky-2-ref.html +fuzzy(1,60000) skip-if(!asyncPan) == group-opacity-surface-size-1.html group-opacity-surface-size-1-ref.html +skip-if(!asyncPan) == position-sticky-transformed.html position-sticky-transformed-ref.html +skip-if(!asyncPan) == offscreen-prerendered-active-opacity.html offscreen-prerendered-active-opacity-ref.html +fuzzy-if(Android,6,4) fuzzy-if(skiaContent&&!Android,1,34) skip-if(!asyncPan) == offscreen-clipped-blendmode-1.html offscreen-clipped-blendmode-ref.html +fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-2.html offscreen-clipped-blendmode-ref.html +fuzzy-if(Android,6,4) skip == offscreen-clipped-blendmode-3.html offscreen-clipped-blendmode-ref.html # bug 1251588 - wrong AGR on mix-blend-mode item +fuzzy-if(Android,6,4) skip-if(!asyncPan) == offscreen-clipped-blendmode-4.html offscreen-clipped-blendmode-ref.html +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 + +# 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 +skip-if(!asyncPan) == checkerboard-3.html checkerboard-3-ref.html +default-preferences diff --git a/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png b/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png Binary files differnew file mode 100644 index 000000000..d114e100d --- /dev/null +++ b/layout/reftests/async-scrolling/repeatable-diagonal-gradient.png diff --git a/layout/reftests/async-scrolling/split-layers-1-ref.html b/layout/reftests/async-scrolling/split-layers-1-ref.html new file mode 100644 index 000000000..2d78cd173 --- /dev/null +++ b/layout/reftests/async-scrolling/split-layers-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE HTML> +<html> +<body> + <!-- Test that element content scrolls asynchronously even when content + has to be split into separate layers with non-scrolling content in + between --> + <div style="width:400px; height:500px; overflow:hidden; border:2px solid black"> + <div style="height:450px"></div> + <div style="height:100px; width:200px; float:left; background:purple"></div> + <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div> + <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> + </div> +</html> diff --git a/layout/reftests/async-scrolling/split-layers-1.html b/layout/reftests/async-scrolling/split-layers-1.html new file mode 100644 index 000000000..911982db3 --- /dev/null +++ b/layout/reftests/async-scrolling/split-layers-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html reftest-async-scroll> +<body> + <!-- Test that element content scrolls asynchronously even when content + has to be split into separate layers with non-scrolling content in + between --> + <div style="width:400px; height:500px; overflow:hidden; 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; width:200px; float:left; background:purple"></div> + <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div> + <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> + </div> + diff --git a/layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html new file mode 100644 index 000000000..bbb8a0529 --- /dev/null +++ b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<html> +<body> + <!-- Test that element content scrolls asynchronously even when content + has to be split into separate layers with non-scrolling content in + between --> + <div style="width:400px; height:500px; overflow:hidden; border:2px solid black; margin-top:-50px;"> + <div style="height:450px"></div> + <div style="height:100px; width:200px; float:left; background:purple"></div> + <div style="left:200px; top:-50px; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div> + <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> + </div> +</html> + diff --git a/layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html new file mode 100644 index 000000000..ecbc2814e --- /dev/null +++ b/layout/reftests/async-scrolling/split-layers-multi-scrolling-1.html @@ -0,0 +1,19 @@ +<!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"> +<body style="height:3000px; overflow:hidden"> + <!-- Test that element content scrolls asynchronously even when content + has to be split into separate layers with non-scrolling content in + between --> + <div style="width:400px; height:500px; overflow:hidden; 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; width:200px; float:left; background:purple"></div> + <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div> + <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> + </div> + diff --git a/layout/reftests/async-scrolling/split-opacity-layers-1-ref.html b/layout/reftests/async-scrolling/split-opacity-layers-1-ref.html new file mode 100644 index 000000000..347bfe254 --- /dev/null +++ b/layout/reftests/async-scrolling/split-opacity-layers-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:400px; height:500px; overflow:hidden; border:2px solid black"> + <div style="height:450px"></div> + <div style="height:100px; width:200px; float:left; background:purple"></div> + <div style="opacity:0.5"> + <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div> + <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> + </div> + </div> + diff --git a/layout/reftests/async-scrolling/split-opacity-layers-1.html b/layout/reftests/async-scrolling/split-opacity-layers-1.html new file mode 100644 index 000000000..695412045 --- /dev/null +++ b/layout/reftests/async-scrolling/split-opacity-layers-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html reftest-async-scroll> +<body> + <div style="width:400px; height:500px; overflow:hidden; 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; width:200px; float:left; background:purple"></div> + <div style="opacity:0.5"> + <div style="left:200px; top:0; height:800px; width:300px; float:left; background:yellow; position:absolute; z-index:1;"></div> + <div style="height:100px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> + </div> + </div> + diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html new file mode 100644 index 000000000..2522f82e2 --- /dev/null +++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:400px; height:300px; overflow:hidden; border:2px solid black"> + <div style="height:200px; width:200px; float:left; background:white"></div> + <div style="left:200px; top:0; height:300px; width:200px; float:right; background:yellow;"></div> + <div style="height:100px; width:200px; float:left; background:purple"></div> + </div> diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-1.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-1.html new file mode 100644 index 000000000..83c973b39 --- /dev/null +++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-1.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html reftest-async-scroll> +<body> + <div style="width:400px; height:300px; overflow:hidden; 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="100"> + <!-- In this test the position:sticky element gets its own layer, and also has scrollable metrics + because it shares the same animated geometry root as the other elements. This tests that + layers with both sticky info and scroll info are transformed correctly in the face of an async + scroll transform. --> + <div style="height:100px; width:200px; float:left; background:purple"></div> + <div style="left:200px; top:0; height:300px; width:200px; float:left; background:yellow; position:sticky; z-index:1;"></div> + <div style="height:300px; width:200px; float:left; background:purple; position:relative; z-index:2;"></div> + </div> diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html new file mode 100644 index 000000000..da90b1998 --- /dev/null +++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-2-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<style> +body { + margin: 0; + height: 4000px; + overflow: hidden; +} +div { + background: blue; + width: 200px; + height: 200px; + margin-top: 300px; + position: sticky; + bottom: 100px; +} +</style> +<div></div> diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-2.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-2.html new file mode 100644 index 000000000..f133e663e --- /dev/null +++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-2.html @@ -0,0 +1,21 @@ +<!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"> +<style> +body { + margin: 0; + height: 4000px; + overflow: hidden; +} +div { + background: blue; + width: 200px; + height: 200px; + margin-top: 400px; + position: sticky; + bottom: 100px; +} +</style> +<div></div> diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html new file mode 100644 index 000000000..fab9f954b --- /dev/null +++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-3-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <style> + #header { + position: fixed; + top: 0; + } + #header > div { + border: solid blue 2px; + height: 100px; + width: 100px; + } + </style> + <div id="section"> + <div id="header"> + <div></div> + </div> + </div> +</html>
\ No newline at end of file diff --git a/layout/reftests/async-scrolling/sticky-pos-scrollable-3.html b/layout/reftests/async-scrolling/sticky-pos-scrollable-3.html new file mode 100644 index 000000000..9018daae7 --- /dev/null +++ b/layout/reftests/async-scrolling/sticky-pos-scrollable-3.html @@ -0,0 +1,33 @@ +<!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"> + <style> + html { + overflow: hidden; + } + #section { + padding-top: 1px; + } + #header { + position: sticky; + top: 0; + } + #header > div { + margin-top: -50px; + border: solid blue 2px; + height: 100px; + width: 100px; + } + #spacer { + height: 1500px; + } + </style> + <div id="section"> + <div id="header"> + <div></div> + </div> + <div id="spacer"></div> + </div> +</html>
\ No newline at end of file |
