commit ba4165589f03e50c83730efecb44c1032fb016f6
parent 01f6bdccb99e85791ecfd4710998eb216b7965a3
Author: Ting-Yu Lin <tlin@mozilla.com>
Date: Thu, 8 Jan 2026 12:10:21 +0000
Bug 2009082 - Add web-platform reftests for appending element into containers that have pseudo-elements. r=emilio,layout-reviewers
- multicol-dynamic-add-002.html is adapted from bug 1645714 comment 0.
- multicol-dynamic-add-003.html is adapted from bug 1645714 comment 6.
- multicol-dynamic-add-004.html is adapted from bug 1645714 comment 7.
Note: multicol-dynamic-add-004.html (inserting float element) still crashes when
running on CI.
Differential Revision: https://phabricator.services.mozilla.com/D278219
Diffstat:
7 files changed, 202 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/meta/css/css-multicol/multicol-dynamic-add-004.html.ini b/testing/web-platform/meta/css/css-multicol/multicol-dynamic-add-004.html.ini
@@ -0,0 +1,3 @@
+[multicol-dynamic-add-004.html]
+ expected:
+ if debug: [CRASH, ERROR] # Bug 1645714
diff --git a/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-002-ref.html b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-002.html b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-003-ref.html b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-003.html b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-004-ref.html b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-multicol/multicol-dynamic-add-004.html b/testing/web-platform/tests/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>
