[css-flex] Include borders in min/max main sizes

The new intrinsic sizing algorithm uses the items' min/max main sizes in a few places, but we were only applying the content box's extent, not borders or padding. It's abnormal that FlexItems store only the content box's min/max main sizes, but they do, so we have to add borders and padding when using those. Bug: 240765 Change-Id: Ia9ae380c0ed5977cb77c8bdf9b59b34dddac2b9f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3722487 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1017641}
web-platform-tests · Jun 24, 2022 · 808d59e · 808d59e
1 parent 7de183d
commit 808d59e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/css/css-flexbox/intrinsic-size/row-006.html b/css/css-flexbox/intrinsic-size/row-006.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="Include borders in min-width when auto min-width wins over an inflexible flex-basis." />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-direction: row; width: max-content; background: green; height: 100px;">
+  <div style="flex: 0 0 0px; border: 10px solid transparent;">
+    <div style="width:80px;"></div>
+  </div>
+</div>
diff --git a/css/css-flexbox/intrinsic-size/row-007.html b/css/css-flexbox/intrinsic-size/row-007.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="Include borders in max-width when max-width wins over an inflexible flex-basis." />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-direction: row; width: max-content; background: green; height: 100px;">
+  <div
+    style="flex: 0 0 200px; border: 10px solid transparent; box-sizing: border-box; max-width: 100px;">
+  </div>
+</div>