mirror of
https://github.com/servo/servo.git
synced 2025-06-27 10:33:39 +01:00
39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<title>Flex transferred minimum width</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="match" href="../reference/ref-filled-green-100px-square.xht" />
|
|
<meta name="assert" content="min-width: auto ignores transferred size suggestion when item has a definite main size">
|
|
|
|
<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="width:100px; height: 75px; background: green;"></div>
|
|
<div style="display: flex; width: 0px">
|
|
<!--
|
|
content size suggestion is 300px.
|
|
specified size suggestion is 100px.
|
|
transferred size suggestion is 50px, but that is ignored because there is a
|
|
specified size. The ignoring is from the spec text that says,
|
|
(capitalization added):
|
|
|
|
In general, the content-based minimum size of a flex item is the smaller of
|
|
its content size suggestion and its specified size suggestion. However, if
|
|
the box has an aspect ratio AND NO specified size, its content-based
|
|
minimum size is the smaller of its content size suggestion and its
|
|
transferred size suggestion.
|
|
|
|
So here the content-based minimum size is min(300, 100) = 100.
|
|
-->
|
|
<img src="support/300x150-green.png" style="height: 25px; width: 100px;">
|
|
</div>
|