diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html new file mode 100644 index 0000000000..576d9bf7d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/flex-minimum-height-flex-items-023.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<title>Flex minimum height of image with intrinsic min-height specified</title> +<link rel="author" title="dgrogan@chromium.org" href="mailto:dgrogan@chromium.org" /> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#min-size-auto" /> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content" /> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html" /> +<link rel="bookmark" href="https://crbug.com/1088223"> +<meta name="assert" content="Flex uses automatic minimum sizes when item specifies min-height:intrinsic, because that is treated as auto."> + +<p>Test passes if there is a filled green square.</p> + +<!-- +Here's the spec trail why the height of this item is 100px. + +1. The column flexbox has height:0, and the item has flex-shrink: 1. So + min-height will determine the item's flexed height. + +2. The min-content value of the min-height property is equivalent to the + automatic size, per https://drafts.csswg.org/css-sizing-3/#valdef-width-min-content, + because it's in the item's block dimension. (Blink legacy flex disagrees here) + +3. Per https://drafts.csswg.org/css-flexbox/#min-size-auto, the used value of a + main axis automatic minimum size on a flex item that is not a scroll container + is a content-based minimum size. + +4. The content-based min size of this item is min(content size suggestion, + specified size suggestion). We ignore transferred size suggestion because + this item has a specified size. + +5. content size suggestion = 50px because the stretched width of 100px is sent + through the 2:1 aspect ratio to determine the image's min-content size in the + block axis. + + 5a. This flex container qualifies for 9.8.3: + + If a single-line flex container has a definite cross size, the automatic + preferred outer cross size of any stretched flex items is the flex + container's inner cross size (clamped to the flex item's min and max cross + size) and is considered definite. + + So the preferred width of the image is 100px. + 5b. The float specified by the min-content calculation from css-sizing 5.1 is + <img src="support/300x150-green.png" style="width: 100px; float: left;" /> + This element gets height 50px. + +6. specified size suggestion = 100px because that's what's specified. + +7. So content-based min size = min(50, 100) = 50px. That becomes its flexed + height (see #1). + +8. Then, the item stretches its width to 100px. The item has an aspect ratio, + so does the new width change the height? Not according to + https://drafts.csswg.org/css-flexbox/#algo-stretch, which says "Note that + this step does not affect the main size of the flex item, even if it has an + intrinsic aspect ratio." The height remains 50px. +--> + +<div style="height: 50px; width: 100px; background: green;"></div> +<div style="display: flex; flex-direction: column; width:100px; height: 0px;"> + <img src="support/300x150-green.png" style="min-height: min-content; height: 100px;" /> +</div> |