diff --git a/css/css-multicol/multicol-dynamic-add-002-ref.html b/css/css-multicol/multicol-dynamic-add-002-ref.html
new file mode 100644
index 00000000000000..c122e36a38ce34
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-add-002-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<title>CSS Multi-column Layout Reference: Flex container in multi-column context</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+<style>
+:root { columns: 0px }
+</style>
+
+<q style="display: flex">f</q>
diff --git a/css/css-multicol/multicol-dynamic-add-002.html b/css/css-multicol/multicol-dynamic-add-002.html
new file mode 100644
index 00000000000000..b9992e91f325bc
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-add-002.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Multi-column Layout Test: Change textContent on flex container in multi-column context</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-multicol-1/">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1645714">
+<link rel="match" href="multicol-dynamic-add-002-ref.html">
+<meta name="assert" content="This test checks that dynamically changing textContent on a flex container in a multi-column context renders correctly.">
+
+<script>
+function runTest() {
+  document.body.offsetHeight;
+
+  a.textContent = "f";
+
+  document.documentElement.removeAttribute("class");
+}
+</script>
+
+<style>
+:root { columns: 0px }
+</style>
+
+<body onload="runTest();">
+<q id="a" style="display: flex">
+<small>x</label>
+<li>
+</body>
+</html>
diff --git a/css/css-multicol/multicol-dynamic-add-003-ref.html b/css/css-multicol/multicol-dynamic-add-003-ref.html
new file mode 100644
index 00000000000000..c69a3217f29867
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-add-003-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Multi-column Layout Reference: Grid with pseudo-elements in multi-column context</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+<style>
+.columns {
+  columns: 2;
+  column-fill: auto;
+  width: 100px;
+  height: 10px;
+}
+#grid {
+  display: grid;
+  grid: 20px 20px / 40px 40px;
+}
+#grid::before, #grid::after {
+  content: "";
+  grid-row: 1 / 3;
+}
+nav {
+  grid-row: 1 / 3;
+}
+</style>
+
+<div class="columns">
+  <div id="grid">
+    <nav>text</nav>
+  </div>
+</div>
diff --git a/css/css-multicol/multicol-dynamic-add-003.html b/css/css-multicol/multicol-dynamic-add-003.html
new file mode 100644
index 00000000000000..541c964fb5ac18
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-add-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <meta charset="utf-8">
+  <title>CSS Multi-column Layout Test: Append element to grid with pseudo-elements in multi-column context</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-multicol-1/">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1645714">
+  <link rel="match" href="multicol-dynamic-add-003-ref.html">
+  <meta name="assert" content="This test checks that dynamically appending an element to a grid container with ::before and ::after pseudo-elements in a multi-column context renders correctly.">
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    var nav = document.createElement("nav");
+    nav.append("text");
+
+    var grid = document.getElementById("grid");
+    grid.append(nav);
+
+    document.documentElement.removeAttribute("class");
+  }
+  </script>
+
+  <style>
+  .columns {
+    columns: 2;
+    column-fill: auto;
+    width: 100px;
+    height: 10px;
+  }
+  #grid {
+    display: grid;
+    grid: 20px 20px / 40px 40px;
+  }
+  #grid::before, #grid::after {
+    content: "";
+    grid-row: 1 / 3;
+  }
+  nav {
+    grid-row: 1 / 3;
+  }
+  </style>
+
+  <body onload="runTest();">
+    <div class="columns">
+      <div id="grid"></div>
+    </div>
+  </body>
+</html>
diff --git a/css/css-multicol/multicol-dynamic-add-004-ref.html b/css/css-multicol/multicol-dynamic-add-004-ref.html
new file mode 100644
index 00000000000000..e6dfd2e1e0bf56
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-add-004-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Multi-column Layout Reference: Block with floating pseudo-elements in multi-column context</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+
+<style>
+.columns {
+  columns: 2;
+  column-fill: auto;
+  width: 100px;
+  height: 10px;
+}
+#container::before, #container::after {
+  float: left;
+  content: "";
+  width: 10px;
+  height: 20px;
+}
+nav {
+  float: left;
+}
+</style>
+
+<div class="columns">
+  <div id="container">
+    <nav>text</nav>
+  </div>
+</div>
diff --git a/css/css-multicol/multicol-dynamic-add-004.html b/css/css-multicol/multicol-dynamic-add-004.html
new file mode 100644
index 00000000000000..c69675d2cd9e32
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-add-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <meta charset="utf-8">
+  <title>CSS Multi-column Layout Test: Append float element to block with floating pseudo-elements in multi-column context</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-multicol-1/">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1645714">
+  <link rel="match" href="multicol-dynamic-add-004-ref.html">
+  <meta name="assert" content="This test checks that dynamically appending a float element to a block container with floating ::before and ::after pseudo-elements in a multi-column context renders correctly.">
+
+  <script>
+  function runTest() {
+    document.body.offsetHeight;
+
+    var nav = document.createElement("nav");
+    nav.append("text");
+
+    var container = document.getElementById("container");
+    container.append(nav);
+
+    document.documentElement.removeAttribute("class");
+  }
+  </script>
+
+  <style>
+  .columns {
+    columns: 2;
+    column-fill: auto;
+    width: 100px;
+    height: 10px;
+  }
+  #container::before, #container::after {
+    float: left;
+    content: "";
+    width: 10px;
+    height: 20px;
+  }
+  nav {
+    float: left;
+  }
+  </style>
+
+  <body onload="runTest();">
+    <div class="columns">
+      <div id="container"></div>
+    </div>
+  </body>
+</html>
