From 3e70c1b6a3e13c544d42b25e19ee51048a22190c Mon Sep 17 00:00:00 2001 From: Andi Gallo Date: Fri, 4 Aug 2023 10:37:44 +0000 Subject: [PATCH] LibWeb: Improve precision when computing size of replaced elements Change associativity in computing of replaced element size to improve precision of division. Fixes vertically squashed image from Mozilla splash page MDN example. --- .../abspos-box-with-replaced-element.txt | 12 ++++++------ ...image-with-multiple-constraint-violations.txt | 8 ++++---- .../LibWeb/Layout/FormattingContext.cpp | 16 ++++++++-------- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/Tests/LibWeb/Layout/expected/abspos-box-with-replaced-element.txt b/Tests/LibWeb/Layout/expected/abspos-box-with-replaced-element.txt index 98ccd2f2b3..a2c7bd3268 100644 --- a/Tests/LibWeb/Layout/expected/abspos-box-with-replaced-element.txt +++ b/Tests/LibWeb/Layout/expected/abspos-box-with-replaced-element.txt @@ -1,13 +1,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (1,1) content-size 798x0 [BFC] children: not-inline BlockContainer at (10,10) content-size 500x100 positioned [BFC] children: not-inline - BlockContainer 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 at (262,12) content-size 248x23.25 children: not-inline + BlockContainer 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 at (262,12) content-size 248x26.46875 children: not-inline PaintableWithLines (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer) [0,0 800x2] overflow: [9,9 502x102] PaintableWithLines (BlockContainer) [9,9 502x102] - PaintableWithLines (BlockContainer
.image-container) [260,10 250x27.25] overflow: [261,11 249x25.25] - ImagePaintable (ImageBox) [261,11 250x25.25] + PaintableWithLines (BlockContainer
.image-container) [260,10 250x30.46875] overflow: [261,11 249x28.46875] + ImagePaintable (ImageBox) [261,11 250x28.46875] diff --git a/Tests/LibWeb/Layout/expected/image-with-multiple-constraint-violations.txt b/Tests/LibWeb/Layout/expected/image-with-multiple-constraint-violations.txt index fd1ba0e72d..b687556789 100644 --- a/Tests/LibWeb/Layout/expected/image-with-multiple-constraint-violations.txt +++ b/Tests/LibWeb/Layout/expected/image-with-multiple-constraint-violations.txt @@ -1,11 +1,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (1,1) content-size 798x80 [BFC] children: not-inline BlockContainer 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 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 at (11,11) content-size 80x60 children: not-inline PaintableWithLines (Viewport<#document>) [0,0 800x600] PaintableWithLines (BlockContainer) [0,0 800x82] PaintableWithLines (BlockContainer) [9,9 782x64] - ImagePaintable (ImageBox) [10,10 81.6875x62] + ImagePaintable (ImageBox) [10,10 82x62] diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index 8b325af4da..8bb666cced 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -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)