mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 13:18:45 +02:00
3170ee73c3
Automatic update from web-platform-tests
[LayoutNG] Lay out flex items with ShrinkToFit in more cases
A row flex box's cross size of {fit,min,max}-content isn't definite,
which affects the inline size of orthogonal children.
Bug: 845235
Change-Id: Id08a1cf6d23e9e295e87c52d426079bc7e886b74
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1758992
Reviewed-by: Christian Biesinger <cbiesinger@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#689232}
--
wpt-commits: a1cec169e027d234248e36e74c29b1efae1b528c
wpt-pr: 18514
42 lines
1.3 KiB
HTML
42 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
||
<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
|
||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-base-size">
|
||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||
<meta name="flags" content="" />
|
||
<meta name="assert" content="A flex container's block cross size of max-content is treated as indefinite when setting fit-content on an item for flex base sizing">
|
||
|
||
<style>
|
||
x-flexbox {
|
||
display: flex;
|
||
height: max-content;
|
||
}
|
||
|
||
.fit-content-item {
|
||
background: green;
|
||
width: 100px;
|
||
writing-mode: vertical-lr;
|
||
}
|
||
|
||
.height-setting-item {
|
||
height: 100px;
|
||
}
|
||
|
||
</style>
|
||
|
||
<!-- This has to be a row flexbox whose item stretches and has vertical writing
|
||
mode to trigger:
|
||
* a cross size is needed to determine the main size (row flexbox's cross size
|
||
is vertical, which is the item's inline size because it has a vertical
|
||
writing mode)
|
||
* the flex item’s cross size is [...] not definite (if the item didn't
|
||
stretch, the definiteness of the container's cross size wouldn't matter
|
||
because the cross size would never be definite and the item would always get
|
||
fit-content)
|
||
-->
|
||
|
||
<p>Test passes if there is a filled green square.</p>
|
||
|
||
<x-flexbox>
|
||
<div class="fit-content-item"></div>
|
||
<div class="height-setting-item"></div>
|
||
</x-flexbox>
|