1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-multicol/balance-grid-container.html b/testing/web-platform/tests/css/css-multicol/balance-grid-container.html
new file mode 100644
index 0000000000..64df23e09f
--- /dev/null
+++ b/testing/web-platform/tests/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>