Include child frame's overflow area locating at its normal position into parent's overflow.
When a position:sticky element "sticks" in the scroll container's scrollport, we
compute its containing block's overflow areas by including its overflow areas
located at its relative position. This makes the element's normal position
unreachable because its overflow areas located at its "normal position" might
not be within its containing block's overflow areas. Block frame doesn't have
this problem because `nsLineBox` always includes the element's normal position
rect in its own rect.
Therefore, when including a sticky child frame's overflow area into its parent's
overflow area, the overflow areas located at its normal position should be
included as well. This behavior is consistent with a relatively positioned child
frame. (A position:relative frame's normal position is always reachable when
scrolling, at least in both axes that grow positively.)
Differential Revision: https://phabricator.services.mozilla.com/D140373
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1377072
gecko-commit: 159e0423f98738a9d68b22d41420bb67df391ad5
gecko-reviewers: dholbert
diff --git a/css/css-position/sticky/position-sticky-flex-item-001.html b/css/css-position/sticky/position-sticky-flex-item-001.html
new file mode 100644
index 0000000..1b1f9d0
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-flex-item-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
+
+<style>
+#flex-scroller {
+ overflow: hidden;
+ inline-size: 100px;
+ block-size: 100px;
+ display: flex;
+ flex-direction: column;
+ background-color: green;
+}
+
+#non-sticky {
+ flex: 0 0 80px;
+ background-color: red;
+}
+
+#sticky {
+ position: sticky;
+ flex: 0 0 100px;
+ bottom: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="flex-scroller">
+ <div id="non-sticky"></div>
+ <div id="sticky"></div>
+</div>
+
+<script>
+// Scroll the scroll container down to the bottom.
+document.getElementById("flex-scroller").scrollTop="1000";
+</script>
diff --git a/css/css-position/sticky/position-sticky-flex-item-002.html b/css/css-position/sticky/position-sticky-flex-item-002.html
new file mode 100644
index 0000000..5b4c81d
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-flex-item-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
+
+<style>
+#flex-scroller {
+ overflow: hidden;
+ inline-size: 100px;
+ block-size: 100px;
+ display: flex;
+ flex-direction: row;
+ background-color: green;
+}
+
+#non-sticky {
+ flex: 0 0 80px;
+ background-color: red;
+}
+
+#sticky {
+ position: sticky;
+ flex: 0 0 100px;
+ right: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="flex-scroller">
+ <div id="non-sticky"></div>
+ <div id="sticky"></div>
+</div>
+
+<script>
+// Scroll the scroll container to the far right.
+document.getElementById("flex-scroller").scrollLeft="1000";
+</script>
diff --git a/css/css-position/sticky/position-sticky-flex-item-003.html b/css/css-position/sticky/position-sticky-flex-item-003.html
new file mode 100644
index 0000000..50e0e25
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-flex-item-003.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
+
+<style>
+#scroller {
+ overflow: hidden;
+ inline-size: 100px;
+ block-size: 100px;
+ background-color: green;
+}
+
+#flex {
+ display: flex;
+ flex-direction: column;
+
+ /* Use a small block-size so that the flex items overflow the flex container.
+ It's necessary to trigger the bug. */
+ block-size: 10px;
+}
+
+#non-sticky {
+ flex: 0 0 80px;
+ background-color: red;
+}
+
+#sticky {
+ position: sticky;
+ flex: 0 0 100px;
+ bottom: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroller">
+ <div id="flex">
+ <div id="non-sticky"></div>
+ <div id="sticky"></div>
+ </div>
+</div>
+
+<script>
+// Scroll the scroll container down to the bottom.
+document.getElementById("scroller").scrollTop="1000";
+</script>
diff --git a/css/css-position/sticky/position-sticky-flex-item-004.html b/css/css-position/sticky/position-sticky-flex-item-004.html
new file mode 100644
index 0000000..68b933a
--- /dev/null
+++ b/css/css-position/sticky/position-sticky-flex-item-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-position-3/#stickypos-insets">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377072">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that the sticky flex item reserves its in-flow space in the scroll container's overflow area.">
+
+<style>
+#scroller {
+ overflow: hidden;
+ inline-size: 100px;
+ block-size: 100px;
+ background-color: green;
+}
+
+#flex {
+ display: flex;
+ flex-direction: row;
+
+ /* Use a small inline-size so that the flex items overflow the flex container.
+ It's necessary to trigger the bug. */
+ inline-size: 10px;
+ block-size: 100px;
+}
+
+#non-sticky {
+ flex: 0 0 80px;
+ background-color: red;
+}
+
+#sticky {
+ position: sticky;
+ flex: 0 0 100px;
+ right: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="scroller">
+ <div id="flex">
+ <div id="non-sticky"></div>
+ <div id="sticky"></div>
+ </div>
+</div>
+
+<script>
+// Scroll the scroll container to the far right.
+document.getElementById("scroller").scrollLeft="1000";
+</script>
