LibWeb: Derive box baseline from last child *with line boxes*

Before this change, we always derived a box's baseline from its last child, even if the last child didn't have any line boxes inside. This caused baselines to slip further down vertically than expected. There are more baseline alignment issues to fix, but this one was responsible for a fair chunk of trouble. :^)
2025-07-25 21:47:46 +00:00 · 2023-07-25 10:58:11 +02:00 · 2023-07-25 10:58:11 +02:00 · ccf35a973f
commit ccf35a973f
parent 7b3902e3d5
7 changed files with 107 additions and 8 deletions
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-baseline-1.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-baseline-1.txt
@ -0,0 +1,22 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
+    BlockContainer <body> at (10,10) content-size 780x92.9375 children: inline
+      line 0 width: 307.140625, height: 92.9375, bottom: 92.9375, baseline: 35
+        frag 0 from TextNode start: 0, length: 13, rect: [10,31.46875 103.140625x17.46875]
+          "Hello friends"
+        frag 1 from BlockContainer start: 0, length: 0, rect: [114.140625,11 202x90.9375]
+      TextNode <#text>
+      BlockContainer <div.ib> at (114.140625,11) content-size 202x90.9375 inline-block [BFC] children: not-inline
+        BlockContainer <div> at (115.140625,12) content-size 200x17.46875 children: inline
+          line 0 width: 22.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [115.140625,12 22.546875x17.46875]
+              "1st"
+          TextNode <#text>
+        BlockContainer <div> at (115.140625,31.46875) content-size 200x17.46875 children: inline
+          line 0 width: 26.28125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [115.140625,31.46875 26.28125x17.46875]
+              "2nd"
+          TextNode <#text>
+        BlockContainer <div.whee> at (115.140625,50.9375) content-size 200x50 children: not-inline
+        BlockContainer <(anonymous)> at (114.140625,101.9375) content-size 202x0 children: inline
+          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-baseline-2.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-baseline-2.txt
@ -0,0 +1,26 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
+    BlockContainer <body> at (10,10) content-size 780x60.40625 children: inline
+      line 0 width: 144.375, height: 60.40625, bottom: 60.40625, baseline: 35
+        frag 0 from TextNode start: 0, length: 13, rect: [10,31.46875 103.140625x17.46875]
+          "Hello friends"
+        frag 1 from BlockContainer start: 0, length: 0, rect: [114.140625,11 39.234375x58.40625]
+      TextNode <#text>
+      BlockContainer <div.ib> at (114.140625,11) content-size 39.234375x58.40625 inline-block [BFC] children: not-inline
+        BlockContainer <div> at (115.140625,12) content-size 37.234375x17.46875 children: inline
+          line 0 width: 22.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [115.140625,12 22.546875x17.46875]
+              "1st"
+          TextNode <#text>
+        BlockContainer <div> at (115.140625,31.46875) content-size 37.234375x17.46875 children: inline
+          line 0 width: 26.28125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 3, rect: [115.140625,31.46875 26.28125x17.46875]
+              "2nd"
+          TextNode <#text>
+        BlockContainer <div.float> at (115.140625,50.9375) content-size 37.234375x17.46875 floating [BFC] children: inline
+          line 0 width: 37.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+            frag 0 from TextNode start: 0, length: 5, rect: [115.140625,50.9375 37.234375x17.46875]
+              "float"
+          TextNode <#text>
+        BlockContainer <(anonymous)> at (114.140625,49.9375) content-size 39.234375x0 children: inline
+          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-5.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-5.txt
@ -1,12 +1,12 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x135 [BFC] children: inline
-    line 0 width: 170.96875, height: 135, bottom: 135, baseline: 13.53125
-      frag 0 from BlockContainer start: 0, length: 0, rect: [2,15.53125 168.96875x119.46875]
-    BlockContainer <body> at (2,15.53125) content-size 168.96875x119.46875 inline-block [BFC] children: not-inline
-      BlockContainer <div.hmm> at (3,16.53125) content-size 166.96875x17.46875 children: inline
+  BlockContainer <html> at (1,1) content-size 798x121.46875 [BFC] children: inline
+    line 0 width: 170.96875, height: 121.46875, bottom: 121.46875, baseline: 15.53125
+      frag 0 from BlockContainer start: 0, length: 0, rect: [2,2 168.96875x119.46875]
+    BlockContainer <body> at (2,2) content-size 168.96875x119.46875 inline-block [BFC] children: not-inline
+      BlockContainer <div.hmm> at (3,3) content-size 166.96875x17.46875 children: inline
        line 0 width: 166.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
-          frag 0 from TextNode start: 0, length: 21, rect: [3,16.53125 166.96875x17.46875]
+          frag 0 from TextNode start: 0, length: 21, rect: [3,3 166.96875x17.46875]
            "suspiciously tall box"
        TextNode <#text>
-      BlockContainer <(anonymous)> at (2,135) content-size 168.96875x0 children: inline
+      BlockContainer <(anonymous)> at (2,121.46875) content-size 168.96875x0 children: inline
        TextNode <#text>