[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}
diff --git a/css/css-flexbox/intrinsic-size/row-006.html b/css/css-flexbox/intrinsic-size/row-006.html
new file mode 100644
index 0000000..c7b6171
--- /dev/null
+++ 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
new file mode 100644
index 0000000..b2f4f0a
--- /dev/null
+++ 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>
