ladybird/Tests/LibWeb/Layout/input/flex-column-item-with-auto-height-depending-on-auto-width.html

<!DOCTYPE html><html><head><style>
* {
    border: 1px solid black;
    font: 80px SerenitySans;
}
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
}
.upper {
    background: orange;
}
</style></head><body class="hero"><div class="upper">This entire text should be on orange background.</div></div>
LibWeb: Use fit-content width in place of indefinite flex item widths In `flex-direction: column` layouts, a flex item's intrinsic height may depend on its width, but the width is calculated after the intrinsic height is required. Unfortunately, the specification doesn't tell us exactly what to do here (missing inputs to intrinsic sizing is a common problem) so we take the solution that flexbox applies in 9.2.3.C and apply it to all intrinsic height calculations within FlexFormattingContext: if the used width of an item is not yet known when its intrinsic height is requested, we substitute the fit-content width instead. Note that while this is technically ad-hoc, it's basically extrapolating the spec's suggestion in one specific case and using it in all cases. 2023-03-27 20:56:20 +02:00			`<!DOCTYPE html><html><head><style>`
			`* {`
			`border: 1px solid black;`
			`font: 80px SerenitySans;`
			`}`
			`.hero {`
			`display: flex;`
			`flex-direction: column;`
			`align-items: center;`
			`width: 500px;`
			`}`
			`.upper {`
			`background: orange;`
			`}`
			`</style></head><body class="hero"><div class="upper">This entire text should be on orange background.</div></div>`