LibWeb: Propagate margin and offset when computing a box's baseline

When traversing the layout tree to find an appropriate box child to derive the baseline from. Only the child's margin and offset was being applied. Now we sum each offset on the recursive call.
LadybirdBrowser · Jul 15, 2024 · 3c897e7 · 3c897e7
1 parent c8e29ad
commit 3c897e7
Show file tree

Hide file tree

Showing 32 changed files with 134 additions and 80 deletions.
diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-baseline-align.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-baseline-align.txt
@@ -1,15 +1,15 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x48 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 34
+      frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 36
       BlockContainer <div.ib> at (8,8) content-size 61.1875x48 inline-block [BFC] children: inline
-        frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22] baseline: 18
-        frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17] baseline: 13.296875
+        frag 0 from BlockContainer start: 0, length: 0, rect: [9,27 17.828125x22] baseline: 18
+        frag 1 from TextNode start: 0, length: 1, rect: [28,30 8x17] baseline: 13.296875
             " "
-        frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 34
+        frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 36
         TextNode <#text>
-        BlockContainer <div.label> at (9,25) content-size 17.828125x22 inline-block [BFC] children: inline
-          frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22] baseline: 17
+        BlockContainer <div.label> at (9,27) content-size 17.828125x22 inline-block [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 1, rect: [9,27 17.828125x22] baseline: 17
               "A"
           TextNode <#text>
         TextNode <#text>
@@ -25,7 +25,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x48]
       PaintableWithLines (BlockContainer<DIV>.ib) [8,8 61.1875x48]
-        PaintableWithLines (BlockContainer<DIV>.label) [8,24 19.828125x24]
+        PaintableWithLines (BlockContainer<DIV>.label) [8,26 19.828125x24]
           TextPaintable (TextNode<#text>)
         TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x48]

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-image-only.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-image-only.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x424 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 420x420] baseline: 420
+      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 420x420] baseline: 422
       BlockContainer <button> at (13,10) content-size 420x420 inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (13,10) content-size 420x420 flex-container(column) [FFC] children: not-inline
           BlockContainer <(anonymous)> at (13,10) content-size 420x420 flex-item [BFC] children: inline

diff --git a/...LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt b/...LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x200 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178] baseline: 70.296875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178] baseline: 81.296875
       TextNode <#text>
       BlockContainer <button.button.border-black> at (22,19) content-size 48.6875x178 inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (22,19) content-size 48.6875x178 flex-container(column) [FFC] children: not-inline

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-after-pseudo.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-after-pseudo.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x75 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x59 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 42.484375
+      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 44.484375
       BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x55 positioned inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-container(column) [FFC] children: not-inline
           BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-item [BFC] children: inline

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-before-pseudo.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-before-pseudo.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x75 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x59 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 42.484375
+      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 44.484375
       BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x55 positioned inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (9,9) content-size 422.640625x57 positioned [BFC] children: inline
           TextNode <#text>

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-block-content-baseline-align.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-block-content-baseline-align.txt
@@ -1,15 +1,15 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x48 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 34
+      frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 36
       BlockContainer <div.ib> at (8,8) content-size 61.1875x48 inline-block [BFC] children: inline
-        frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22] baseline: 18
-        frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17] baseline: 13.296875
+        frag 0 from BlockContainer start: 0, length: 0, rect: [9,27 17.828125x22] baseline: 18
+        frag 1 from TextNode start: 0, length: 1, rect: [28,30 8x17] baseline: 13.296875
             " "
-        frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 34
+        frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 36
         TextNode <#text>
-        BlockContainer <div.label> at (9,25) content-size 17.828125x22 inline-block [BFC] children: inline
-          frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22] baseline: 17
+        BlockContainer <div.label> at (9,27) content-size 17.828125x22 inline-block [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 1, rect: [9,27 17.828125x22] baseline: 17
               "A"
           TextNode <#text>
         TextNode <#text>
@@ -30,7 +30,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x48]
       PaintableWithLines (BlockContainer<DIV>.ib) [8,8 61.1875x48]
-        PaintableWithLines (BlockContainer<DIV>.label) [8,24 19.828125x24]
+        PaintableWithLines (BlockContainer<DIV>.label) [8,26 19.828125x24]
           TextPaintable (TextNode<#text>)
         TextPaintable (TextNode<#text>)
         PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x48]

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-min-height.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-min-height.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x104 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 143.515625x100] baseline: 54.796875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 143.515625x100] baseline: 56.796875
       BlockContainer <button> at (13,10) content-size 143.515625x100 inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (13,10) content-size 143.515625x100 flex-container(column) [FFC] children: not-inline
           BlockContainer <(anonymous)> at (13,51.5) content-size 143.515625x17 flex-item [BFC] children: inline

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-multiple-words-text-node-label.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-multiple-words-text-node-label.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x21 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17] baseline: 13.296875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17] baseline: 15.296875
       BlockContainer <button> at (13,10) content-size 49.921875x17 inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17 flex-container(column) [FFC] children: not-inline
           BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17 flex-item [BFC] children: inline

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label-and-font-size.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label-and-font-size.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x56 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 111.65625x52] baseline: 40.390625
+      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 111.65625x52] baseline: 42.390625
       BlockContainer <button> at (13,10) content-size 111.65625x52 inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52 flex-container(column) [FFC] children: not-inline
           BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52 flex-item [BFC] children: inline

diff --git a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label.txt b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x21 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17] baseline: 13.296875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17] baseline: 15.296875
       BlockContainer <button> at (13,10) content-size 37.21875x17 inline-block [BFC] children: not-inline
         BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17 flex-container(column) [FFC] children: not-inline
           BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17 flex-item [BFC] children: inline

diff --git 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
@@ -1,9 +1,9 @@
 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 children: inline
-      frag 0 from TextNode start: 0, length: 13, rect: [10,31 103.140625x17] baseline: 13.296875
+      frag 0 from TextNode start: 0, length: 13, rect: [10,32 103.140625x17] baseline: 13.296875
           "Hello friends"
-      frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 202x90] baseline: 34.296875
+      frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 202x90] baseline: 35.296875
       TextNode <#text>
       BlockContainer <div.ib> at (114,11) content-size 202x90 inline-block [BFC] children: not-inline
         BlockContainer <div> at (115,12) content-size 200x17 children: inline

diff --git 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
@@ -1,9 +1,9 @@
 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 780x59 children: inline
-      frag 0 from TextNode start: 0, length: 13, rect: [10,31 103.140625x17] baseline: 13.296875
+      frag 0 from TextNode start: 0, length: 13, rect: [10,32 103.140625x17] baseline: 13.296875
           "Hello friends"
-      frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 39.234375x57] baseline: 34.296875
+      frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 39.234375x57] baseline: 35.296875
       TextNode <#text>
       BlockContainer <div.ib> at (114,11) content-size 39.234375x57 inline-block [BFC] children: not-inline
         BlockContainer <div> at (115,12) content-size 37.234375x17 children: inline

diff --git 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,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (1,1) content-size 798x121 [BFC] children: inline
-    frag 0 from BlockContainer start: 0, length: 0, rect: [2,2 168.96875x119] baseline: 15.296875
+    frag 0 from BlockContainer start: 0, length: 0, rect: [2,2 168.96875x119] baseline: 16.296875
     BlockContainer <body> at (2,2) content-size 168.96875x119 inline-block [BFC] children: not-inline
       BlockContainer <div.hmm> at (3,3) content-size 166.96875x17 children: inline
         frag 0 from TextNode start: 0, length: 21, rect: [3,3 166.96875x17] baseline: 13.296875

diff --git a/Tests/LibWeb/Layout/expected/box-sizing-border-box-for-definite-sizes-without-layout.txt b/Tests/LibWeb/Layout/expected/box-sizing-border-box-for-definite-sizes-without-layout.txt
@@ -1,16 +1,16 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x67 [BFC] children: not-inline
-    BlockContainer <body> at (8,8) content-size 784x51 children: inline
-      frag 0 from Box start: 0, length: 0, rect: [28,39 49.71875x0] baseline: 6
-      Box <div.button> at (28,39) content-size 49.71875x0 flex-container(row) [FFC] children: not-inline
-        BlockContainer <(anonymous)> at (28,28) content-size 49.71875x22 flex-item [BFC] children: inline
-          frag 0 from TextNode start: 0, length: 5, rect: [28,28 49.71875x22] baseline: 17
+  BlockContainer <html> at (0,0) content-size 800x56 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x40 children: inline
+      frag 0 from Box start: 0, length: 0, rect: [28,28 49.71875x0] baseline: 26
+      Box <div.button> at (28,28) content-size 49.71875x0 flex-container(row) [FFC] children: not-inline
+        BlockContainer <(anonymous)> at (28,17) content-size 49.71875x22 flex-item [BFC] children: inline
+          frag 0 from TextNode start: 0, length: 5, rect: [28,17 49.71875x22] baseline: 17
               "Hello"
           TextNode <#text>
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
-  PaintableWithLines (BlockContainer<HTML>) [0,0 800x67]
-    PaintableWithLines (BlockContainer<BODY>) [8,8 784x51]
-      PaintableBox (Box<DIV>.button) [8,19 89.71875x40]
-        PaintableWithLines (BlockContainer(anonymous)) [28,28 49.71875x22]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x56]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x40]
+      PaintableBox (Box<DIV>.button) [8,8 89.71875x40]
+        PaintableWithLines (BlockContainer(anonymous)) [28,17 49.71875x22]
           TextPaintable (TextNode<#text>)
diff --git a/Tests/LibWeb/Layout/expected/css-line-height-zero.txt b/Tests/LibWeb/Layout/expected/css-line-height-zero.txt
@@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x37 [BFC] children: not-inline
     BlockContainer <body> at (8,8) content-size 784x21 children: inline
-      frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 191.875x19] baseline: 13.296875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 191.875x19] baseline: 14.296875
       BlockContainer <input> at (9,9) content-size 191.875x19 inline-block [BFC] children: not-inline
         Box <div> at (11,10) content-size 187.875x17 flex-container(row) [FFC] children: not-inline
           BlockContainer <div> at (11,10) content-size 187.875x17 flex-item [BFC] children: inline

diff --git a/Tests/LibWeb/Layout/expected/flex/inline-flex-baseline-of-child.txt b/Tests/LibWeb/Layout/expected/flex/inline-flex-baseline-of-child.txt
@@ -0,0 +1,39 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x106 [BFC] children: not-inline
+    BlockContainer <body> at (10,10) content-size 780x88 children: not-inline
+      BlockContainer <div> at (11,11) content-size 778x86 children: inline
+        frag 0 from Box start: 0, length: 0, rect: [12,32 180x64] baseline: 14.296875
+        frag 1 from Box start: 0, length: 0, rect: [194,32 180x64] baseline: 34.296875
+        frag 2 from Box start: 0, length: 0, rect: [376,32 180x64] baseline: 14.296875
+        Box <span> at (12,32) content-size 180x64 flex-container(row) [FFC] children: not-inline
+          BlockContainer <(anonymous)> at (12,32) content-size 6.34375x64 flex-item [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 1, rect: [12,32 6.34375x17] baseline: 13.296875
+                "1"
+            TextNode <#text>
+        Box <span> at (194,32) content-size 180x64 flex-container(row) [FFC] children: not-inline
+          BlockContainer <(anonymous)> at (194,32) content-size 8.8125x64 flex-item [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 1, rect: [194,32 8.8125x17] baseline: 13.296875
+                "2"
+            TextNode <#text>
+        Box <span> at (376,32) content-size 180x64 flex-container(row) [FFC] children: not-inline
+          BlockContainer <(anonymous)> at (376,32) content-size 9.09375x64 flex-item [BFC] children: inline
+            frag 0 from TextNode start: 0, length: 1, rect: [376,32 9.09375x17] baseline: 13.296875
+                "3"
+            TextNode <#text>
+      BlockContainer <(anonymous)> at (10,98) content-size 780x0 children: inline
+        TextNode <#text>
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x108]
+    PaintableWithLines (BlockContainer<BODY>) [9,9 782x90]
+      PaintableWithLines (BlockContainer<DIV>) [10,10 780x88]
+        PaintableBox (Box<SPAN>) [11,31 182x66]
+          PaintableWithLines (BlockContainer(anonymous)) [12,32 6.34375x64]
+            TextPaintable (TextNode<#text>)
+        PaintableBox (Box<SPAN>) [193,31 182x66]
+          PaintableWithLines (BlockContainer(anonymous)) [194,32 8.8125x64]
+            TextPaintable (TextNode<#text>)
+        PaintableBox (Box<SPAN>) [375,31 182x66]
+          PaintableWithLines (BlockContainer(anonymous)) [376,32 9.09375x64]
+            TextPaintable (TextNode<#text>)
+      PaintableWithLines (BlockContainer(anonymous)) [10,98 780x0]
diff --git a/Tests/LibWeb/Layout/expected/flex/inline-flex-early-resolution-of-percentage-height.txt b/Tests/LibWeb/Layout/expected/flex/inline-flex-early-resolution-of-percentage-height.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x216 [BFC] children: inline
-    frag 0 from Box start: 0, length: 0, rect: [8,8 200x200] baseline: 13.296875
+    frag 0 from Box start: 0, length: 0, rect: [8,8 200x200] baseline: 21.296875
     Box <body> at (8,8) content-size 200x200 flex-container(row) [FFC] children: not-inline
       BlockContainer <div> at (8,8) content-size 200x200 flex-item [BFC] children: inline
         frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.84375x17] baseline: 13.296875

diff --git a/Tests/LibWeb/Layout/expected/flex/inline-flex-with-main-axis-margin-on-flex-container.txt b/Tests/LibWeb/Layout/expected/flex/inline-flex-with-main-axis-margin-on-flex-container.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (1,1) content-size 500x37 [BFC] children: inline
-    frag 0 from Box start: 0, length: 0, rect: [10,10 162.40625x19] baseline: 15.296875
+    frag 0 from Box start: 0, length: 0, rect: [10,10 162.40625x19] baseline: 24.296875
     Box <body> at (10,10) content-size 162.40625x19 flex-container(row) [FFC] children: not-inline
       BlockContainer <div> at (11,11) content-size 160.40625x17 flex-item [BFC] children: inline
         frag 0 from TextNode start: 0, length: 20, rect: [11,11 160.40625x17] baseline: 13.296875

diff --git a/Tests/LibWeb/Layout/expected/grid/inline-grid-simple.txt b/Tests/LibWeb/Layout/expected/grid/inline-grid-simple.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
   BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: inline
-    frag 0 from Box start: 0, length: 0, rect: [8,8 26.953125x17] baseline: 13.296875
+    frag 0 from Box start: 0, length: 0, rect: [8,8 26.953125x17] baseline: 21.296875
     Box <body> at (8,8) content-size 26.953125x17 [GFC] children: not-inline
       BlockContainer <(anonymous)> at (8,8) content-size 26.953125x17 [BFC] children: inline
         frag 0 from TextNode start: 0, length: 3, rect: [8,8 26.953125x17] baseline: 13.296875