mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Obey min and max cross sizes of flex items (#33242)
When laying out the contents of a flex item, we used to resolve their cross-axis percentages against the preferred cross size of the item. Now we will take the min and max cross sizes into account. Signed-off-by: Oriol Brufau <obrufau@igalia.com> Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
parent
59c74c874a
commit
46dbe4ce32
3 changed files with 49 additions and 1 deletions
|
@ -1626,7 +1626,12 @@ impl FlexItem<'_> {
|
|||
IndependentFormattingContext::NonReplaced(non_replaced) => {
|
||||
let cross_size = match used_cross_size_override {
|
||||
Some(s) => AuOrAuto::LengthPercentage(s),
|
||||
None => self.content_box_size.cross.map(|t| t),
|
||||
None => self.content_box_size.cross.map(|cross_size| {
|
||||
cross_size.clamp_between_extremums(
|
||||
self.content_min_size.cross,
|
||||
self.content_max_size.cross,
|
||||
)
|
||||
}),
|
||||
};
|
||||
|
||||
let item_writing_mode = non_replaced.style.effective_writing_mode();
|
||||
|
|
13
tests/wpt/meta/MANIFEST.json
vendored
13
tests/wpt/meta/MANIFEST.json
vendored
|
@ -176387,6 +176387,19 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"percentage-max-height-005.html": [
|
||||
"3ca28b3ec1ecc6a204fb1177e1452ec4ce7a5c1c",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"percentage-padding-002.html": [
|
||||
"9eaaff013ef26f557f5f883fea76b81b6031769f",
|
||||
[
|
||||
|
|
30
tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html
vendored
Normal file
30
tests/wpt/tests/css/css-flexbox/percentage-max-height-005.html
vendored
Normal file
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Flexbox Test: flex item with max cross size</title>
|
||||
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#algo-stretch">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#max-size-properties">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="The content of the flex item should resolve the percentage against 100px, not against 200px">
|
||||
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.item {
|
||||
height: 200px;
|
||||
max-height: 100px;
|
||||
align-self: flex-start;
|
||||
background: red;
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="flex">
|
||||
<div class="item">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
Loading…
Add table
Add a link
Reference in a new issue