Make grid container aware that its available block-size can be unconstrained in paginated context.
This happens when nsColumnSetFrame reflows its last column in an
unconstrained available block-size.
The wpt test can trigger the bug in a debug build easily. In opt builds like
Nightly, if one wants to load the test manually, additional incremental reflow
(such as opening devtools) may be needed to trigger the bug.
Co-authored-by: Mats Palmgren <mats@mozilla.com>
Differential Revision: https://phabricator.services.mozilla.com/D86672
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1657345
gecko-commit: f32d958a56b6139dbf35884edb7a6b9e37291970
gecko-reviewers: mats
diff --git a/css/css-multicol/balance-grid-container-ref.html b/css/css-multicol/balance-grid-container-ref.html
new file mode 100644
index 0000000..aa0ea55
--- /dev/null
+++ b/css/css-multicol/balance-grid-container-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>CSS Multi-column Layout Test Reference: Balance a grid container</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 {
+ font: 16px/1.25 sans-serif;
+ }
+ .two-columns {
+ column-count: 2;
+ width: 550px;
+ }
+ .two-column-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-auto-rows: auto;
+ }
+ .grid-col-1 {
+ grid-column: 1;
+ }
+ .grid-col-2 {
+ grid-column: 2;
+ }
+ .keep-together {
+ display: inline-block;
+ }
+ </style>
+
+ <div class="two-columns">
+ <div class="two-column-grid">
+ <div class="grid-col-1">ID Number</div>
+ <div class="grid-col-2">01234567890</div>
+ <div class="grid-col-1">Address</div>
+ <div class="grid-col-2">
+ <div class="keep-together">
+ 123 Fake Street<br>
+ London<br>
+ NW1 1AA<br>
+ UK
+ </div>
+ </div>
+ </div>
+
+ <div class="two-column-grid">
+ <div class="grid-col-1">Relevant Countries</div>
+ <div class="grid-col-2">
+ Ireland<br>
+ United Kingdom
+ </div>
+ </div>
+ </div>
+
+ <div>
+ Some content underneath the details.
+ </div>
+</html>
diff --git a/css/css-multicol/balance-grid-container.html b/css/css-multicol/balance-grid-container.html
new file mode 100644
index 0000000..64df23e
--- /dev/null
+++ b/css/css-multicol/balance-grid-container.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+ <meta charset="utf-8">
+ <title>CSS Multi-column Layout Test: Balance a grid container</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/#cf">
+ <link ref="help" href="https://drafts.csswg.org/css-grid/">
+ <link ref="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1657345">
+ <link rel="match" href="balance-grid-container-ref.html">
+ <meta name="assert" content="This test verifies a grid container in a balanced multicol container can have a balance multicol height.">
+
+ <style>
+ :root {
+ font: 16px/1.25 sans-serif;
+ }
+ .two-columns {
+ column-count: 2;
+ width: 550px;
+ }
+ .two-column-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-auto-rows: auto;
+ }
+ .grid-col-1 {
+ grid-column: 1;
+ }
+ .grid-col-2 {
+ grid-column: 2;
+ }
+ .keep-together {
+ display: inline-block;
+ }
+ </style>
+
+ <div class="two-columns">
+ <div class="two-column-grid">
+ <div class="grid-col-1">ID Number</div>
+ <div class="grid-col-2">01234567890</div>
+ <div class="grid-col-1">Address</div>
+ <div class="grid-col-2">
+ <div class="keep-together">
+ 123 Fake Street<br>
+ London<br>
+ NW1 1AA<br>
+ UK
+ </div>
+ </div>
+ <div class="grid-col-1">Relevant Countries</div>
+ <div class="grid-col-2">
+ Ireland<br>
+ United Kingdom
+ </div>
+ </div>
+ </div>
+
+ <div>
+ Some content underneath the details.
+ </div>
+</html>
