From 24d5a9d7dfaa3c075ccd1691488a8ab431051bb7 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Fri, 10 Mar 2023 11:32:29 +0100 Subject: [PATCH] LibWeb: Fix bogus percentage vertical padding with box-sizing:border-box The padding-top and padding-bottom properties are relative to the *width* of the containing block, not the height. It's funny how we keep making this same mistake again and again. :^) --- .../vertical-padding-relative-to-cb-width.txt | 18 +++++++++++++++++ ...vertical-padding-relative-to-cb-width.html | 20 +++++++++++++++++++ .../LibWeb/Layout/FormattingContext.cpp | 6 ++++-- 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/vertical-padding-relative-to-cb-width.txt create mode 100644 Tests/LibWeb/Layout/input/vertical-padding-relative-to-cb-width.html diff --git a/Tests/LibWeb/Layout/expected/vertical-padding-relative-to-cb-width.txt b/Tests/LibWeb/Layout/expected/vertical-padding-relative-to-cb-width.txt new file mode 100644 index 0000000000..e308923673 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/vertical-padding-relative-to-cb-width.txt @@ -0,0 +1,18 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x30 children: not-inline + BlockContainer at (10,10) content-size 780x12 children: not-inline + BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline + TextNode <#text> + BlockContainer at (11,11) content-size 600x10 children: not-inline + BlockContainer <(anonymous)> at (11,11) content-size 600x0 children: inline + TextNode <#text> + BlockContainer at (12,72) content-size 598x18.000007 children: inline + line 0 width: 24.859375, height: 19.359375, bottom: 19.359375, baseline: 15.5 + frag 0 from TextNode start: 0, length: 3, rect: [12,72 24.859375x19.359375] + "foo" + TextNode <#text> + BlockContainer <(anonymous)> at (11,211) content-size 600x19.359375 children: inline + line 0 width: 25.21875, height: 19.359375, bottom: 19.359375, baseline: 15.5 + frag 0 from TextNode start: 1, length: 3, rect: [11,211 25.21875x19.359375] + "bar" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/vertical-padding-relative-to-cb-width.html b/Tests/LibWeb/Layout/input/vertical-padding-relative-to-cb-width.html new file mode 100644 index 0000000000..9c4f828549 --- /dev/null +++ b/Tests/LibWeb/Layout/input/vertical-padding-relative-to-cb-width.html @@ -0,0 +1,20 @@ + + +
+
foo
+bar diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index 2dff7760df..502b8da584 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -1283,8 +1283,10 @@ CSS::Length FormattingContext::calculate_inner_height(Layout::Box const& box, Av auto& computed_values = box.computed_values(); if (computed_values.box_sizing() == CSS::BoxSizing::BorderBox) { - auto const padding_top = computed_values.padding().top().resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box); - auto const padding_bottom = computed_values.padding().bottom().resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box); + auto width_of_containing_block = CSS::Length::make_px(containing_block_width_for(box)); + + auto const padding_top = computed_values.padding().top().resolved(box, width_of_containing_block).resolved(box); + auto const padding_bottom = computed_values.padding().bottom().resolved(box, width_of_containing_block).resolved(box); auto inner_height = height.resolved(box, height_of_containing_block_as_length_for_resolve).resolved(box).to_px(box) - computed_values.border_top().width