mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-05 15:49:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Size box as normal if it has aspect ratio but auto sizes

Browse source 
Otherwise we apply `calculate_stretch_fit_width()` instead of
calculating width based on the content inside the box, like other
browsers do.
This commit is contained in:
Aliaksandr Kalenik 2025-03-27 17:12:07 +00:00 • committed by Andreas Kling
commit fc45121b70
Notes: github-actions[bot] 2025-03-27 23:38:46 +00:00
3 changed files with 40 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -1895,11 +1895,9 @@ bool box_is_sized_as_replaced_element(Box const& box)
// However, it is suggested that, if the containing block’s width does not itself depend on the replaced element’s width,
// then the used value of width is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.
// AD-HOC: For inline-level boxes, we don't want to end up in a situation where we apply stretch-fit sizing,
// since that would not match other browsers. Because of that, we specifically reject this case here
// instead of allowing it to proceed.
if (box.display().is_inline_outside()
&& box.computed_values().height().is_auto()
// AD-HOC: If box has preferred aspect ratio but width and height are not specified, then we should
// size it as a normal box to match other browsers.
if (box.computed_values().height().is_auto()
&& box.computed_values().width().is_auto()
&& !box.has_natural_width()
&& !box.has_natural_height()) {

21
Tests/LibWeb/Layout/expected/block-and-inline/aspect-ratio-but-width-and-height-are-auto.txt Normal file
View file

@ -0,0 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x208 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x192 children: not-inline
Box <div.flex> at (8,8) content-size 784x192 flex-container(row) [FFC] children: not-inline
BlockContainer <div.wrapper> at (8,8) content-size 192x192 flex-item [BFC] children: not-inline
BlockContainer <div.aspectratio> at (8,8) content-size 192x192 children: not-inline
BlockContainer <div.box> at (8,8) content-size 192x192 children: not-inline
BlockContainer <(anonymous)> at (200,8) content-size 36.84375x192 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [200,8 36.84375x17] baseline: 13.296875
"hello"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x208]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x192]
PaintableBox (Box<DIV>.flex) [8,8 784x192]
PaintableWithLines (BlockContainer<DIV>.wrapper) [8,8 192x192]
PaintableWithLines (BlockContainer<DIV>.aspectratio) [8,8 192x192]
PaintableWithLines (BlockContainer<DIV>.box) [8,8 192x192]
PaintableWithLines (BlockContainer(anonymous)) [200,8 36.84375x192]
TextPaintable (TextNode<#text>)

16
Tests/LibWeb/Layout/input/block-and-inline/aspect-ratio-but-width-and-height-are-auto.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html><style>
* {
outline: 1px solid black;
}
.flex {
display: flex;
}
.aspectratio {
aspect-ratio: 1/1;
}
.box {
width: 192px;
height: 192px;
background-color: magenta;
}
</style><div class="flex"><div class="wrapper"><div class="aspectratio"><div class="box"></div></div></div>hello