mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-28 13:18:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Don't let aspect-ratio influence size definiteness
Some checks are pending
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
Details
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Details
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Details
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Details
Lint Code / lint (push) Waiting to run
Details
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Details
Push notes / build (push) Waiting to run
Details

Browse source 
As it turns out, we still have to let the formatting contexts do a bit
of layout work in order to correctly apply the aspect-ratio. Hence we
can't just implicitly transfer definiteness from one size to the other.

This is a revert of 1cfd8b3ac0.
This commit is contained in:
Andreas Kling 2025-08-05 18:03:22 +02:00 • committed by Andreas Kling
commit 28c1dd551b
Notes: github-actions[bot] 2025-08-05 19:35:06 +00:00
3 changed files with 55 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Libraries/LibWeb/Layout/LayoutState.cpp
View file

@ -605,23 +605,6 @@ void LayoutState::UsedValues::set_node(NodeWithStyle& node, UsedValues const* co
m_has_definite_width = is_definite_size(computed_values.width(), m_content_width, true); m_has_definite_width = is_definite_size(computed_values.width(), m_content_width, true);
m_has_definite_height = is_definite_size(computed_values.height(), m_content_height, false); m_has_definite_height = is_definite_size(computed_values.height(), m_content_height, false);
// For boxes with a preferred aspect ratio and one definite size, we can infer the other size
// and consider it definite since this did not require performing layout.
if (is<Box>(node)) {
auto const& box = static_cast<Box const&>(node);
if (auto aspect_ratio = box.preferred_aspect_ratio(); aspect_ratio.has_value()) {
if (m_has_definite_width && m_has_definite_height) {
// Both width and height are definite.
} else if (m_has_definite_width) {
m_content_height = *aspect_ratio == 0 ? 0 : clamp_to_max_dimension_value(m_content_width / *aspect_ratio);
m_has_definite_height = true;
} else if (m_has_definite_height) {
m_content_width = clamp_to_max_dimension_value(m_content_height * *aspect_ratio);
m_has_definite_width = true;
}
}
}
if (m_has_definite_width) { if (m_has_definite_width) {
if (has_definite_min_width) if (has_definite_min_width)
m_content_width = clamp_to_max_dimension_value(max(min_width, m_content_width)); m_content_width = clamp_to_max_dimension_value(max(min_width, m_content_width));

36
Tests/LibWeb/Layout/expected/flex/aspect-ratio-with-percentage-width-and-height.txt Normal file
View file

@ -0,0 +1,36 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x92.671875 [BFC] children: not-inline
Box <body> at (13,13) content-size 200x66.671875 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div> at (18,18) content-size 56.671875x56.671875 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [18,18 27.15625x18] baseline: 13.796875
"foo"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div> at (84.671875,18) content-size 56.671875x56.671875 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [84.671875,18 27.640625x18] baseline: 13.796875
"bar"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div> at (151.34375,18) content-size 56.671875x56.671875 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [151.34375,18 27.203125x18] baseline: 13.796875
"baz"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x92.671875]
PaintableBox (Box<BODY>) [8,8 210x76.671875] overflow: [13,13 200.015625x66.671875]
PaintableWithLines (BlockContainer<DIV>) [13,13 66.671875x66.671875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [79.671875,13 66.671875x66.671875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [146.34375,13 66.671875x66.671875]
TextPaintable (TextNode<#text>)
SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
SC for BlockContainer<HTML> [0,0 800x92.671875] [children: 0] (z-index: auto)

19
Tests/LibWeb/Layout/input/flex/aspect-ratio-with-percentage-width-and-height.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html><style>
* { outline: 1px solid black; }
body {
width: 200px;
display: flex;
border: 5px solid lime;
}
div {
aspect-ratio: 1;
border: 5px solid orange;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
<body>
<div>foo</div>
<div>bar</div>
<div>baz</div>