Bug 1510639 - Add reftests for various scenarios involving sticky items inside scrollframes and transforms. r=kvark
authorKartikaya Gupta <kgupta@mozilla.com>
Thu, 29 Nov 2018 14:57:24 +0000
changeset 448740 e79c6da7b0fed02d2654133eb6cd05ce069490b9
parent 448739 a865260c7f9741eb5c875c32ea16f59ac19db9cb
child 448741 1e338cf25fc326d7502faae4a56aa73e4231d994
push id35126
push userrmaries@mozilla.com
push dateThu, 29 Nov 2018 21:44:05 +0000
treeherdermozilla-central@6453222232be [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerskvark
bugs1510639
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1510639 - Add reftests for various scenarios involving sticky items inside scrollframes and transforms. r=kvark Differential Revision: https://phabricator.services.mozilla.com/D13367
layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-1.html
layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-2.html
layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-ref.html
layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1-ref.html
layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1.html
layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2-ref.html
layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2.html
layout/reftests/async-scrolling/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="transform: translateY(10px); margin-top: 90px">
+<div style="overflow:scroll; height: 400px; width: 400px; background-color: yellow"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="800"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="height: 800px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green">sticky</div>
+</div>
+</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="transform: translateY(90px); margin-top: 10px">
+<div style="overflow:scroll; height: 400px; width: 400px; background-color: yellow"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="800"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="height: 800px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green">sticky</div>
+</div>
+</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-in-transformed-scrollframe-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<div style="margin-top: 100px">
+<div id="scroller" style="overflow:scroll; height: 400px; width: 400px; background-color: yellow">
+<div style="height: 800px">
+<div style="position: relative; top: 120px; height: 20px; background-color: green">sticky</div>
+</div>
+</div>
+</div>
+<script>
+    document.getElementById('scroller').scrollTop = 120;
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<div id="scroller" style="overflow:scroll; height: 400px; width: 400px">
+<div style="transform: translateY(10px); margin-top: 90px; background-color: yellow; height: 400px">
+<div style="position: relative; top: 30px; height: 20px; background-color: green">sticky</div>
+</div>
+<div style="height: 400px">spacer</div>
+</div>
+<script>
+    document.getElementById('scroller').scrollTop = 120;
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="overflow:scroll; height: 400px; width: 400px"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="890"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="transform: translateY(10px); margin-top: 90px; background-color: yellow; height: 400px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green">sticky</div>
+</div>
+<div style="height: 400px">spacer</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<div id="scroller" style="overflow:scroll; height: 400px; width: 400px">
+<div style="margin-top: 120px; background-color: yellow; height: 380px">
+<div style="height: 90px"></div>
+<div style="height: 20px; background-color: green">sticky</div>
+</div>
+<div style="height: 310px"></div>
+</div>
+<script>
+    document.getElementById('scroller').scrollTop = 120;
+</script>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/async-scrolling/position-sticky-transformed-in-scrollframe-2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<div style="overflow:scroll; height: 400px; width: 400px"
+     reftest-displayport-x="0"
+     reftest-displayport-y="0"
+     reftest-displayport-w="400"
+     reftest-displayport-h="890"
+     reftest-async-scroll-x="0"
+     reftest-async-scroll-y="120">
+<div style="transform: translateY(90px); margin-top: 10px; background-color: yellow; height: 400px">
+<div style="position:sticky; top: 0px; height: 20px; background-color: green">sticky</div>
+</div>
+<div style="height: 400px">spacer</div>
+</div>
--- a/layout/reftests/async-scrolling/reftest.list
+++ b/layout/reftests/async-scrolling/reftest.list
@@ -65,16 +65,20 @@ fuzzy-if(Android,0-6,0-8) skip-if(!async
 fuzzy-if(Android,0-6,0-8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-3.html fixed-pos-scrolled-clip-3-ref.html
 fuzzy-if(Android,0-6,0-8) skip-if(!asyncPan) == fixed-pos-scrolled-clip-4.html fixed-pos-scrolled-clip-4-ref.html
 skip-if(!asyncPan) == fixed-pos-scrolled-clip-5.html fixed-pos-scrolled-clip-5-ref.html
 skip-if(!asyncPan) == position-sticky-bug1434250.html position-sticky-bug1434250-ref.html
 fuzzy-if(Android,0-6,0-4) skip-if(!asyncPan) == position-sticky-scrolled-clip-1.html position-sticky-scrolled-clip-1-ref.html
 fuzzy-if(Android,0-6,0-4) skip == position-sticky-scrolled-clip-2.html position-sticky-scrolled-clip-2-ref.html # bug ?????? - incorrectly applying clip to sticky contents
 fuzzy-if(Android,0-2,0-4) skip-if(!asyncPan) == curtain-effect-1.html curtain-effect-1-ref.html
 fuzzy-if(Android,0-1,0-4) skip-if(!asyncPan) == transformed-1.html transformed-1-ref.html
+fuzzy-if(Android,2-2,4-4) skip-if(!asyncPan) == position-sticky-transformed-in-scrollframe-1.html position-sticky-transformed-in-scrollframe-1-ref.html
+fuzzy-if(Android,3-3,4-4) skip-if(!asyncPan) == position-sticky-transformed-in-scrollframe-2.html position-sticky-transformed-in-scrollframe-2-ref.html
+fuzzy-if(Android,3-3,4-4) skip-if(!asyncPan) == position-sticky-in-transformed-scrollframe-1.html position-sticky-in-transformed-scrollframe-ref.html
+fuzzy-if(Android,3-3,4-4) skip-if(!asyncPan) == position-sticky-in-transformed-scrollframe-2.html position-sticky-in-transformed-scrollframe-ref.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-ref.html
 skip-if(!asyncPan) == checkerboard-2.html checkerboard-2-ref.html