RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 22:38:13 +00:00
Code Issues Activity Actions

LibWeb: Improve precision when computing size of replaced elements

Browse source 
Change associativity in computing of replaced element size to improve
precision of division.

Fixes vertically squashed image from Mozilla splash page MDN example.
This commit is contained in:
Andi Gallo 2023-08-04 10:37:44 +00:00 • committed by Alexander Kalenik
parent e9ad8d5e4f
commit 3e70c1b6a3
3 changed files with 18 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Tests/LibWeb/Layout/expected/abspos-box-with-replaced-element.txt
View file

@ -1,13 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 500x100 positioned [BFC] children: not-inline
BlockContainer <div.image-container> at (261,11) content-size 248x25.25 positioned [BFC] children: inline
line 0 width: 250, height: 25.25, bottom: 25.25, baseline: 25.25
frag 0 from ImageBox start: 0, length: 0, rect: [262,12 248x23.25]
ImageBox <img> at (262,12) content-size 248x23.25 children: not-inline
BlockContainer <div.image-container> at (261,11) content-size 248x28.46875 positioned [BFC] children: inline
line 0 width: 250, height: 28.46875, bottom: 28.46875, baseline: 28.46875
frag 0 from ImageBox start: 0, length: 0, rect: [262,12 248x26.46875]
ImageBox <img> at (262,12) content-size 248x26.46875 children: not-inline
PaintableWithLines (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x2] overflow: [9,9 502x102]
PaintableWithLines (BlockContainer<BODY>) [9,9 502x102]
PaintableWithLines (BlockContainer<DIV>.image-container) [260,10 250x27.25] overflow: [261,11 249x25.25]
ImagePaintable (ImageBox<IMG>) [261,11 250x25.25]
PaintableWithLines (BlockContainer<DIV>.image-container) [260,10 250x30.46875] overflow: [261,11 249x28.46875]
ImagePaintable (ImageBox<IMG>) [261,11 250x28.46875]

8
Tests/LibWeb/Layout/expected/image-with-multiple-constraint-violations.txt
View file

@ -1,11 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x80 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x62 children: inline
line 0 width: 81.6875, height: 62, bottom: 62, baseline: 62
frag 0 from ImageBox start: 0, length: 0, rect: [11,11 79.6875x60]
ImageBox <img> at (11,11) content-size 79.6875x60 children: not-inline
line 0 width: 82, height: 62, bottom: 62, baseline: 62
frag 0 from ImageBox start: 0, length: 0, rect: [11,11 80x60]
ImageBox <img> at (11,11) content-size 80x60 children: not-inline
PaintableWithLines (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x82]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x64]
ImagePaintable (ImageBox<IMG>) [10,10 81.6875x62]
ImagePaintable (ImageBox<IMG>) [10,10 82x62]

16
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -283,21 +283,21 @@ CSSPixelSize FormattingContext::solve_replaced_size_constraint(CSSPixels input_w
auto& h = size.height;
if (w > max_width)
size = { max_width, max(max_width * (h / w), min_height) };
size = { max_width, max(max_width * h / w, min_height) };
if (w < min_width)
size = { min_width, min(min_width * (h / w), max_height) };
size = { min_width, min(min_width * h / w, max_height) };
if (h > max_height)
size = { max(max_height * (w / h), min_width), max_height };
size = { max(max_height * w / h, min_width), max_height };
if (h < min_height)
size = { min(min_height * (w / h), max_width), min_height };
size = { min(min_height * w / h, max_width), min_height };
if ((w > max_width && h > max_height) && (max_width / w <= max_height / h))
size = { max_width, max(min_height, max_width * (h / w)) };
size = { max_width, max(min_height, max_width * h / w) };
if ((w > max_width && h > max_height) && (max_width / w > max_height / h))
size = { max(min_width, max_height * (w / h)), max_height };
size = { max(min_width, max_height * w / h), max_height };
if ((w < min_width && h < min_height) && (min_width / w <= min_height / h))
size = { min(max_width, min_height * (w / h)), min_height };
size = { min(max_width, min_height * w / h), min_height };
if ((w < min_width && h < min_height) && (min_width / w > min_height / h))
size = { min_width, min(max_height, min_width * (h / w)) };
size = { min_width, min(max_height, min_width * h / w) };
if (w < min_width && h > max_height)
size = { min_width, max_height };
if (w > max_width && h < min_height)