[flex-balance] Add two integration style tests.

bfgeek · chromium-wpt-export-bot · commit 6d630f5ae234 · 2026-05-16T09:31:01.000-07:00
- Tests that flex-wrap:balance has no effect on a display:-webkit-box. - Tests a basic balancing flexbox with flex-grow:1. Bug: 416755656 Change-Id: Ic0b79cfae9fa2040672afd0067a5e40c71c01c6a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7852810 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1631569}
diff --git a/css/css-flexbox/balance/balance-flex-grow-ref.html b/css/css-flexbox/balance/balance-flex-grow-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+#flex {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100px;
+  height: 100px;
+  gap: 10px;
+}
+
+#flex > div {
+  background: green;
+}
+</style>
+<div id="flex">
+  <div style="width: 50px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 40px;"></div>
+  <div style="width: 50px;"></div>
+</div>
diff --git a/css/css-flexbox/balance/balance-flex-grow.html b/css/css-flexbox/balance/balance-flex-grow.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
+<link rel="match" href="balance-flex-grow-ref.html">
+<meta name="assert" content="Tests a basic balance flexbox with flex-grow specified.">
+<style>
+#flex {
+  display: flex;
+  flex-wrap: balance;
+  width: 100px;
+  height: 100px;
+  gap: 10px;
+}
+
+#flex > div {
+  background: green;
+  flex-grow: 1;
+}
+</style>
+<div id="flex">
+  <div style="width: 30px;"></div>
+  <div style="width: 20px;"></div>
+  <div style="width: 20px;"></div>
+  <div style="width: 30px;"></div>
+</div>
diff --git a/css/css-flexbox/balance/webkit-box-no-balance.html b/css/css-flexbox/balance/webkit-box-no-balance.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="flex-wrap:balance doesn't apply to a -webkit-box">
+<style>
+#webkit-box {
+  display: -webkit-box;
+  flex-wrap: balance;
+  width: 100px;
+}
+
+#webkit-box > div {
+  width: 50px;
+  height: 100px;
+  background: green;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="webkit-box">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
