mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-27 19:29:52 +00:00
8002efe780
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
When layouting a replaced element with natural width and height (e.g. a raster graphic), the replaced element would correctly end up with its natural size in the main-axis dimension. For the cross axis dimension however, the replaced element was stretched or squished to the flex containers inner cross size, which is wrong. Instead, we need to respect the replaced elements aspect ratio. Since the touched code does not have a direct correspondence to any spec text, I am not fully certain that the change is completely correct. However, tests agree with it, so the new code seems more correct than the old one at least. This fixes 50 WPT subtests in `css/css-flexbox`, most of which are already in-tree. I have also created a new test for a scenario that did not seem to be covered by WPT.
30 lines
1.3 KiB
HTML
30 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<style>
|
|
#flex {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 200px;
|
|
/* Below properties exclusively so we can see things properly */
|
|
margin: 100px 0 100px 0;
|
|
background: tan;
|
|
}
|
|
</style>
|
|
<div id="flex">
|
|
<img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAGQAQMAAADRPL3zAAAABlBMVEUwMDCAgIDHGf6uAAAAQ0lEQVRo3u3YMREAQAgDQRzg3+U7gDbl9+y1i4AMNdGrjBBCCCGEXJas84wQQgghhJwWW5kQQgghhPgnEkIIIYSQT1nvD3WWWfRskgAAAABJRU5ErkJggg==">
|
|
</div>
|
|
<script>
|
|
asyncTest(async (dome) => {
|
|
window.addEventListener('load', () => {
|
|
const image = document.getElementById("img");
|
|
const computedImageStyle = getComputedStyle(image);
|
|
const container = document.getElementById("flex");
|
|
const computedContainerHeight = getComputedStyle(container).height;
|
|
|
|
println(`Natural height of image (${image.naturalHeight}px) should be same as computed height (${computedImageStyle.height}).`);
|
|
println(`Natural width of image (${image.naturalWidth}px) should be same as computed width (${computedImageStyle.width}).`);
|
|
println(`Computed height of image (${computedImageStyle.height}) should be larger than computed height of container (${computedContainerHeight}).`);
|
|
dome();
|
|
});
|
|
});
|
|
</script>
|