Part 4 - Cache flex item's border and padding used in the final reflow.

Currently, we assume any flex item with percentage padding will be marked as dirty if the percentage basis is changed. However, it is not true. To fix it, we cache the flex item's border and padding used in its most recent final reflow to detect their changes. dynamic-isize-change-004.html is designed to catch the concern in bug 1700580 comment 12. Differential Revision: https://phabricator.services.mozilla.com/D125620 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1700580 gecko-commit: 3da0171aa06ec5a340f0568b9772a68cee5572a3 gecko-reviewers: dholbert
web-platform-tests · Sep 20, 2021 · aac0fa8 · aac0fa8
1 parent 74e08d9
commit aac0fa8
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/css/css-flexbox/dynamic-isize-change-002.html b/css/css-flexbox/dynamic-isize-change-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Flexbox Test: Dynamic change to the inline-size of a row flex container</title>
+<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://bugzilla.mozilla.org/show_bug.cgi?id=1700580">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding.">
+
+<style>
+#flexbox {
+  display: flex;
+  inline-size: 50px;
+  block-size: 100px;
+  background: red;
+}
+
+#flexbox > div {
+  box-sizing: border-box;
+
+  /* The following flex-basis and padding will give our flex item a content-box
+     inline-size of 25px, both before and after this test's dynamic change. */
+  flex-basis: 100%;
+  padding-right: calc(100% - 25px);
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="flexbox">
+  <div></div>
+</div>
+
+<script>
+/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
+document.documentElement.offsetHeight;
+
+/* Change the flexbox's inline-size to trigger incremental reflow. */
+document.getElementById("flexbox").style.inlineSize = "100px";
+</script>
diff --git a/css/css-flexbox/dynamic-isize-change-003.html b/css/css-flexbox/dynamic-isize-change-003.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Flexbox Test: Dynamic change to the inline-size of a column flexbox container</title>
+<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://bugzilla.mozilla.org/show_bug.cgi?id=1700580">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding.">
+
+<style>
+#flexbox {
+  display: flex;
+  flex-direction: column;
+  inline-size: 50px;
+  block-size: 100px;
+  background: red;
+}
+
+#flexbox > div {
+  box-sizing: border-box;
+  flex-basis: 100px;
+
+  /* The following padding will give our flex item a content-box inline-size of
+     25px, both before and after this test's dynamic change. (Note that the
+     horizontal axis is the flex container's cross axis, so the item stretches
+     its width by default to fill the available space.) */
+  padding-right: calc(100% - 25px);
+  background: green;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="flexbox">
+  <div></div>
+</div>
+
+<script>
+/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
+document.documentElement.offsetHeight;
+
+/* Change the flexbox's inline-size to trigger incremental reflow. */
+document.getElementById("flexbox").style.inlineSize = "100px";
+</script>
diff --git a/css/css-flexbox/dynamic-isize-change-004.html b/css/css-flexbox/dynamic-isize-change-004.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Flexbox Test: Dynamic change to the inline-size of a row flex container</title>
+<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://bugzilla.mozilla.org/show_bug.cgi?id=1700580">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test verifies that the dynamic change to the flex container's inline-size triggers the reflow for flex items with percentage padding.">
+
+<style>
+#flexbox {
+  display: flex;
+  inline-size: 100px;
+  block-size: 100px;
+  font: 50px/1 Ahem;
+  color: green;
+  word-break: break-all;
+}
+
+#flexbox > div {
+  /* The following flex-basis and padding will give our flex item a border-box
+     inline-size of 100px, both before and after this test's dynamic
+     modification. */
+  flex-basis: 50%;
+  padding-right: calc(100px - 50%);
+  background: red;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="flexbox">
+  <div>XXXX</div>
+</div>
+
+<script>
+/* Make sure the layout is up-to-date, which is essential to trigger the bug. */
+document.documentElement.offsetHeight;
+
+/* Change the flexbox's inline-size to trigger incremental reflow. */
+document.getElementById("flexbox").style.inlineSize = "200px";
+</script>