mirror of
https://github.com/servo/servo.git
synced 2025-09-30 08:39:16 +01:00
layout: Obey intrinsic min/max block sizes on flex containers (#36973)
Intrinsic sizing keywords weren't working correctly on the min and max block sizes of a flex container, because we weren't setting the `CacheableLayoutResult::content_block_size` to the right value. This also ensures that `align-content` aligns within the final size of the container. Note it's not very clear what to do for single-line containers, they are being discussed in https://github.com/w3c/csswg-drafts/issues/12123 Testing: Adding new WPT tests. There are still some failures, but most subtests would fail without this change. Fixes: #36981 Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau
GitHub
parent
103cbed928
commit
cd0dbb9afb
7 changed files with 401 additions and 22 deletions
14
tests/wpt/meta/MANIFEST.json
vendored
14
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -586672,6 +586672,20 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"flex-container-max-content-002.tentative.html": [
|
||||
"77a074b153a3b3fcb47c5665bab614c1720a73d2",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"flex-container-min-content-002.tentative.html": [
|
||||
"92d37e3b9d8db7b57b813b49c26a3e9cd03b5179",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"flex-direction-column-overlap-001.html": [
|
||||
"4d483a44fc630e46ddbe75ca79d8246eed67a94d",
|
||||
[
|
||||
|
|
|
|||
12
tests/wpt/meta/css/css-flexbox/flex-container-max-content-002.tentative.html.ini
vendored
Normal file
12
tests/wpt/meta/css/css-flexbox/flex-container-max-content-002.tentative.html.ini
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
[flex-container-max-content-002.tentative.html]
|
||||
[.flex 2]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 3]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 5]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 6]
|
||||
expected: FAIL
|
||||
21
tests/wpt/meta/css/css-flexbox/flex-container-min-content-002.tentative.html.ini
vendored
Normal file
21
tests/wpt/meta/css/css-flexbox/flex-container-min-content-002.tentative.html.ini
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
[flex-container-min-content-002.tentative.html]
|
||||
[.flex 2]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 3]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 5]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 6]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 13]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 14]
|
||||
expected: FAIL
|
||||
|
||||
[.flex 15]
|
||||
expected: FAIL
|
||||
169
tests/wpt/tests/css/css-flexbox/flex-container-max-content-002.tentative.html
vendored
Normal file
169
tests/wpt/tests/css/css-flexbox/flex-container-max-content-002.tentative.html
vendored
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Flex Container Max-Content Sizes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes"
|
||||
title="9.9.1. Flex Container Intrinsic Main Sizes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes"
|
||||
title="9.9.2. Flex Container Intrinsic Cross Sizes">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12123">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
.flex {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
border: 5px solid magenta;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
}
|
||||
.flex.min {
|
||||
width: 0;
|
||||
height: 0;
|
||||
min-width: max-content;
|
||||
min-height: max-content;
|
||||
}
|
||||
.flex.max {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
max-width: max-content;
|
||||
max-height: max-content;
|
||||
}
|
||||
.flex > div {
|
||||
font: 25px/1 Ahem;
|
||||
border: 5px solid cyan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Single-line row flex container -->
|
||||
<div class="flex" style="flex-flow: row nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: row nowrap"
|
||||
data-expected-width="180" data-expected-height="45">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row nowrap"
|
||||
data-expected-width="180" data-expected-height="45">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row nowrap"
|
||||
data-expected-width="180" data-expected-height="45">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Single-line column flex container -->
|
||||
<div class="flex" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: column nowrap"
|
||||
data-expected-width="95" data-expected-height="80">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column nowrap"
|
||||
data-expected-width="95" data-expected-height="80">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column nowrap"
|
||||
data-expected-width="95" data-expected-height="80">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Multi-line row flex container -->
|
||||
<div class="flex" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: row wrap"
|
||||
data-expected-width="180" data-expected-height="45">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row wrap"
|
||||
data-expected-width="180" data-expected-height="45">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row wrap"
|
||||
data-expected-width="180" data-expected-height="45">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Multi-line column flex container -->
|
||||
<div class="flex" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: column wrap"
|
||||
data-expected-width="95" data-expected-height="80">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column wrap"
|
||||
data-expected-width="95" data-expected-height="80">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column wrap"
|
||||
data-expected-width="95" data-expected-height="80">
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
<div data-expected-width="85" data-expected-height="35">X X</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
checkLayout(".flex");
|
||||
</script>
|
||||
169
tests/wpt/tests/css/css-flexbox/flex-container-min-content-002.tentative.html
vendored
Normal file
169
tests/wpt/tests/css/css-flexbox/flex-container-min-content-002.tentative.html
vendored
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Flex Container Min-Content Sizes</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-main-sizes"
|
||||
title="9.9.1. Flex Container Intrinsic Main Sizes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#intrinsic-cross-sizes"
|
||||
title="9.9.2. Flex Container Intrinsic Cross Sizes">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12123">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
.flex {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
border: 5px solid magenta;
|
||||
width: min-content;
|
||||
height: min-content;
|
||||
}
|
||||
.flex.min {
|
||||
width: 0;
|
||||
height: 0;
|
||||
min-width: min-content;
|
||||
min-height: min-content;
|
||||
}
|
||||
.flex.max {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
max-width: min-content;
|
||||
max-height: min-content;
|
||||
}
|
||||
.flex > div {
|
||||
font: 25px/1 Ahem;
|
||||
border: 5px solid cyan;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Single-line row flex container -->
|
||||
<div class="flex" style="flex-flow: row nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: row nowrap"
|
||||
data-expected-width="80" data-expected-height="70">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row nowrap"
|
||||
data-expected-width="80" data-expected-height="70">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row nowrap"
|
||||
data-expected-width="80" data-expected-height="70">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Single-line column flex container -->
|
||||
<div class="flex" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column nowrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Multi-line row flex container -->
|
||||
<div class="flex" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: row wrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Multi-line column flex container -->
|
||||
<div class="flex" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="45">
|
||||
<div style="width: 25px; height: 25px">X</div>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex min" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
<div class="flex max" style="flex-flow: column wrap"
|
||||
data-expected-width="45" data-expected-height="130">
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
<div data-expected-width="35" data-expected-height="60">X X</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
checkLayout(".flex");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue