Make sure to reflow the line again if we bail out of reflow due to break-inside: avoid.
The issue is that we mark the second input as dirty when it gets the
reflow request (this is as expected), but then during multicol reflow
everything seems to go smoothly, but we hit this code:
https://searchfox.org/mozilla-central/rev/00977c4e37865a92f1c15572ae4aea90e934b25b/layout/generic/nsBlockFrame.cpp#3745
And bail out, leaving the line marked as not dirty, and as such the
stuff inside the page-break-inside: avoid dirty.
When it changes further, we think it's already dirty so don't bother
adding it to the dirty root list anymore and the text frame remains with
its original tiny width.
Differential Revision: https://phabricator.services.mozilla.com/D121869
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1721262
gecko-commit: 981cd4e1f9b2f3f4dbf956f3f6a18f58920d46ab
gecko-reviewers: dholbert
diff --git a/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001-ref.html b/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001-ref.html
new file mode 100644
index 0000000..2012139
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>CSS Test reference</title>
+<style>
+ input { -moz-appearance: none; -webkit-appearance: none; appearance: none; }
+</style>
+<div style="column-count: 2">
+ a<br>
+ <input>
+
+ <div style="page-break-inside: avoid; break-inside: avoid;">
+ b
+ <div><input id="editme" value="Am I clipped?"></div>
+ </div>
+</div>
diff --git a/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001.html b/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001.html
new file mode 100644
index 0000000..1106328
--- /dev/null
+++ b/css/css-multicol/multicol-dynamic-change-inside-break-inside-avoid-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="tweak reftest-wait">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-break/#break-within">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1721262">
+<link rel="match" href="multicol-dynamic-change-inside-break-inside-avoid-001-ref.html">
+<style>
+ input { -moz-appearance: none; -webkit-appearance: none; appearance: none; }
+
+ .tweak input {
+ border: 3px solid red;
+ }
+</style>
+<div style="column-count: 2">
+ a<br>
+ <input>
+
+ <div style="page-break-inside: avoid; break-inside: avoid;">
+ b
+ <div><input id="editme" value="."></div>
+ </div>
+</div>
+<script>
+function paint() {
+ return new Promise(resolve => {
+ requestAnimationFrame(() => requestAnimationFrame(resolve));
+ });
+}
+
+(async function() {
+ await paint();
+
+ document.documentElement.classList.remove("tweak");
+
+ await paint();
+
+ document.getElementById("editme").value = "Am I clipped?";
+ document.documentElement.classList.remove("reftest-wait");
+})();
+</script>
