forked from mirrors/gecko-dev
67b8f275d9
test_dynamic_reflow_root_disallowal.html: in the next part, we can calculate
`min-size:auto` as the minimum of specified size and content size correctly
regardless of the value of `flex-basis`. If we do not reset the `inline-size`
(or `block-size`) to `auto`, the flex item's min-width (or min-height) will
always be its specified size (`width:10px` or `height:10px` set in
`gReflowRootCandidateStyles`), and changing `inner` to the content size from
`width:20px` to `width:40px` will have no effect.
flex-minimum-{width,height}-flex-items-005.xht: To make the flex item
resolve min-height:auto as the specified size, the content (image) size
must be larger than it. So here we change the image size to 200x200.
Google Chrome can also pass this test after this patch.
Differential Revision: https://phabricator.services.mozilla.com/D90619
36 lines
1.5 KiB
HTML
36 lines
1.5 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>CSS Flexible Box Test: Minimum width of flex items</title>
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
|
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto" title="4.5. Implied Minimum Size of Flex Items" />
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
|
<meta name="assert" content="Checks that automatic minimum width for flex items is the specified size suggestion, when that is the smallest of the available suggestions." />
|
|
<style type="text/css"><![CDATA[
|
|
#reference-overlapped-red {
|
|
position: absolute;
|
|
background-color: red;
|
|
width: 100px;
|
|
height: 100px;
|
|
z-index: -1;
|
|
}
|
|
|
|
#constrained-flex {
|
|
display: flex;
|
|
width: 10px;
|
|
}
|
|
|
|
#test-flex-item-overlapping-green {
|
|
width: 100px;
|
|
}
|
|
]]></style>
|
|
</head>
|
|
<body>
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
|
|
<div id="reference-overlapped-red"></div>
|
|
<div id="constrained-flex">
|
|
<img id="test-flex-item-overlapping-green" src="support/200x200-green.png" />
|
|
</div>
|
|
</body>
|
|
</html>
|