Bug 1780133 [wpt PR 34773] - Follow containing block chain when finding scroll container for sticky, a=testonly
authorXianzhu Wang <wangxianzhu@chromium.org>
Wed, 20 Jul 2022 10:59:56 +0000
changeset 624674 3e47d85da58f49216539222a2dd20c02a934d6f8
parent 624673 40154d642d50a2b8c6d8d5360fb3c6010a3dd217
child 624675 b934ef33693a7edbaa467b97f2dee527ab39b1cf
push id40011
push usermlaza@mozilla.com
push dateThu, 21 Jul 2022 15:47:47 +0000
treeherdermozilla-central@e4ec56a9e42a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1780133, 34773, 881555, 3752748, 1025467
milestone104.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 1780133 [wpt PR 34773] - Follow containing block chain when finding scroll container for sticky, a=testonly Automatic update from web-platform-tests Follow containing block chain when finding scroll container for sticky When a sticky position element is contained by a fixed or absolute position element, the scroll container of the sticky position element should follow the containing block chain of the fixed or absolute position element. Previously we followed the DOM hierarchy, causing weird behavior in the case, e.g. the sticky element moves in the opposite direction when the non-containing ancestor scroller scrolls. Bug: 881555 Change-Id: I11994dfea2910283f06662558a8445362f15bca7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3752748 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#1025467} -- wpt-commits: ca07b3c05ec17c55fc172d9f78f135bd18329e25 wpt-pr: 34773
testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-001-ref.html
testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-001.html
testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-002-ref.html
testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-002.html
testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-003.html
testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-004-ref.html
testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-004.html
copy from testing/web-platform/tests/svg/painting/svg-child-will-change-transform-invalidation-ref.html
copy to testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-001-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Positioned Layout Test: a sticky element contained by fixed under a scroller not containing fixed</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://crbug.com/881555">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
+<link rel="match" href="position-sticky-escape-scroller-001-ref.html">
+<div id="scroller" style="width: 200px; height: 100px; overflow: hidden">
+  <div style="height: 100px; background: red"></div>
+  <div style="position: fixed; height: 400px">
+    <div style="position: sticky; top: 0; width: 200px; height: 100px; background: green"></div>
+  </div>
+  <div style="height: 100px; background: red"></div>
+  <div style="height: 100px; background: green"></div>
+  <div style="height: 1000px; background: red"></div>
+</div>
+<script>
+scroller.scrollTop = 200;
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-002-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>body { margin: 0 }</style>
+<div style="height: 3200px"></div>
+<div style="position: fixed; top: 100px; left: 0;
+            width: 200px; height: 200px; background: green"></div>
+<script>
+window.scrollTo(0, 2000);
+</script>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Positioned Layout Test: a sticky element contained by fixed under a scroller not containing fixed</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://crbug.com/881555">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
+<link rel="match" href="position-sticky-escape-scroller-002-ref.html">
+<style>body { margin: 0 }</style>
+<div id="scroller" style="width: 200px; height: 200px; overflow: scroll">
+  <div style="position: fixed; top: 100px; height: 2000px">
+    <div style="position: sticky; top: 0; width: 200px; height: 200px; background: green"></div>
+  </div>
+  <div style="height: 1000px; background: red"></div>
+</div>
+<div style="height: 3000px"></div>
+<script>
+window.scrollTo(0, 2000);
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-003.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Positioned Layout Test: a sticky element contained by absolute under a scroller not containing absolute</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://crbug.com/881555">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
+<link rel="match" href="position-sticky-escape-scroller-001-ref.html">
+<div id="scroller" style="width: 200px; height: 100px; overflow: hidden">
+  <div style="height: 100px; background: red"></div>
+  <div style="position: absolute; height: 400px">
+    <div style="position: sticky; top: 0; width: 200px; height: 100px; background: green"></div>
+  </div>
+  <div style="height: 100px; background: red"></div>
+  <div style="height: 100px; background: green"></div>
+  <div style="height: 1000px; background: red"></div>
+</div>
+<script>
+scroller.scrollTop = 200;
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-004-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>body { margin: 0 }</style>
+<div style="height: 3200px"></div>
+<div style="position: fixed; top: 0; left: 0;
+            width: 200px; height: 200px; background: green"></div>
+<script>
+window.scrollTo(0, 1000);
+</script>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/sticky/position-sticky-escape-scroller-004.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Positioned Layout Test: a sticky element contained by absolute under a scroller not containing absolute</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://crbug.com/881555">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3185">
+<link rel="match" href="position-sticky-escape-scroller-004-ref.html">
+<style>body { margin: 0 }</style>
+<div id="scroller" style="width: 200px; height: 200px; overflow: scroll">
+  <div style="position: absolute; top: 100px; height: 2000px">
+    <div style="position: sticky; top: 0; width: 200px; height: 200px; background: green"></div>
+  </div>
+  <div style="height: 1000px; background: red"></div>
+</div>
+<div style="height: 3000px"></div>
+<script>
+window.scrollTo(0, 1000);
+</script>