浏览代码

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. :^)
Andreas Kling 2 年之前
父节点
当前提交
24d5a9d7df

+ 18 - 0
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 <html> at (1,1) content-size 798x30 children: not-inline
+    BlockContainer <body> at (10,10) content-size 780x12 children: not-inline
+      BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline
+        TextNode <#text>
+      BlockContainer <div.cb> at (11,11) content-size 600x10 children: not-inline
+        BlockContainer <(anonymous)> at (11,11) content-size 600x0 children: inline
+          TextNode <#text>
+        BlockContainer <div.foo> 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>

+ 20 - 0
Tests/LibWeb/Layout/input/vertical-padding-relative-to-cb-width.html

@@ -0,0 +1,20 @@
+<style>
+* {
+    border: 1px solid black;
+}
+.cb {
+    width: 600px;
+    height: 10px;
+}
+.foo {
+    background: orange;
+    box-sizing: border-box;
+    height: 200px;
+    padding-top: 10%;
+    padding-bottom: 20%;
+}
+</style>
+<body>
+<div class="cb">
+<div class="foo">foo</div>
+bar

+ 4 - 2
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