diff --git a/css/css-flexbox/dynamic-isize-change-002.html b/css/css-flexbox/dynamic-isize-change-002.html
new file mode 100644
index 00000000000000..cc859b73f9ae94
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..9df13e313fda0b
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..1627e32d966d92
--- /dev/null
+++ 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>
