Tell the column balancer that border/padding is unbreakable.

Make sure that we attempt to make the columns at least as tall as any block-start / block-end border+padding+scrollbar, since we're never going to break inside such things. Bug: 829028 Change-Id: I28b9d472c46f559ad87c28097d75efc45df0608b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3122190 Commit-Queue: Morten Stenshorne <[email protected]> Reviewed-by: Alison Maher <[email protected]> Reviewed-by: Ian Kilpatrick <[email protected]> Cr-Commit-Position: refs/heads/main@{#915714}
web-platform-tests · Aug 26, 2021 · e1fa269 · e1fa269
1 parent 2570be3
commit e1fa269
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/css/css-multicol/multicol-fill-balance-010.html b/css/css-multicol/multicol-fill-balance-010.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
+<style>
+  #container {
+      columns: 2;
+      width: 100px;
+      column-gap: 0;
+      background: green;
+  }
+</style>
+<p>Test passes if there is a filled green square below.</p>
+<div id="container" data-expected-height="100">
+  <div style="padding-top:50px; border-top:50px solid green;"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>
diff --git a/css/css-multicol/multicol-fill-balance-011.html b/css/css-multicol/multicol-fill-balance-011.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
+<link rel="help" href="https://www.w3.org/TR/css-multicol-1/#cf">
+<style>
+  #container {
+      columns: 2;
+      width: 100px;
+      column-gap: 0;
+      background: green;
+  }
+</style>
+<p>Test passes if there is a filled green square below.</p>
+<div id="container" data-expected-height="100">
+  <div style="padding-bottom:50px; border-bottom:50px solid green;"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  checkLayout("#container");
+</script>