LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-29 06:02:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Resolve replaced element size constraints using aspect ratios

Browse Source 
Some replaced elements can have intrinsic aspect ratios but no
intrinsic size. In these cases, the tentative sizes are undefined, and
can therefore sometimes be zero. However, when resolving the size
constraints, we are already guaranteed to have an intrinsic aspect
ratio, so let's use that instead to calculate the resolved sizes.
This commit is contained in:
Zaggy1024 2023-09-03 19:20:50 -05:00 committed by Andreas Kling
parent 051f357110
commit e3f693ca7c
Notes: sideshowbarker 2024-07-16 23:54:15 +09:00 
Author: https://github.com/Zaggy1024
Commit: https://github.com/SerenityOS/serenity/commit/e3f693ca7c
Pull-request: https://github.com/SerenityOS/serenity/pull/20943
3 changed files with 37 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Tests/LibWeb/Layout/expected/replaced-within-max-content.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 800x166 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x150 children: not-inline
BlockContainer <div.container> at (8,8) content-size 150x150 children: inline
line 0 width: 150, height: 150, bottom: 150, baseline: 150
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 150x150]
ImageBox <img.replaced> at (8,8) content-size 150x150 children: not-inline
(SVG-as-image isolated context)
Viewport <#document> at (0,0) content-size 150x150 children: inline
SVGSVGBox <svg> at (0,0) content-size 150x150 [SVG] children: not-inline
SVGGeometryBox <path> at (0,0) content-size 150x150 children: not-inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x166]
PaintableWithLines (BlockContainer(anonymous)) [0,0 800x0]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x150]
PaintableWithLines (BlockContainer<DIV>.container) [8,8 150x150]
ImagePaintable (ImageBox<IMG>.replaced) [8,8 150x150]

15
Tests/LibWeb/Layout/input/replaced-within-max-content.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: max-content;
}
.replaced {
min-width: 150px;
max-width: 200px;
}
</style>
</head>
<body><div class="container"><img class="replaced" src="data:image/svg+xml,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 10 10&quot;><path d=&quot;M0,0h10v10h-10v-10&quot;></path></svg>">

2
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View File

@ -274,7 +274,7 @@ CSSPixelSize FormattingContext::solve_replaced_size_constraint(CSSPixels input_w
auto specified_max_height = should_treat_max_height_as_none(box, available_space.height) ? input_height : box.computed_values().max_height().to_px(box, height_of_containing_block);
auto max_height = max(min_height, specified_max_height);
auto aspect_ratio = input_width / input_height;
CSSPixelFraction aspect_ratio = *box.preferred_aspect_ratio();
// These are from the "Constraint Violation" table in spec, but reordered so that each condition is
// interpreted as mutually exclusive to any other.