ladybird/Tests/LibWeb/Layout/input/flex-item-vertical-padding-relative-to-flex-container-width.html

<style>
* {
    border: 1px solid black;
    font-family: 'SerenitySans';
}
.flex-container {
    display: flex;
    width: 600px;
    height: 10px;
}
.flex-item {
    background: orange;
    box-sizing: border-box;
    min-height: 200px;
    padding-top: 10%;
    padding-bottom: 20%;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">foo</div>
LibWeb: Fix bogus min/max-height for box-sizing:border-box flex items When resolving these constraints to CSS pixel sizes, we have to resolve padding-top and padding-bottom against the flex container's width, not its height. 2023-03-10 11:54:52 +01:00			`<style>`
			`* {`
			`border: 1px solid black;`
Tests/LibWeb: Use SerenitySans in new layout tests This ensures consistent font metrics no matter which platform fonts are available. 2023-03-10 18:09:34 +01:00			`font-family: 'SerenitySans';`
LibWeb: Fix bogus min/max-height for box-sizing:border-box flex items When resolving these constraints to CSS pixel sizes, we have to resolve padding-top and padding-bottom against the flex container's width, not its height. 2023-03-10 11:54:52 +01:00			`}`
			`.flex-container {`
			`display: flex;`
			`width: 600px;`
			`height: 10px;`
			`}`
			`.flex-item {`
			`background: orange;`
			`box-sizing: border-box;`
			`min-height: 200px;`
			`padding-top: 10%;`
			`padding-bottom: 20%;`
			`}`
			`</style>`
			`<body>`
			`<div class="flex-container">`
			`<div class="flex-item">foo</div>`