Ian Kilpatrick
43f1e81769
Automatic update from web-platform-tests [calc-size] Fix flex line-wrapping behaviour. Previously we'd use LayoutUnit::Max to force ComputeBlockSizeForFragment to resolve. This worked (ignoring some saturation issue), but was incorrect for calc-size(). Resolve ComputeBlockSizeForFragment with an indefinite intrinsic-size instead, then resolve the max block-size if needed. Change-Id: I48bb17d95cb9ffdd381f2563e800a4d9cf7dc046 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7173658 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1548070} -- wpt-commits: 6c7eeb9c46b4b41248081b46bc3e8ced23e26d7e wpt-pr: 56159
170 lines
6.3 KiB
HTML
170 lines
6.3 KiB
HTML
<!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="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: 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>
|
|
document.fonts.ready.then(() => { checkLayout(".flex") })
|
|
</script>
|