summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-flexbox/fit-content-item-004.html
blob: 5fbbf4bd510d82a733ca26a41c23cc63b0b83ea1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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="assert" content="A flex container's block cross size of fit-content is treated as indefinite when setting fit-content on an item for flex base sizing">

<style>
x-flexbox {
  display: flex;
  height: fit-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>