LibWeb: Use separate structure to represent fragments in paintable tree

This is a part of refactoring towards making the paintable tree independent of the layout tree. Now, instead of transferring text fragments from the layout tree to the paintable tree during the layout commit phase, we allocate separate PaintableFragments that contain only the information necessary for painting. Doing this also allows us to get rid LineBoxes, as they are used only during layout.
2025-05-20 15:25:08 +00:00 · 2024-01-12 21:25:05 +01:00 · 2024-01-12 21:25:05 +01:00 · de32b77ceb
commit de32b77ceb
parent 785fa60cca
401 changed files with 2122 additions and 3614 deletions
--- a/Tests/LibWeb/Layout/expected/abspos-box-with-replaced-element.txt
+++ b/Tests/LibWeb/Layout/expected/abspos-box-with-replaced-element.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 500x100 positioned [BFC] children: not-inline
      BlockContainer <div.image-container> 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] baseline: 28.46875
          frag 0 from ImageBox start: 0, length: 0, rect: [262,12 248x26.46875]
        ImageBox <img> at (262,12) content-size 248x26.46875 children: not-inline
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
--- a/Tests/LibWeb/Layout/expected/abspos-flex-container-with-auto-height.txt
+++ b/Tests/LibWeb/Layout/expected/abspos-flex-container-with-auto-height.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
    Box <body> at (9,9) content-size 512.859375x19 positioned flex-container(column) [FFC] children: not-inline
      BlockContainer <div> at (10,10) content-size 510.859375x17 flex-item [BFC] children: inline
-        line 0 width: 510.859375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 60, rect: [10,10 510.859375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 60, rect: [10,10 510.859375x17]
            "Diese Website nutzt Cookies und vergleichbare Funktionen zur"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/abspos-flexbox-with-auto-height.txt
+++ b/Tests/LibWeb/Layout/expected/abspos-flexbox-with-auto-height.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 780x0 children: not-inline
      Box <nav> at (11,11) content-size 310.453125x19 positioned flex-container(row) [FFC] children: not-inline
        BlockContainer <div.item> at (12,12) content-size 308.453125x17 flex-item [BFC] children: inline
-          line 0 width: 308.453125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 36, rect: [12,12 308.453125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 36, rect: [12,12 308.453125x17]
              "This should have a green background."
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/abspos-with-percentage-insets.txt
+++ b/Tests/LibWeb/Layout/expected/abspos-with-percentage-insets.txt
@ -2,13 +2,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 500x400 positioned [BFC] children: inline
      BlockContainer <div.one> at (311,211) content-size 28.6875x17 positioned [BFC] children: inline
-        line 0 width: 28.6875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [311,211 28.6875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [311,211 28.6875x17]
            "one"
        TextNode <#text>
      BlockContainer <div.two> at (330.5625,352) content-size 28.4375x17 positioned [BFC] children: inline
-        line 0 width: 28.4375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [330.5625,352 28.4375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [330.5625,352 28.4375x17]
            "two"
        TextNode <#text>
      TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/acid1.txt
+++ b/Tests/LibWeb/Layout/expected/acid1.txt
@ -8,8 +8,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <dl> at (25,25) content-size 470x0 children: inline
        TextNode <#text>
        BlockContainer <dt> at (40,40) content-size 49.984375x280 floating [BFC] children: inline
-          line 0 width: 28.3125, height: 10, bottom: 10, baseline: 8
+          frag 0 from TextNode start: 0, length: 6, rect: [40,40 28.3125x10] baseline: 8
            frag 0 from TextNode start: 0, length: 6, rect: [40,40 28.3125x10]
              "toggle"
          TextNode <#text>
        TextNode <#text>
@ -19,8 +18,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
          BlockContainer <ul> at (135,45) content-size 340x0 children: inline
            TextNode <#text>
            BlockContainer <li> at (150,60) content-size 50x90 floating [BFC] children: inline
-              line 0 width: 37.875, height: 10, bottom: 10, baseline: 8
+              frag 0 from TextNode start: 0, length: 7, rect: [150,60 37.875x10] baseline: 8
                frag 0 from TextNode start: 0, length: 7, rect: [150,60 37.875x10]
                  "the way"
              TextNode <#text>
            TextNode <#text>
@ -28,8 +26,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
              BlockContainer <(anonymous)> at (235,55) content-size 139.96875x0 children: inline
                TextNode <#text>
              BlockContainer <p> at (235,55) content-size 139.96875x10 children: inline
-                line 0 width: 74.3125, height: 10, bottom: 10, baseline: 8
+                frag 0 from TextNode start: 0, length: 14, rect: [235,55 74.3125x10] baseline: 8
                  frag 0 from TextNode start: 0, length: 14, rect: [235,55 74.3125x10]
                    "the world ends"
                TextNode <#text>
              BlockContainer <(anonymous)> at (235,65) content-size 139.96875x0 children: inline
@ -39,18 +36,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                  TextNode <#text>
                  TextNode <#text>
              BlockContainer <p> at (235,65) content-size 139.96875x19 children: inline
-                line 0 width: 39.484375, height: 19, bottom: 19, baseline: 12.5
+                frag 0 from TextNode start: 1, length: 5, rect: [235,65 27.484375x19] baseline: 12.5
                  frag 0 from TextNode start: 1, length: 5, rect: [235,65 27.484375x19]
                    "bang "
-                  frag 1 from RadioButton start: 0, length: 0, rect: [262,65 12x12]
+                frag 1 from RadioButton start: 0, length: 0, rect: [262,65 12x12] baseline: 12
                TextNode <#text>
                RadioButton <input> at (262,65) content-size 12x12 inline-block children: not-inline
                TextNode <#text>
              BlockContainer <p> at (235,84) content-size 139.96875x19 children: inline
-                line 0 width: 57.15625, height: 19, bottom: 19, baseline: 12.5
+                frag 0 from TextNode start: 1, length: 8, rect: [235,84 45.15625x19] baseline: 12.5
                  frag 0 from TextNode start: 1, length: 8, rect: [235,84 45.15625x19]
                    "whimper "
-                  frag 1 from RadioButton start: 0, length: 0, rect: [280,84 12x12]
+                frag 1 from RadioButton start: 0, length: 0, rect: [280,84 12x12] baseline: 12
                TextNode <#text>
                RadioButton <input> at (280,84) content-size 12x12 inline-block children: not-inline
                TextNode <#text>
@ -58,17 +53,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
                TextNode <#text>
            TextNode <#text>
            BlockContainer <li> at (409.96875,60) content-size 50x90 floating [BFC] children: inline
-              line 0 width: 31.578125, height: 10, bottom: 10, baseline: 8
+              frag 0 from TextNode start: 0, length: 6, rect: [409.96875,60 31.578125x10] baseline: 8
                frag 0 from TextNode start: 0, length: 6, rect: [409.96875,60 31.578125x10]
                  "i grow"
-              line 1 width: 14.03125, height: 10, bottom: 20, baseline: 8
+              frag 1 from TextNode start: 7, length: 3, rect: [409.96875,70 14.03125x10] baseline: 8
                frag 0 from TextNode start: 7, length: 3, rect: [409.96875,70 14.03125x10]
                  "old"
              TextNode <#text>
            TextNode <#text>
            BlockContainer <li#baz> at (145,185) content-size 100x100 floating [BFC] children: inline
-              line 0 width: 29.421875, height: 10, bottom: 10, baseline: 8
+              frag 0 from TextNode start: 0, length: 6, rect: [145,185 29.421875x10] baseline: 8
                frag 0 from TextNode start: 0, length: 6, rect: [145,185 29.421875x10]
                  "pluot?"
              TextNode <#text>
            TextNode <#text>
@ -78,22 +70,18 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
              BlockContainer <(anonymous)> at (280,195) content-size 50x0 children: inline
                TextNode <#text>
              BlockContainer <address> at (280,195) content-size 50x20 children: inline
-                line 0 width: 17.28125, height: 10, bottom: 10, baseline: 8
+                frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.28125x10] baseline: 8
                  frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.28125x10]
                    "bar"
-                line 1 width: 30.21875, height: 10, bottom: 20, baseline: 8
+                frag 1 from TextNode start: 4, length: 6, rect: [280,205 30.21875x10] baseline: 8
                  frag 0 from TextNode start: 4, length: 6, rect: [280,205 30.21875x10]
                    "maids,"
                TextNode <#text>
              BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline
                TextNode <#text>
            TextNode <#text>
            BlockContainer <h1> at (365,185) content-size 100x100 floating [BFC] children: inline
-              line 0 width: 56.421875, height: 10, bottom: 10, baseline: 8
+              frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.421875x10] baseline: 8
                frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.421875x10]
                  "sing to me,"
-              line 1 width: 65.4375, height: 10, bottom: 20, baseline: 8
+              frag 1 from TextNode start: 12, length: 12, rect: [365,195 65.4375x10] baseline: 8
                frag 0 from TextNode start: 12, length: 12, rect: [365,195 65.4375x10]
                  "erbarme dich"
              TextNode <#text>
            TextNode <#text>
@ -101,28 +89,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline
        TextNode <#text>
      BlockContainer <p> at (20,335) content-size 480x65 children: inline
-        line 0 width: 473.625, height: 13, bottom: 13, baseline: 9.5
+        frag 0 from TextNode start: 1, length: 90, rect: [20,335 473.625x13] baseline: 9.5
          frag 0 from TextNode start: 1, length: 90, rect: [20,335 473.625x13]
            "This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1"
-        line 1 width: 396.96875, height: 13, bottom: 26, baseline: 9.5
+        frag 1 from TextNode start: 92, length: 74, rect: [20,348 396.96875x13] baseline: 9.5
          frag 0 from TextNode start: 92, length: 74, rect: [20,348 396.96875x13]
            "agents should be able to render the document elements above this paragraph"
-        line 2 width: 470.578125, height: 13, bottom: 39, baseline: 9.5
+        frag 2 from TextNode start: 167, length: 43, rect: [20,361 207.890625x13] baseline: 9.5
          frag 0 from TextNode start: 167, length: 43, rect: [20,361 207.890625x13]
            "indistinguishably (to the pixel) from this "
-          frag 1 from TextNode start: 0, length: 20, rect: [228,361 103.015625x13]
+        frag 3 from TextNode start: 0, length: 20, rect: [228,361 103.015625x13] baseline: 9.5
            "reference rendering,"
-          frag 2 from TextNode start: 0, length: 31, rect: [331,361 159.671875x13]
+        frag 4 from TextNode start: 0, length: 31, rect: [331,361 159.671875x13] baseline: 9.5
            " (except font rasterization and"
-        line 3 width: 465.015625, height: 13, bottom: 52, baseline: 9.5
+        frag 5 from TextNode start: 32, length: 89, rect: [20,374 465.015625x13] baseline: 9.5
          frag 0 from TextNode start: 32, length: 89, rect: [20,374 465.015625x13]
            "form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings."
-        line 4 width: 408.15625, height: 13, bottom: 65, baseline: 9.5
+        frag 6 from TextNode start: 122, length: 67, rect: [20,387 345.546875x13] baseline: 9.5
          frag 0 from TextNode start: 122, length: 67, rect: [20,387 345.546875x13]
            "Once you have finished evaluating this test, you can return to the "
-          frag 1 from TextNode start: 0, length: 11, rect: [366,387 59.890625x13]
+        frag 7 from TextNode start: 0, length: 11, rect: [366,387 59.890625x13] baseline: 9.5
            "parent page"
-          frag 2 from TextNode start: 0, length: 1, rect: [425,387 2.71875x13]
+        frag 8 from TextNode start: 0, length: 1, rect: [425,387 2.71875x13] baseline: 9.5
            "."
        TextNode <#text>
        InlineNode <a>
--- a/Tests/LibWeb/Layout/expected/anonymous-wrappers-continue-to-inherit-style-after-change.txt
+++ b/Tests/LibWeb/Layout/expected/anonymous-wrappers-continue-to-inherit-style-after-change.txt
@ -2,13 +2,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x89.4375 [BFC] children: not-inline
    BlockContainer <body> at (8,21.4375) content-size 784x73.4375 children: not-inline
      BlockContainer <h1> at (8,21.4375) content-size 784x35 children: inline
-        line 0 width: 105.53125, height: 35, bottom: 35, baseline: 27.09375
+        frag 0 from TextNode start: 0, length: 6, rect: [8,21.4375 105.53125x35] baseline: 27.09375
          frag 0 from TextNode start: 0, length: 6, rect: [8,21.4375 105.53125x35]
            "header"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,77.875) content-size 784x17 children: inline
-        line 0 width: 212.125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 24, rect: [8,77.875 212.125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 24, rect: [8,77.875 212.125x17]
            "anonymously wrapped text"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/aspect-ratio-auto-and-ratio.txt
+++ b/Tests/LibWeb/Layout/expected/aspect-ratio-auto-and-ratio.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x304 children: not-inline
      BlockContainer <div> at (9,9) content-size 200x100 children: not-inline
      BlockContainer <(anonymous)> at (8,110) content-size 784x202 children: inline
-        line 0 width: 202, height: 202, bottom: 202, baseline: 202
+        frag 0 from ImageBox start: 0, length: 0, rect: [9,111 200x200] baseline: 202
          frag 0 from ImageBox start: 0, length: 0, rect: [9,111 200x200]
        ImageBox <img> at (9,111) content-size 200x200 children: not-inline
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/aspect-ratio-auto.txt
+++ b/Tests/LibWeb/Layout/expected/aspect-ratio-auto.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x204 children: not-inline
      BlockContainer <div> at (9,9) content-size 200x0 children: not-inline
      BlockContainer <(anonymous)> at (8,10) content-size 784x202 children: inline
-        line 0 width: 202, height: 202, bottom: 202, baseline: 202
+        frag 0 from ImageBox start: 0, length: 0, rect: [9,11 200x200] baseline: 202
          frag 0 from ImageBox start: 0, length: 0, rect: [9,11 200x200]
        ImageBox <img> at (9,11) content-size 200x200 children: not-inline
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/aspect-ratio-ratio.txt
+++ b/Tests/LibWeb/Layout/expected/aspect-ratio-ratio.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x204 children: not-inline
      BlockContainer <div> at (9,9) content-size 200x100 children: not-inline
      BlockContainer <(anonymous)> at (8,110) content-size 784x102 children: inline
-        line 0 width: 202, height: 102, bottom: 102, baseline: 102
+        frag 0 from ImageBox start: 0, length: 0, rect: [9,111 200x100] baseline: 102
          frag 0 from ImageBox start: 0, length: 0, rect: [9,111 200x100]
        ImageBox <img> at (9,111) content-size 200x100 children: not-inline
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/abspos-grid-with-definite-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/abspos-grid-with-definite-width.txt
@ -3,17 +3,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 780x0 children: not-inline
      Box <div.box> at (1,11) content-size 200x68 positioned [GFC] children: not-inline
        BlockContainer <(anonymous)> at (1,11) content-size 200x68 [BFC] children: inline
-          line 0 width: 181.78125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 21, rect: [1,11 181.78125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 21, rect: [1,11 181.78125x17]
              "Giveaways in Channels"
-          line 1 width: 149.4375, height: 17, bottom: 34, baseline: 13.296875
+          frag 1 from TextNode start: 22, length: 16, rect: [1,28 149.4375x17] baseline: 13.296875
            frag 0 from TextNode start: 22, length: 16, rect: [1,28 149.4375x17]
              "and Free Premium"
-          line 2 width: 181.78125, height: 17, bottom: 51, baseline: 13.296875
+          frag 2 from TextNode start: 39, length: 21, rect: [1,45 181.78125x17] baseline: 13.296875
            frag 0 from TextNode start: 39, length: 21, rect: [1,45 181.78125x17]
              "Giveaways in Channels"
-          line 3 width: 149.4375, height: 17, bottom: 68, baseline: 13.296875
+          frag 3 from TextNode start: 61, length: 16, rect: [1,62 149.4375x17] baseline: 13.296875
            frag 0 from TextNode start: 61, length: 16, rect: [1,62 149.4375x17]
              "and Free Premium"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/atomic-inline-with-percentage-vertical-align.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/atomic-inline-with-percentage-vertical-align.txt
@ -1,10 +1,8 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x62.59375 [BFC] children: not-inline
    BlockContainer <body> at (2,2) content-size 796x60.59375 children: inline
-      line 0 width: 34, height: 28.59375, bottom: 28.59375, baseline: 28.59375
+      frag 0 from BlockContainer start: 0, length: 0, rect: [4,3 30x30] baseline: 32
-        frag 0 from BlockContainer start: 0, length: 0, rect: [4,3 30x30]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [3,35 30x30] baseline: 32
      line 1 width: 32, height: 28.59375, bottom: 60.59375, baseline: 28.59375
        frag 0 from BlockContainer start: 0, length: 0, rect: [3,35 30x30]
      BlockContainer <div.clump> at (4,3) content-size 30x30 inline-block [BFC] children: not-inline
      BreakNode <br>
      BlockContainer <div.clump> at (3,35) content-size 30x30 inline-block [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/atomic-inline-with-white-space-nowrap.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/atomic-inline-with-white-space-nowrap.txt
@ -2,10 +2,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 37.15625x17 children: not-inline
      BlockContainer <div> at (8,8) content-size 37.15625x17 children: inline
-        line 0 width: 37.15625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [8,8 27.15625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [8,8 27.15625x17]
            "foo"
-          frag 1 from ImageBox start: 0, length: 0, rect: [35,11 10x10]
+        frag 1 from ImageBox start: 0, length: 0, rect: [35,11 10x10] baseline: 10
        TextNode <#text>
        ImageBox <img> at (35,11) content-size 10x10 children: not-inline
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/bfc-consider-all-currently-stacked-floats.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/bfc-consider-all-currently-stacked-floats.txt
@ -5,24 +5,20 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
      BlockContainer <div.big-float> at (8,8) content-size 100x100 floating [BFC] children: not-inline
      BlockContainer <div.xxx> at (108,8) content-size 29.109375x17 floating [BFC] children: inline
-        line 0 width: 29.109375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17]
            "xxx"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,8) content-size 784x17 children: inline
-        line 0 width: 27.640625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 1, length: 3, rect: [137,8 27.640625x17] baseline: 13.296875
          frag 0 from TextNode start: 1, length: 3, rect: [137,8 27.640625x17]
            "bar"
        TextNode <#text>
        TextNode <#text>
      BlockContainer <div> at (8,25) content-size 784x17 children: inline
-        line 0 width: 27.203125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 1, length: 3, rect: [130,25 27.203125x17] baseline: 13.296875
          frag 0 from TextNode start: 1, length: 3, rect: [130,25 27.203125x17]
            "baz"
        TextNode <#text>
        BlockContainer <div.yyy> at (108,25) content-size 21.515625x17 floating [BFC] children: inline
-          line 0 width: 21.515625, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 3, rect: [108,25 21.515625x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 3, rect: [108,25 21.515625x17]
              "yyy"
          TextNode <#text>
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-level-floating-box-with-clearance.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-level-floating-box-with-clearance.txt
@ -3,18 +3,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 600x960 children: not-inline
      BlockContainer <div.normal> at (18,18) content-size 300x300 children: not-inline
      BlockContainer <div#top> at (8,328) content-size 100x100 floating [BFC] children: inline
-        line 0 width: 26.640625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [8,328 26.640625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [8,328 26.640625x17]
            "top"
        TextNode <#text>
      BlockContainer <div#left> at (8,428) content-size 100x100 floating [BFC] children: inline
-        line 0 width: 26.25, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 4, rect: [8,428 26.25x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 4, rect: [8,428 26.25x17]
            "left"
        TextNode <#text>
      BlockContainer <div#right> at (108,428) content-size 100x100 floating [BFC] children: inline
-        line 0 width: 37.109375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [108,428 37.109375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [108,428 37.109375x17]
            "right"
        TextNode <#text>
      BlockContainer <div.normal> at (18,338) content-size 300x300 children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-with-fit-content-width-constraints.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-with-fit-content-width-constraints.txt
@ -2,13 +2,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x56 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x38 children: not-inline
      BlockContainer <div.box> at (11,11) content-size 138.28125x17 children: inline
-        line 0 width: 138.28125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 18, rect: [11,11 138.28125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 18, rect: [11,11 138.28125x17]
            "Well hello friends"
        TextNode <#text>
      BlockContainer <div.box2> at (11,30) content-size 138.28125x17 children: inline
-        line 0 width: 138.28125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 18, rect: [11,30 138.28125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 18, rect: [11,30 138.28125x17]
            "Well hello friends"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,48) content-size 780x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-with-fit-content-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-with-fit-content-width.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x37 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x19 children: not-inline
      BlockContainer <div.box> at (11,11) content-size 138.28125x17 children: inline
-        line 0 width: 138.28125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 18, rect: [11,11 138.28125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 18, rect: [11,11 138.28125x17]
            "Well hello friends"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,29) content-size 780x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-with-hidden-overflow-after-float.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-with-hidden-overflow-after-float.txt
@ -11,16 +11,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
        BlockContainer <div> at (108,8) content-size 684x0 children: inline
          TextNode <#text>
          BlockContainer <div.a> at (108,8) content-size 14.265625x17 floating [BFC] children: inline
-            line 0 width: 14.265625, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 1, rect: [108,8 14.265625x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 1, rect: [108,8 14.265625x17]
                "A"
            TextNode <#text>
          TextNode <#text>
        BlockContainer <(anonymous)> at (108,8) content-size 684x0 children: inline
          TextNode <#text>
        BlockContainer <div.b> at (122.265625,8) content-size 669.734375x17 [BFC] children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [122.265625,8 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [122.265625,8 9.34375x17]
              "B"
          TextNode <#text>
        BlockContainer <(anonymous)> at (108,25) content-size 684x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-with-hidden-overflow-after-sibling-float.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-with-hidden-overflow-after-sibling-float.txt
@ -10,15 +10,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
            BlockContainer <(anonymous)> at (8,8) content-size 57.0625x0 children: inline
              TextNode <#text>
            BlockContainer <div.a4> at (8,8) content-size 57.0625x17 children: inline
-              line 0 width: 57.0625, height: 17, bottom: 17, baseline: 13.296875
+              frag 0 from TextNode start: 0, length: 4, rect: [8,8 57.0625x17] baseline: 13.296875
                frag 0 from TextNode start: 0, length: 4, rect: [8,8 57.0625x17]
                  "AAAA"
              TextNode <#text>
            BlockContainer <(anonymous)> at (8,25) content-size 57.0625x0 children: inline
              TextNode <#text>
            BlockContainer <div> at (8,25) content-size 57.0625x17 children: inline
-              line 0 width: 14.265625, height: 17, bottom: 17, baseline: 13.296875
+              frag 0 from TextNode start: 0, length: 1, rect: [8,25 14.265625x17] baseline: 13.296875
                frag 0 from TextNode start: 0, length: 1, rect: [8,25 14.265625x17]
                  "A"
              TextNode <#text>
            BlockContainer <(anonymous)> at (8,42) content-size 57.0625x0 children: inline
@ -30,15 +28,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
          BlockContainer <(anonymous)> at (108,8) content-size 684x0 children: inline
            TextNode <#text>
          BlockContainer <div> at (108,8) content-size 684x17 children: inline
-            line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 1, rect: [108,8 9.34375x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 1, rect: [108,8 9.34375x17]
                "B"
            TextNode <#text>
          BlockContainer <(anonymous)> at (108,25) content-size 684x0 children: inline
            TextNode <#text>
          BlockContainer <div.c> at (108,25) content-size 684x17 [BFC] children: inline
-            line 0 width: 10.3125, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 1, rect: [108,25 10.3125x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 1, rect: [108,25 10.3125x17]
                "C"
            TextNode <#text>
          BlockContainer <(anonymous)> at (108,42) content-size 684x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-with-max-content-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-with-max-content-width.txt
@ -2,22 +2,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x75 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x57 children: not-inline
      BlockContainer <div.foo> at (11,11) content-size 150.21875x17 children: inline
-        line 0 width: 150.21875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 18, rect: [11,11 150.21875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 18, rect: [11,11 150.21875x17]
            "width: max-content"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,29) content-size 780x0 children: inline
        TextNode <#text>
      BlockContainer <div.bar> at (11,30) content-size 187.953125x17 children: inline
-        line 0 width: 187.953125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 22, rect: [11,30 187.953125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 22, rect: [11,30 187.953125x17]
            "max-width: max-content"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,48) content-size 780x0 children: inline
        TextNode <#text>
      BlockContainer <div.baz> at (11,49) content-size 183.078125x17 children: inline
-        line 0 width: 183.078125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 22, rect: [11,49 183.078125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 22, rect: [11,49 183.078125x17]
            "min-width: max-content"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,67) content-size 780x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-with-min-content-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-with-min-content-width.txt
@ -2,31 +2,25 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x126 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x108 children: not-inline
      BlockContainer <div.foo> at (11,11) content-size 93.765625x34 children: inline
-        line 0 width: 43.578125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 6, rect: [11,11 43.578125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 6, rect: [11,11 43.578125x17]
            "width:"
-        line 1 width: 93.765625, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 7, length: 11, rect: [11,28 93.765625x17] baseline: 13.296875
          frag 0 from TextNode start: 7, length: 11, rect: [11,28 93.765625x17]
            "min-content"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,46) content-size 780x0 children: inline
        TextNode <#text>
      BlockContainer <div.bar> at (11,47) content-size 93.765625x34 children: inline
-        line 0 width: 81.3125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 10, rect: [11,47 81.3125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 10, rect: [11,47 81.3125x17]
            "max-width:"
-        line 1 width: 93.765625, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 11, length: 11, rect: [11,64 93.765625x17] baseline: 13.296875
          frag 0 from TextNode start: 11, length: 11, rect: [11,64 93.765625x17]
            "min-content"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,82) content-size 780x0 children: inline
        TextNode <#text>
      BlockContainer <div.baz> at (11,83) content-size 93.765625x34 children: inline
-        line 0 width: 76.4375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 10, rect: [11,83 76.4375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 10, rect: [11,83 76.4375x17]
            "min-width:"
-        line 1 width: 93.765625, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 11, length: 11, rect: [11,100 93.765625x17] baseline: 13.296875
          frag 0 from TextNode start: 11, length: 11, rect: [11,100 93.765625x17]
            "min-content"
        TextNode <#text>
      BlockContainer <(anonymous)> at (10,118) content-size 780x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/block-with-negative-margin-and-no-intruding-floats.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/block-with-negative-margin-and-no-intruding-floats.txt
@ -2,11 +2,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x54 [BFC] children: not-inline
    BlockContainer <body> at (110,10) content-size 300x36 positioned children: not-inline
      BlockContainer <div> at (61,11) content-size 200x34 children: inline
-        line 0 width: 159.859375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 19, rect: [61,11 159.859375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 19, rect: [61,11 159.859375x17]
            "there are no floats"
-        line 1 width: 163.875, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 20, length: 21, rect: [61,28 163.875x17] baseline: 13.296875
          frag 0 from TextNode start: 20, length: 21, rect: [61,28 163.875x17]
            "intruding on this div"
        TextNode <#text>
--- 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,26 +1,22 @@
 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
-      line 0 width: 61.1875, height: 48, bottom: 48, baseline: 34
+      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]
      BlockContainer <div.ib> at (8,8) content-size 61.1875x48 inline-block [BFC] children: inline
-        line 0 width: 61.1875, height: 48, bottom: 48, baseline: 34
+        frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22] baseline: 18
-          frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22]
+        frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17] baseline: 13.296875
          frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17]
            " "
-          frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44]
+        frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 34
        TextNode <#text>
        BlockContainer <div.label> at (9,25) content-size 17.828125x22 inline-block [BFC] children: inline
-          line 0 width: 17.828125, height: 22, bottom: 22, baseline: 17
+          frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22] baseline: 17
            frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22]
              "A"
          TextNode <#text>
        TextNode <#text>
        BlockContainer <button> at (41,10) content-size 23.359375x44 inline-block [BFC] children: not-inline
          BlockContainer <(anonymous)> at (41,10) content-size 23.359375x44 flex-container(column) [FFC] children: not-inline
            BlockContainer <(anonymous)> at (41,10) content-size 23.359375x44 flex-item [BFC] children: inline
-              line 0 width: 23.359375, height: 44, bottom: 44, baseline: 34
+              frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x44] baseline: 34
                frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x44]
                  "B"
              TextNode <#text>
        TextNode <#text>
--- 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,13 +1,11 @@
 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
-      line 0 width: 430, height: 424, bottom: 424, baseline: 420
+      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]
      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
-            line 0 width: 420, height: 420, bottom: 420, baseline: 420
+            frag 0 from ImageBox start: 0, length: 0, rect: [13,10 420x420] baseline: 420
              frag 0 from ImageBox start: 0, length: 0, rect: [13,10 420x420]
            TextNode <#text>
            ImageBox <img> at (13,10) content-size 420x420 children: not-inline
            TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
@ -1,8 +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
-      line 0 width: 76.6875, height: 200, bottom: 200, baseline: 70.296875
+      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]
      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
@ -10,15 +9,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
            BlockContainer <(anonymous)> at (22,29.5) content-size 48.6875x0 children: inline
              TextNode <#text>
            BlockContainer <div.border-black> at (32,39.5) content-size 28.6875x17 children: inline
-              line 0 width: 28.6875, height: 17, bottom: 17, baseline: 13.296875
+              frag 0 from TextNode start: 1, length: 3, rect: [32,39.5 28.6875x17] baseline: 13.296875
                frag 0 from TextNode start: 1, length: 3, rect: [32,39.5 28.6875x17]
                  "one"
              TextNode <#text>
            BlockContainer <(anonymous)> at (22,66.5) content-size 48.6875x0 children: inline
              TextNode <#text>
            BlockContainer <div.border-black> at (32,76.5) content-size 28.6875x100 children: inline
-              line 0 width: 28.4375, height: 17, bottom: 17, baseline: 13.296875
+              frag 0 from TextNode start: 1, length: 3, rect: [32,76.5 28.4375x17] baseline: 13.296875
                frag 0 from TextNode start: 1, length: 3, rect: [32,76.5 28.4375x17]
                  "two"
              TextNode <#text>
            BlockContainer <(anonymous)> at (22,186.5) content-size 48.6875x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/button-width.txt
@ -4,15 +4,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <button.btn.fixed-width> at (13,10) content-size 190x17 children: not-inline
        BlockContainer <(anonymous)> at (13,10) content-size 190x17 flex-container(column) [FFC] children: not-inline
          BlockContainer <(anonymous)> at (13,10) content-size 190x17 flex-item [BFC] children: inline
-            line 0 width: 94.921875, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 11, rect: [61,10 94.921875x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 11, rect: [61,10 94.921875x17]
                "200px width"
            TextNode <#text>
      BlockContainer <button.btn> at (13,31) content-size 324.671875x17 children: not-inline
        BlockContainer <(anonymous)> at (13,31) content-size 324.671875x17 flex-container(column) [FFC] children: not-inline
          BlockContainer <(anonymous)> at (13,31) content-size 324.671875x17 flex-item [BFC] children: inline
-            line 0 width: 324.671875, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 39, rect: [13,31 324.671875x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 39, rect: [13,31 324.671875x17]
                "auto width should behave as fit-content"
            TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/button-with-abspos-pseudo-element.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/button-with-abspos-pseudo-element.txt
@ -1,8 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x58 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x42 children: inline
-      line 0 width: 42, height: 42, bottom: 42, baseline: 42
+      frag 0 from BlockContainer start: 0, length: 0, rect: [29,29 0x0] baseline: 42
        frag 0 from BlockContainer start: 0, length: 0, rect: [29,29 0x0]
      BlockContainer <button> at (29,29) content-size 0x0 positioned inline-block [BFC] children: not-inline
        BlockContainer <(anonymous)> at (29,29) content-size 0x0 flex-container(column) [FFC] children: not-inline
          BlockContainer <(anonymous)> at (29,29) content-size 0x0 [BFC] children: not-inline
--- 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,13 +1,11 @@
 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
-      line 0 width: 424.640625, height: 59, bottom: 59, baseline: 42.484375
+      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]
      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
-            line 0 width: 414.640625, height: 55, bottom: 55, baseline: 42.484375
+            frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x55] baseline: 42.484375
              frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x55]
                "See more games"
            TextNode <#text>
        BlockContainer <(anonymous)> at (9,9) content-size 422.640625x57 positioned [BFC] children: inline
--- 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,15 +1,13 @@
 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
-      line 0 width: 424.640625, height: 59, bottom: 59, baseline: 42.484375
+      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]
      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>
        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
-            line 0 width: 414.640625, height: 55, bottom: 55, baseline: 42.484375
+            frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x55] baseline: 42.484375
              frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x55]
                "See more games"
            TextNode <#text>
--- 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,18 +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
-      line 0 width: 61.1875, height: 48, bottom: 48, baseline: 34
+      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]
      BlockContainer <div.ib> at (8,8) content-size 61.1875x48 inline-block [BFC] children: inline
-        line 0 width: 61.1875, height: 48, bottom: 48, baseline: 34
+        frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22] baseline: 18
-          frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22]
+        frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17] baseline: 13.296875
          frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17]
            " "
-          frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44]
+        frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 34
        TextNode <#text>
        BlockContainer <div.label> at (9,25) content-size 17.828125x22 inline-block [BFC] children: inline
-          line 0 width: 17.828125, height: 22, bottom: 22, baseline: 17
+          frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22] baseline: 17
            frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22]
              "A"
          TextNode <#text>
        TextNode <#text>
@ -22,8 +19,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
              BlockContainer <(anonymous)> at (41,10) content-size 23.359375x0 children: inline
                TextNode <#text>
              BlockContainer <div> at (41,10) content-size 23.359375x44 children: inline
-                line 0 width: 23.359375, height: 44, bottom: 44, baseline: 34
+                frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x44] baseline: 34
                  frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x44]
                    "B"
                TextNode <#text>
              BlockContainer <(anonymous)> at (41,54) content-size 23.359375x0 children: inline
--- 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,13 +1,11 @@
 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
-      line 0 width: 59.921875, height: 21, bottom: 21, baseline: 13.296875
+      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]
      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
-            line 0 width: 49.921875, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 5, rect: [13,10 49.921875x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 5, rect: [13,10 49.921875x17]
                "A B C"
            TextNode <#text>
--- 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,13 +1,11 @@
 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
-      line 0 width: 121.65625, height: 56, bottom: 56, baseline: 40.390625
+      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]
      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
-            line 0 width: 111.65625, height: 52, bottom: 52, baseline: 40.390625
+            frag 0 from TextNode start: 0, length: 4, rect: [13,10 111.65625x52] baseline: 40.390625
              frag 0 from TextNode start: 0, length: 4, rect: [13,10 111.65625x52]
                "Test"
            TextNode <#text>
--- 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,13 +1,11 @@
 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
-      line 0 width: 47.21875, height: 21, bottom: 21, baseline: 13.296875
+      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]
      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
-            line 0 width: 37.21875, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 4, rect: [13,10 37.21875x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 4, rect: [13,10 37.21875x17]
                "Test"
            TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/clear-both-from-inline-formatting-context.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/clear-both-from-inline-formatting-context.txt
@ -4,20 +4,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div> at (8,8) content-size 784x0 children: inline
        TextNode <#text>
        BlockContainer <h1.left> at (8,29.4375) content-size 28.53125x35 floating [BFC] children: inline
-          line 0 width: 28.53125, height: 35, bottom: 35, baseline: 27.09375
+          frag 0 from TextNode start: 0, length: 1, rect: [8,29.4375 28.53125x35] baseline: 27.09375
            frag 0 from TextNode start: 0, length: 1, rect: [8,29.4375 28.53125x35]
              "A"
          TextNode <#text>
        TextNode <#text>
        BlockContainer <h1.right> at (773.3125,29.4375) content-size 18.6875x35 floating [BFC] children: inline
-          line 0 width: 18.6875, height: 35, bottom: 35, baseline: 27.09375
+          frag 0 from TextNode start: 0, length: 1, rect: [773.3125,29.4375 18.6875x35] baseline: 27.09375
            frag 0 from TextNode start: 0, length: 1, rect: [773.3125,29.4375 18.6875x35]
              "B"
          TextNode <#text>
        TextNode <#text>
        BlockContainer <div.c> at (8,155.875) content-size 11.5625x17 floating [BFC] children: inline
-          line 0 width: 11.5625, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,155.875 11.5625x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [8,155.875 11.5625x17]
              "X"
          TextNode <#text>
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/clear-both-without-introducing-clearance.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/clear-both-without-introducing-clearance.txt
@ -2,14 +2,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x125 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x109 children: not-inline
      BlockContainer <div.upper> at (8,8) content-size 784x17 children: inline
-        line 0 width: 46.15625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [8,8 46.15625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [8,8 46.15625x17]
            "upper"
        TextNode <#text>
      BlockContainer <div.mystery> at (8,100) content-size 784x0 children: not-inline
      BlockContainer <div.lower> at (8,100) content-size 784x17 children: inline
-        line 0 width: 43.359375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [8,100 43.359375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [8,100 43.359375x17]
            "lower"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/columns-33-percent-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/columns-33-percent-width.txt
@ -1,10 +1,9 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x116 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 620x100 children: inline
-      line 0 width: 619.96875, height: 100, bottom: 100, baseline: 100
+      frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 206.65625x100] baseline: 100
-        frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 206.65625x100]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [215,8 206.65625x100] baseline: 100
-        frag 1 from BlockContainer start: 0, length: 0, rect: [215,8 206.65625x100]
+      frag 2 from BlockContainer start: 0, length: 0, rect: [421,8 206.65625x100] baseline: 100
        frag 2 from BlockContainer start: 0, length: 0, rect: [421,8 206.65625x100]
      BlockContainer <div> at (8,8) content-size 206.65625x100 inline-block [BFC] children: not-inline
      BlockContainer <div> at (215,8) content-size 206.65625x100 inline-block [BFC] children: not-inline
      BlockContainer <div> at (421,8) content-size 206.65625x100 inline-block [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/flex-container-should-avoid-overlapping-floats.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/flex-container-should-avoid-overlapping-floats.txt
@ -2,14 +2,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 400x50 children: not-inline
      BlockContainer <div.right> at (370.890625,8) content-size 37.109375x17 floating [BFC] children: inline
-        line 0 width: 37.109375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [370.890625,8 37.109375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [370.890625,8 37.109375x17]
            "right"
        TextNode <#text>
      Box <div.flex> at (8,8) content-size 362.890625x50 flex-container(row) [FFC] children: not-inline
        BlockContainer <div.item> at (8,8) content-size 32.34375x50 flex-item [BFC] children: inline
-          line 0 width: 32.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 4, rect: [8,8 32.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 4, rect: [8,8 32.34375x17]
              "item"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-1.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-1.txt
@ -6,14 +6,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div> at (8,8) content-size 784x0 children: inline
        TextNode <#text>
        BlockContainer <div#lefty> at (8,8) content-size 100x100 floating [BFC] children: inline
-          line 0 width: 10.859375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,8 10.859375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [8,8 10.859375x17]
              "L"
          TextNode <#text>
        TextNode <#text>
        BlockContainer <div#righty> at (742,8) content-size 50x50 floating [BFC] children: inline
-          line 0 width: 13.6875, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [742,8 13.6875x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [742,8 13.6875x17]
              "R"
          TextNode <#text>
        TextNode <#text>
@ -22,14 +20,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div> at (8,8) content-size 784x0 children: inline
        TextNode <#text>
        BlockContainer <div#lefty2> at (108,8) content-size 80x80 floating [BFC] children: inline
-          line 0 width: 19.671875, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 2, rect: [108,8 19.671875x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 2, rect: [108,8 19.671875x17]
              "L2"
          TextNode <#text>
        TextNode <#text>
        BlockContainer <div#righty2> at (712,8) content-size 30x30 floating [BFC] children: inline
-          line 0 width: 22.5, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 2, rect: [712,8 22.5x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 2, rect: [712,8 22.5x17]
              "R2"
          TextNode <#text>
        TextNode <#text>
@ -38,76 +34,55 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div> at (8,8) content-size 784x0 children: inline
        TextNode <#text>
        BlockContainer <div#lefty3> at (188,8) content-size 40x40 floating [BFC] children: inline
-          line 0 width: 19.953125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 2, rect: [188,8 19.953125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 2, rect: [188,8 19.953125x17]
              "L3"
          TextNode <#text>
        TextNode <#text>
        BlockContainer <div#righty3> at (692,8) content-size 20x20 floating [BFC] children: inline
-          line 0 width: 22.78125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 2, rect: [692,8 22.78125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 2, rect: [692,8 22.78125x17]
              "R3"
          TextNode <#text>
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (8,8) content-size 784x323 children: inline
-        line 0 width: 414.5625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 1, length: 47, rect: [228,8 414.5625x17] baseline: 13.296875
          frag 0 from TextNode start: 1, length: 47, rect: [228,8 414.5625x17]
            "lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
-        line 1 width: 414.5625, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 49, length: 47, rect: [228,25 414.5625x17] baseline: 13.296875
          frag 0 from TextNode start: 49, length: 47, rect: [228,25 414.5625x17]
            "lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
-        line 2 width: 466.90625, height: 17, bottom: 51, baseline: 13.296875
+        frag 2 from TextNode start: 97, length: 53, rect: [228,42 466.90625x17] baseline: 13.296875
          frag 0 from TextNode start: 97, length: 53, rect: [228,42 466.90625x17]
            "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 3 width: 573.5, height: 17, bottom: 68, baseline: 13.296875
+        frag 3 from TextNode start: 151, length: 65, rect: [188,59 573.5x17] baseline: 13.296875
          frag 0 from TextNode start: 151, length: 65, rect: [188,59 573.5x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
-        line 4 width: 572.546875, height: 17, bottom: 85, baseline: 13.296875
+        frag 4 from TextNode start: 217, length: 65, rect: [188,76 572.546875x17] baseline: 13.296875
          frag 0 from TextNode start: 217, length: 65, rect: [188,76 572.546875x17]
            "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 5 width: 679.140625, height: 17, bottom: 102, baseline: 13.296875
+        frag 5 from TextNode start: 283, length: 77, rect: [108,93 679.140625x17] baseline: 13.296875
          frag 0 from TextNode start: 283, length: 77, rect: [108,93 679.140625x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
-        line 6 width: 783.828125, height: 17, bottom: 119, baseline: 13.296875
+        frag 6 from TextNode start: 361, length: 89, rect: [8,110 783.828125x17] baseline: 13.296875
          frag 0 from TextNode start: 361, length: 89, rect: [8,110 783.828125x17]
            "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 7 width: 731.484375, height: 17, bottom: 136, baseline: 13.296875
+        frag 7 from TextNode start: 451, length: 83, rect: [8,127 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 451, length: 83, rect: [8,127 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 8 width: 731.484375, height: 17, bottom: 153, baseline: 13.296875
+        frag 8 from TextNode start: 535, length: 83, rect: [8,144 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 535, length: 83, rect: [8,144 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 9 width: 731.484375, height: 17, bottom: 170, baseline: 13.296875
+        frag 9 from TextNode start: 619, length: 83, rect: [8,161 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 619, length: 83, rect: [8,161 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 10 width: 731.484375, height: 17, bottom: 187, baseline: 13.296875
+        frag 10 from TextNode start: 703, length: 83, rect: [8,178 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 703, length: 83, rect: [8,178 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 11 width: 731.484375, height: 17, bottom: 204, baseline: 13.296875
+        frag 11 from TextNode start: 787, length: 83, rect: [8,195 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 787, length: 83, rect: [8,195 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 12 width: 731.484375, height: 17, bottom: 221, baseline: 13.296875
+        frag 12 from TextNode start: 871, length: 83, rect: [8,212 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 871, length: 83, rect: [8,212 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 13 width: 731.484375, height: 17, bottom: 238, baseline: 13.296875
+        frag 13 from TextNode start: 955, length: 83, rect: [8,229 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 955, length: 83, rect: [8,229 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 14 width: 731.484375, height: 17, bottom: 255, baseline: 13.296875
+        frag 14 from TextNode start: 1039, length: 83, rect: [8,246 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 1039, length: 83, rect: [8,246 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 15 width: 731.484375, height: 17, bottom: 272, baseline: 13.296875
+        frag 15 from TextNode start: 1123, length: 83, rect: [8,263 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 1123, length: 83, rect: [8,263 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 16 width: 731.484375, height: 17, bottom: 289, baseline: 13.296875
+        frag 16 from TextNode start: 1207, length: 83, rect: [8,280 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 1207, length: 83, rect: [8,280 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 17 width: 731.484375, height: 17, bottom: 306, baseline: 13.296875
+        frag 17 from TextNode start: 1291, length: 83, rect: [8,297 731.484375x17] baseline: 13.296875
          frag 0 from TextNode start: 1291, length: 83, rect: [8,297 731.484375x17]
            "ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
-        line 18 width: 45.296875, height: 17, bottom: 323, baseline: 13.296875
+        frag 18 from TextNode start: 1375, length: 5, rect: [8,314 45.296875x17] baseline: 13.296875
          frag 0 from TextNode start: 1375, length: 5, rect: [8,314 45.296875x17]
            "ipsum"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,331) content-size 784x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-2.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-2.txt
@ -8,8 +8,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
        TextNode <#text>
        TextNode <#text>
      BlockContainer <div#a> at (8,8) content-size 784x17 children: inline
-        line 0 width: 37.578125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 4, rect: [60,8 37.578125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 4, rect: [60,8 37.578125x17]
            "Text"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-3.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-3.txt
@ -16,8 +16,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
          TextNode <#text>
          TextNode <#text>
        BlockContainer <div#text> at (9,109) content-size 778x17 children: inline
-          line 0 width: 54.796875, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 6, rect: [371,109 54.796875x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 6, rect: [371,109 54.796875x17]
              "foobar"
          TextNode <#text>
        BlockContainer <(anonymous)> at (9,126) content-size 778x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-4.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-4.txt
@ -5,26 +5,22 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 780x0 children: inline
      TextNode <#text>
      BlockContainer <div.left> at (9,9) content-size 50x50 floating [BFC] children: inline
-        line 0 width: 39.21875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [14,9 39.21875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [14,9 39.21875x17]
            "Left1"
        TextNode <#text>
      TextNode <#text>
      BlockContainer <div.right> at (737,9) content-size 50x50 floating [BFC] children: inline
-        line 0 width: 48.3125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 6, rect: [738,9 48.3125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 6, rect: [738,9 48.3125x17]
            "Right1"
        TextNode <#text>
      TextNode <#text>
      BlockContainer <div.left> at (61,9) content-size 50x50 floating [BFC] children: inline
-        line 0 width: 41.6875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [65,9 41.6875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [65,9 41.6875x17]
            "Left2"
        TextNode <#text>
      TextNode <#text>
      BlockContainer <div.right> at (685,9) content-size 50x50 floating [BFC] children: inline
-        line 0 width: 50.78125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 6, rect: [685,9 50.78125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 6, rect: [685,9 50.78125x17]
            "Right2"
        TextNode <#text>
      TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-clear-by-line-break.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-clear-by-line-break.txt
@ -1,15 +1,12 @@
 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 784x34 children: inline
-      line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
+      frag 0 from TextNode start: 0, length: 1, rect: [108,8 6.34375x17] baseline: 13.296875
        frag 0 from TextNode start: 0, length: 1, rect: [108,8 6.34375x17]
          "1"
-      line 1 width: 8.8125, height: 17, bottom: 34, baseline: 13.296875
+      frag 1 from TextNode start: 0, length: 1, rect: [108,25 8.8125x17] baseline: 13.296875
        frag 0 from TextNode start: 0, length: 1, rect: [108,25 8.8125x17]
          "2"
      BlockContainer <span.a> at (8,8) content-size 100x17 floating [BFC] children: inline
-        line 0 width: 14.265625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17]
            "A"
        TextNode <#text>
      InlineNode <span>
@ -18,8 +15,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BreakNode <br>
      TextNode <#text>
      BlockContainer <span.a> at (8,25) content-size 100x17 floating [BFC] children: inline
-        line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 1, rect: [8,25 9.34375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 1, rect: [8,25 9.34375x17]
            "B"
        TextNode <#text>
      InlineNode <span>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-justified-text-in-between.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-justified-text-in-between.txt
@ -1,200 +1,181 @@
 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 (252,10) content-size 538x400 children: inline
-      line 0 width: 228.34375, height: 22, bottom: 22, baseline: 17
+      frag 0 from TextNode start: 1, length: 5, rect: [554,10 63.71875x22] baseline: 17
        frag 0 from TextNode start: 1, length: 5, rect: [554,10 63.71875x22]
          "Lorem"
-        frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.546875x22]
+      frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.546875x22] baseline: 17
          " "
-        frag 2 from TextNode start: 7, length: 5, rect: [630.546875,10 56.625x22]
+      frag 2 from TextNode start: 7, length: 5, rect: [630.546875,10 56.625x22] baseline: 17
          "ipsum"
-        frag 3 from TextNode start: 12, length: 1, rect: [686.546875,10 12.546875x22]
+      frag 3 from TextNode start: 12, length: 1, rect: [686.546875,10 12.546875x22] baseline: 17
          " "
-        frag 4 from TextNode start: 13, length: 5, rect: [699.09375,10 52.046875x22]
+      frag 4 from TextNode start: 13, length: 5, rect: [699.09375,10 52.046875x22] baseline: 17
          "dolor"
-        frag 5 from TextNode start: 18, length: 1, rect: [751.09375,10 12.546875x22]
+      frag 5 from TextNode start: 18, length: 1, rect: [751.09375,10 12.546875x22] baseline: 17
          " "
-        frag 6 from TextNode start: 19, length: 3, rect: [763.640625,10 25.953125x22]
+      frag 6 from TextNode start: 19, length: 3, rect: [763.640625,10 25.953125x22] baseline: 17
          "sit"
-      line 1 width: 183.78125, height: 22, bottom: 44, baseline: 17
+      frag 7 from TextNode start: 23, length: 5, rect: [554,32 52.71875x22] baseline: 17
        frag 0 from TextNode start: 23, length: 5, rect: [554,32 52.71875x22]
          "amet,"
-        frag 1 from TextNode start: 28, length: 1, rect: [607,32 62.21875x22]
+      frag 8 from TextNode start: 28, length: 1, rect: [607,32 62.21875x22] baseline: 17
          " "
-        frag 2 from TextNode start: 29, length: 11, rect: [669.21875,32 121.0625x22]
+      frag 9 from TextNode start: 29, length: 11, rect: [669.21875,32 121.0625x22] baseline: 17
          "consectetur"
-      line 2 width: 140.5625, height: 22, bottom: 66, baseline: 17
+      frag 10 from TextNode start: 41, length: 10, rect: [554,54 94.65625x22] baseline: 17
        frag 0 from TextNode start: 41, length: 10, rect: [554,54 94.65625x22]
          "adipiscing"
-        frag 1 from TextNode start: 51, length: 1, rect: [649,54 105.4375x22]
+      frag 11 from TextNode start: 51, length: 1, rect: [649,54 105.4375x22] baseline: 17
          " "
-        frag 2 from TextNode start: 52, length: 5, rect: [754.4375,54 35.90625x22]
+      frag 12 from TextNode start: 52, length: 5, rect: [754.4375,54 35.90625x22] baseline: 17
          "elit."
-      line 3 width: 145, height: 22, bottom: 88, baseline: 17
+      frag 13 from TextNode start: 58, length: 11, rect: [554,76 123.3125x22] baseline: 17
        frag 0 from TextNode start: 58, length: 11, rect: [554,76 123.3125x22]
          "Suspendisse"
-        frag 1 from TextNode start: 69, length: 1, rect: [677,76 101x22]
+      frag 14 from TextNode start: 69, length: 1, rect: [677,76 101x22] baseline: 17
          " "
-        frag 2 from TextNode start: 70, length: 1, rect: [778,76 11.6875x22]
+      frag 15 from TextNode start: 70, length: 1, rect: [778,76 11.6875x22] baseline: 17
          "a"
-      line 4 width: 196.703125, height: 22, bottom: 110, baseline: 17
+      frag 16 from TextNode start: 72, length: 8, rect: [554,98 82.046875x22] baseline: 17
        frag 0 from TextNode start: 72, length: 8, rect: [554,98 82.046875x22]
          "placerat"
-        frag 1 from TextNode start: 80, length: 1, rect: [636,98 29.640625x22]
+      frag 17 from TextNode start: 80, length: 1, rect: [636,98 29.640625x22] baseline: 17
          " "
-        frag 2 from TextNode start: 81, length: 7, rect: [665.640625,98 73.875x22]
+      frag 18 from TextNode start: 81, length: 7, rect: [665.640625,98 73.875x22] baseline: 17
          "mauris,"
-        frag 3 from TextNode start: 88, length: 1, rect: [739.640625,98 29.640625x22]
+      frag 19 from TextNode start: 88, length: 1, rect: [739.640625,98 29.640625x22] baseline: 17
          " "
-        frag 4 from TextNode start: 89, length: 2, rect: [769.28125,98 20.78125x22]
+      frag 20 from TextNode start: 89, length: 2, rect: [769.28125,98 20.78125x22] baseline: 17
          "ut"
-      line 5 width: 234.6875, height: 22, bottom: 132, baseline: 17
+      frag 21 from TextNode start: 92, length: 9, rect: [554,120 101.28125x22] baseline: 17
        frag 0 from TextNode start: 92, length: 9, rect: [554,120 101.28125x22]
          "elementum"
-        frag 1 from TextNode start: 101, length: 1, rect: [655,120 10.4375x22]
+      frag 22 from TextNode start: 101, length: 1, rect: [655,120 10.4375x22] baseline: 17
          " "
-        frag 2 from TextNode start: 102, length: 3, rect: [665.4375,120 26.390625x22]
+      frag 23 from TextNode start: 102, length: 3, rect: [665.4375,120 26.390625x22] baseline: 17
          "mi."
-        frag 3 from TextNode start: 105, length: 1, rect: [692.4375,120 10.4375x22]
+      frag 24 from TextNode start: 105, length: 1, rect: [692.4375,120 10.4375x22] baseline: 17
          " "
-        frag 4 from TextNode start: 106, length: 5, rect: [702.875,120 56.234375x22]
+      frag 25 from TextNode start: 106, length: 5, rect: [702.875,120 56.234375x22] baseline: 17
          "Morbi"
-        frag 5 from TextNode start: 111, length: 1, rect: [758.875,120 10.4375x22]
+      frag 26 from TextNode start: 111, length: 1, rect: [758.875,120 10.4375x22] baseline: 17
          " "
-        frag 6 from TextNode start: 112, length: 2, rect: [769.3125,120 20.78125x22]
+      frag 27 from TextNode start: 112, length: 2, rect: [769.3125,120 20.78125x22] baseline: 17
          "ut"
-      line 6 width: 201.53125, height: 22, bottom: 154, baseline: 17
+      frag 28 from TextNode start: 115, length: 8, rect: [554,142 78.765625x22] baseline: 17
        frag 0 from TextNode start: 115, length: 8, rect: [554,142 78.765625x22]
          "vehicula"
-        frag 1 from TextNode start: 123, length: 1, rect: [633,142 27.234375x22]
+      frag 29 from TextNode start: 123, length: 1, rect: [633,142 27.234375x22] baseline: 17
          " "
-        frag 2 from TextNode start: 124, length: 6, rect: [660.234375,142 62.9375x22]
+      frag 30 from TextNode start: 124, length: 6, rect: [660.234375,142 62.9375x22] baseline: 17
          "ipsum,"
-        frag 3 from TextNode start: 130, length: 1, rect: [723.234375,142 27.234375x22]
+      frag 31 from TextNode start: 130, length: 1, rect: [723.234375,142 27.234375x22] baseline: 17
          " "
-        frag 4 from TextNode start: 131, length: 4, rect: [750.46875,142 39.828125x22]
+      frag 32 from TextNode start: 131, length: 4, rect: [750.46875,142 39.828125x22] baseline: 17
          "eget"
-      line 7 width: 232.53125, height: 22, bottom: 176, baseline: 17
+      frag 33 from TextNode start: 136, length: 8, rect: [554,164 82.046875x22] baseline: 17
        frag 0 from TextNode start: 136, length: 8, rect: [554,164 82.046875x22]
          "placerat"
-        frag 1 from TextNode start: 144, length: 1, rect: [636,164 11.734375x22]
+      frag 34 from TextNode start: 144, length: 1, rect: [636,164 11.734375x22] baseline: 17
          " "
-        frag 2 from TextNode start: 145, length: 6, rect: [647.734375,164 61.875x22]
+      frag 35 from TextNode start: 145, length: 6, rect: [647.734375,164 61.875x22] baseline: 17
          "augue."
-        frag 3 from TextNode start: 151, length: 1, rect: [709.734375,164 11.734375x22]
+      frag 36 from TextNode start: 151, length: 1, rect: [709.734375,164 11.734375x22] baseline: 17
          " "
-        frag 4 from TextNode start: 152, length: 7, rect: [721.46875,164 68.609375x22]
+      frag 37 from TextNode start: 152, length: 7, rect: [721.46875,164 68.609375x22] baseline: 17
          "Integer"
-      line 8 width: 202.96875, height: 22, bottom: 198, baseline: 17
+      frag 38 from TextNode start: 160, length: 6, rect: [554,186 70.3125x22] baseline: 17
        frag 0 from TextNode start: 160, length: 6, rect: [554,186 70.3125x22]
          "rutrum"
-        frag 1 from TextNode start: 166, length: 1, rect: [624,186 21x22]
+      frag 39 from TextNode start: 166, length: 1, rect: [624,186 21x22] baseline: 17
          " "
-        frag 2 from TextNode start: 167, length: 4, rect: [645,186 35.09375x22]
+      frag 40 from TextNode start: 167, length: 4, rect: [645,186 35.09375x22] baseline: 17
          "nisi"
-        frag 3 from TextNode start: 171, length: 1, rect: [680,186 21x22]
+      frag 41 from TextNode start: 171, length: 1, rect: [680,186 21x22] baseline: 17
          " "
-        frag 4 from TextNode start: 172, length: 4, rect: [701,186 39.828125x22]
+      frag 42 from TextNode start: 172, length: 4, rect: [701,186 39.828125x22] baseline: 17
          "eget"
-        frag 5 from TextNode start: 176, length: 1, rect: [741,186 21x22]
+      frag 43 from TextNode start: 176, length: 1, rect: [741,186 21x22] baseline: 17
          " "
-        frag 6 from TextNode start: 177, length: 3, rect: [762,186 27.734375x22]
+      frag 44 from TextNode start: 177, length: 3, rect: [762,186 27.734375x22] baseline: 17
          "dui"
-      line 9 width: 0, height: 0, bottom: 0, baseline: 0
+      frag 45 from TextNode start: 181, length: 7, rect: [252,212 68.984375x22] baseline: 17
      line 10 width: 208.828125, height: 22, bottom: 224, baseline: 17
        frag 0 from TextNode start: 181, length: 7, rect: [252,212 68.984375x22]
          "dictum,"
-        frag 1 from TextNode start: 188, length: 1, rect: [321,212 23.578125x22]
+      frag 46 from TextNode start: 188, length: 1, rect: [321,212 23.578125x22] baseline: 17
          " "
-        frag 2 from TextNode start: 189, length: 2, rect: [344.578125,212 23.109375x22]
+      frag 47 from TextNode start: 189, length: 2, rect: [344.578125,212 23.109375x22] baseline: 17
          "eu"
-        frag 3 from TextNode start: 191, length: 1, rect: [367.578125,212 23.578125x22]
+      frag 48 from TextNode start: 191, length: 1, rect: [367.578125,212 23.578125x22] baseline: 17
          " "
-        frag 4 from TextNode start: 192, length: 8, rect: [391.15625,212 96.734375x22]
+      frag 49 from TextNode start: 192, length: 8, rect: [391.15625,212 96.734375x22] baseline: 17
          "accumsan"
-      line 11 width: 180.1875, height: 22, bottom: 246, baseline: 17
+      frag 50 from TextNode start: 201, length: 4, rect: [252,234 43.875x22] baseline: 17
        frag 0 from TextNode start: 201, length: 4, rect: [252,234 43.875x22]
          "enim"
-        frag 1 from TextNode start: 205, length: 1, rect: [296,234 37.90625x22]
+      frag 51 from TextNode start: 205, length: 1, rect: [296,234 37.90625x22] baseline: 17
          " "
-        frag 2 from TextNode start: 206, length: 10, rect: [333.90625,234 93.625x22]
+      frag 52 from TextNode start: 206, length: 10, rect: [333.90625,234 93.625x22] baseline: 17
          "tristique."
-        frag 3 from TextNode start: 216, length: 1, rect: [427.90625,234 37.90625x22]
+      frag 53 from TextNode start: 216, length: 1, rect: [427.90625,234 37.90625x22] baseline: 17
          " "
-        frag 4 from TextNode start: 217, length: 2, rect: [465.8125,234 22.6875x22]
+      frag 54 from TextNode start: 217, length: 2, rect: [465.8125,234 22.6875x22] baseline: 17
          "Ut"
-      line 12 width: 195.28125, height: 22, bottom: 268, baseline: 17
+      frag 55 from TextNode start: 220, length: 8, rect: [252,256 80.015625x22] baseline: 17
        frag 0 from TextNode start: 220, length: 8, rect: [252,256 80.015625x22]
          "lobortis"
-        frag 1 from TextNode start: 228, length: 1, rect: [332,256 30.359375x22]
+      frag 56 from TextNode start: 228, length: 1, rect: [332,256 30.359375x22] baseline: 17
          " "
-        frag 2 from TextNode start: 229, length: 5, rect: [362.359375,256 55.4375x22]
+      frag 57 from TextNode start: 229, length: 5, rect: [362.359375,256 55.4375x22] baseline: 17
          "lorem"
-        frag 3 from TextNode start: 234, length: 1, rect: [417.359375,256 30.359375x22]
+      frag 58 from TextNode start: 234, length: 1, rect: [417.359375,256 30.359375x22] baseline: 17
          " "
-        frag 4 from TextNode start: 235, length: 4, rect: [447.71875,256 39.828125x22]
+      frag 59 from TextNode start: 235, length: 4, rect: [447.71875,256 39.828125x22] baseline: 17
          "eget"
-      line 13 width: 222.921875, height: 22, bottom: 290, baseline: 17
+      frag 60 from TextNode start: 240, length: 3, rect: [252,278 31.15625x22] baseline: 17
        frag 0 from TextNode start: 240, length: 3, rect: [252,278 31.15625x22]
          "est"
-        frag 1 from TextNode start: 243, length: 1, rect: [283,278 16.53125x22]
+      frag 61 from TextNode start: 243, length: 1, rect: [283,278 16.53125x22] baseline: 17
          " "
-        frag 2 from TextNode start: 244, length: 9, rect: [299.53125,278 91.46875x22]
+      frag 62 from TextNode start: 244, length: 9, rect: [299.53125,278 91.46875x22] baseline: 17
          "vulputate"
-        frag 3 from TextNode start: 253, length: 1, rect: [391.53125,278 16.53125x22]
+      frag 63 from TextNode start: 253, length: 1, rect: [391.53125,278 16.53125x22] baseline: 17
          " "
-        frag 4 from TextNode start: 254, length: 8, rect: [408.0625,278 80.296875x22]
+      frag 64 from TextNode start: 254, length: 8, rect: [408.0625,278 80.296875x22] baseline: 17
          "egestas."
-      line 14 width: 223.125, height: 22, bottom: 312, baseline: 17
+      frag 65 from TextNode start: 263, length: 7, rect: [252,300 68.609375x22] baseline: 17
        frag 0 from TextNode start: 263, length: 7, rect: [252,300 68.609375x22]
          "Integer"
-        frag 1 from TextNode start: 270, length: 1, rect: [321,300 16.4375x22]
+      frag 66 from TextNode start: 270, length: 1, rect: [321,300 16.4375x22] baseline: 17
          " "
-        frag 2 from TextNode start: 271, length: 7, rect: [337.4375,300 71.328125x22]
+      frag 67 from TextNode start: 271, length: 7, rect: [337.4375,300 71.328125x22] baseline: 17
          "laoreet"
-        frag 3 from TextNode start: 278, length: 1, rect: [408.4375,300 16.4375x22]
+      frag 68 from TextNode start: 278, length: 1, rect: [408.4375,300 16.4375x22] baseline: 17
          " "
-        frag 4 from TextNode start: 279, length: 7, rect: [424.875,300 63.1875x22]
+      frag 69 from TextNode start: 279, length: 7, rect: [424.875,300 63.1875x22] baseline: 17
          "lacinia"
-      line 15 width: 222.609375, height: 22, bottom: 334, baseline: 17
+      frag 70 from TextNode start: 287, length: 4, rect: [252,322 43.15625x22] baseline: 17
        frag 0 from TextNode start: 287, length: 4, rect: [252,322 43.15625x22]
          "ante"
-        frag 1 from TextNode start: 291, length: 1, rect: [295,322 16.6875x22]
+      frag 71 from TextNode start: 291, length: 1, rect: [295,322 16.6875x22] baseline: 17
          " "
-        frag 2 from TextNode start: 292, length: 7, rect: [311.6875,322 74x22]
+      frag 72 from TextNode start: 292, length: 7, rect: [311.6875,322 74x22] baseline: 17
          "sodales"
-        frag 3 from TextNode start: 299, length: 1, rect: [385.6875,322 16.6875x22]
+      frag 73 from TextNode start: 299, length: 1, rect: [385.6875,322 16.6875x22] baseline: 17
          " "
-        frag 4 from TextNode start: 300, length: 9, rect: [402.375,322 85.453125x22]
+      frag 74 from TextNode start: 300, length: 9, rect: [402.375,322 85.453125x22] baseline: 17
          "lobortis."
-      line 16 width: 178.3125, height: 22, bottom: 356, baseline: 17
+      frag 75 from TextNode start: 310, length: 5, rect: [252,344 60.90625x22] baseline: 17
        frag 0 from TextNode start: 310, length: 5, rect: [252,344 60.90625x22]
          "Donec"
-        frag 1 from TextNode start: 315, length: 1, rect: [313,344 38.84375x22]
+      frag 76 from TextNode start: 315, length: 1, rect: [313,344 38.84375x22] baseline: 17
          " "
-        frag 2 from TextNode start: 316, length: 1, rect: [351.84375,344 11.6875x22]
+      frag 77 from TextNode start: 316, length: 1, rect: [351.84375,344 11.6875x22] baseline: 17
          "a"
-        frag 3 from TextNode start: 317, length: 1, rect: [363.84375,344 38.84375x22]
+      frag 78 from TextNode start: 317, length: 1, rect: [363.84375,344 38.84375x22] baseline: 17
          " "
-        frag 4 from TextNode start: 318, length: 9, rect: [402.6875,344 85.71875x22]
+      frag 79 from TextNode start: 318, length: 9, rect: [402.6875,344 85.71875x22] baseline: 17
          "tincidunt"
-      line 17 width: 231.078125, height: 22, bottom: 378, baseline: 17
+      frag 80 from TextNode start: 328, length: 5, rect: [252,366 48.59375x22] baseline: 17
        frag 0 from TextNode start: 328, length: 5, rect: [252,366 48.59375x22]
          "ante."
-        frag 1 from TextNode start: 333, length: 1, rect: [301,366 11.640625x22]
+      frag 81 from TextNode start: 333, length: 1, rect: [301,366 11.640625x22] baseline: 17
          " "
-        frag 2 from TextNode start: 334, length: 9, rect: [312.640625,366 94.765625x22]
+      frag 82 from TextNode start: 334, length: 9, rect: [312.640625,366 94.765625x22] baseline: 17
          "Phasellus"
-        frag 3 from TextNode start: 343, length: 1, rect: [406.640625,366 11.640625x22]
+      frag 83 from TextNode start: 343, length: 1, rect: [406.640625,366 11.640625x22] baseline: 17
          " "
-        frag 4 from TextNode start: 344, length: 1, rect: [418.28125,366 11.6875x22]
+      frag 84 from TextNode start: 344, length: 1, rect: [418.28125,366 11.6875x22] baseline: 17
          "a"
-        frag 5 from TextNode start: 345, length: 1, rect: [430.28125,366 11.640625x22]
+      frag 85 from TextNode start: 345, length: 1, rect: [430.28125,366 11.640625x22] baseline: 17
          " "
-        frag 6 from TextNode start: 346, length: 4, rect: [441.921875,366 46.03125x22]
+      frag 86 from TextNode start: 346, length: 4, rect: [441.921875,366 46.03125x22] baseline: 17
          "arcu"
-      line 18 width: 70.546875, height: 22, bottom: 400, baseline: 17
+      frag 87 from TextNode start: 351, length: 7, rect: [252,388 70.546875x22] baseline: 17
        frag 0 from TextNode start: 351, length: 7, rect: [252,388 70.546875x22]
          "tortor."
      BlockContainer <div.left> at (253,11) content-size 300x200 floating [BFC] children: not-inline
      TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-text-in-between.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-left-and-right-with-text-in-between.txt
@ -1,60 +1,41 @@
 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 (252,10) content-size 538x400 children: inline
-      line 0 width: 228.34375, height: 22, bottom: 22, baseline: 17
+      frag 0 from TextNode start: 1, length: 21, rect: [554,10 228.34375x22] baseline: 17
        frag 0 from TextNode start: 1, length: 21, rect: [554,10 228.34375x22]
          "Lorem ipsum dolor sit"
-      line 1 width: 183.78125, height: 22, bottom: 44, baseline: 17
+      frag 1 from TextNode start: 23, length: 17, rect: [554,32 183.78125x22] baseline: 17
        frag 0 from TextNode start: 23, length: 17, rect: [554,32 183.78125x22]
          "amet, consectetur"
-      line 2 width: 140.5625, height: 22, bottom: 66, baseline: 17
+      frag 2 from TextNode start: 41, length: 16, rect: [554,54 140.5625x22] baseline: 17
        frag 0 from TextNode start: 41, length: 16, rect: [554,54 140.5625x22]
          "adipiscing elit."
-      line 3 width: 145, height: 22, bottom: 88, baseline: 17
+      frag 3 from TextNode start: 58, length: 13, rect: [554,76 145x22] baseline: 17
        frag 0 from TextNode start: 58, length: 13, rect: [554,76 145x22]
          "Suspendisse a"
-      line 4 width: 196.703125, height: 22, bottom: 110, baseline: 17
+      frag 4 from TextNode start: 72, length: 19, rect: [554,98 196.703125x22] baseline: 17
        frag 0 from TextNode start: 72, length: 19, rect: [554,98 196.703125x22]
          "placerat mauris, ut"
-      line 5 width: 234.6875, height: 22, bottom: 132, baseline: 17
+      frag 5 from TextNode start: 92, length: 22, rect: [554,120 234.6875x22] baseline: 17
        frag 0 from TextNode start: 92, length: 22, rect: [554,120 234.6875x22]
          "elementum mi. Morbi ut"
-      line 6 width: 201.53125, height: 22, bottom: 154, baseline: 17
+      frag 6 from TextNode start: 115, length: 20, rect: [554,142 201.53125x22] baseline: 17
        frag 0 from TextNode start: 115, length: 20, rect: [554,142 201.53125x22]
          "vehicula ipsum, eget"
-      line 7 width: 232.53125, height: 22, bottom: 176, baseline: 17
+      frag 7 from TextNode start: 136, length: 23, rect: [554,164 232.53125x22] baseline: 17
        frag 0 from TextNode start: 136, length: 23, rect: [554,164 232.53125x22]
          "placerat augue. Integer"
-      line 8 width: 202.96875, height: 22, bottom: 198, baseline: 17
+      frag 8 from TextNode start: 160, length: 20, rect: [554,186 202.96875x22] baseline: 17
        frag 0 from TextNode start: 160, length: 20, rect: [554,186 202.96875x22]
          "rutrum nisi eget dui"
-      line 9 width: 0, height: 0, bottom: 0, baseline: 0
+      frag 9 from TextNode start: 181, length: 19, rect: [252,212 208.828125x22] baseline: 17
      line 10 width: 208.828125, height: 22, bottom: 224, baseline: 17
        frag 0 from TextNode start: 181, length: 19, rect: [252,212 208.828125x22]
          "dictum, eu accumsan"
-      line 11 width: 180.1875, height: 22, bottom: 246, baseline: 17
+      frag 10 from TextNode start: 201, length: 18, rect: [252,234 180.1875x22] baseline: 17
        frag 0 from TextNode start: 201, length: 18, rect: [252,234 180.1875x22]
          "enim tristique. Ut"
-      line 12 width: 195.28125, height: 22, bottom: 268, baseline: 17
+      frag 11 from TextNode start: 220, length: 19, rect: [252,256 195.28125x22] baseline: 17
        frag 0 from TextNode start: 220, length: 19, rect: [252,256 195.28125x22]
          "lobortis lorem eget"
-      line 13 width: 222.921875, height: 22, bottom: 290, baseline: 17
+      frag 12 from TextNode start: 240, length: 22, rect: [252,278 222.921875x22] baseline: 17
        frag 0 from TextNode start: 240, length: 22, rect: [252,278 222.921875x22]
          "est vulputate egestas."
-      line 14 width: 223.125, height: 22, bottom: 312, baseline: 17
+      frag 13 from TextNode start: 263, length: 23, rect: [252,300 223.125x22] baseline: 17
        frag 0 from TextNode start: 263, length: 23, rect: [252,300 223.125x22]
          "Integer laoreet lacinia"
-      line 15 width: 222.609375, height: 22, bottom: 334, baseline: 17
+      frag 14 from TextNode start: 287, length: 22, rect: [252,322 222.609375x22] baseline: 17
        frag 0 from TextNode start: 287, length: 22, rect: [252,322 222.609375x22]
          "ante sodales lobortis."
-      line 16 width: 178.3125, height: 22, bottom: 356, baseline: 17
+      frag 15 from TextNode start: 310, length: 17, rect: [252,344 178.3125x22] baseline: 17
        frag 0 from TextNode start: 310, length: 17, rect: [252,344 178.3125x22]
          "Donec a tincidunt"
-      line 17 width: 231.078125, height: 22, bottom: 378, baseline: 17
+      frag 16 from TextNode start: 328, length: 22, rect: [252,366 231.078125x22] baseline: 17
        frag 0 from TextNode start: 328, length: 22, rect: [252,366 231.078125x22]
          "ante. Phasellus a arcu"
-      line 18 width: 70.546875, height: 22, bottom: 400, baseline: 17
+      frag 17 from TextNode start: 351, length: 7, rect: [252,388 70.546875x22] baseline: 17
        frag 0 from TextNode start: 351, length: 7, rect: [252,388 70.546875x22]
          "tortor."
      BlockContainer <div.left> at (253,11) content-size 300x200 floating [BFC] children: not-inline
      TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-max-content-containing-block-flex-display.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-max-content-containing-block-flex-display.txt
@ -5,13 +5,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
        BlockContainer <div> at (8,8) content-size 23.609375x17 flex-item [BFC] children: not-inline
          BlockContainer <div> at (8,8) content-size 23.609375x17 floating [BFC] children: not-inline
            BlockContainer <span> at (8,8) content-size 14.265625x17 floating [BFC] children: inline
-              line 0 width: 14.265625, height: 17, bottom: 17, baseline: 13.296875
+              frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17] baseline: 13.296875
                frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17]
                  "A"
              TextNode <#text>
            BlockContainer <span> at (22.265625,8) content-size 9.34375x17 floating [BFC] children: inline
-              line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+              frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17] baseline: 13.296875
                frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17]
                  "B"
              TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-max-content-containing-block.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-max-content-containing-block.txt
@ -3,13 +3,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
      BlockContainer <div> at (8,8) content-size 23.609375x17 floating [BFC] children: not-inline
        BlockContainer <span> at (8,8) content-size 14.265625x17 floating [BFC] children: inline
-          line 0 width: 14.265625, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17]
              "A"
          TextNode <#text>
        BlockContainer <span> at (22.265625,8) content-size 9.34375x17 floating [BFC] children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [22.265625,8 9.34375x17]
              "B"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-should-avoid-inline-block.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-should-avoid-inline-block.txt
@ -2,19 +2,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x249 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x21 children: not-inline
      BlockContainer <div.Layout-sidebar> at (11,11) content-size 220x19 children: inline
-        line 0 width: 102, height: 19, bottom: 19, baseline: 14.296875
+        frag 0 from BlockContainer start: 0, length: 0, rect: [12,12 100x17] baseline: 14.296875
          frag 0 from BlockContainer start: 0, length: 0, rect: [12,12 100x17]
        BlockContainer <div.d-inline-block> at (12,12) content-size 100x17 inline-block [BFC] children: inline
-          line 0 width: 69.734375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 12, rect: [12,12 69.734375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 12, rect: [12,12 69.734375x17]
              "floats!!!!!!"
          TextNode <#text>
        BlockContainer <div.float-left> at (12,31) content-size 232.71875x218 floating [BFC] children: inline
-          line 0 width: 232.71875, height: 109, bottom: 109, baseline: 84.484375
+          frag 0 from TextNode start: 0, length: 5, rect: [12,31 232.71875x109] baseline: 84.484375
            frag 0 from TextNode start: 0, length: 5, rect: [12,31 232.71875x109]
              "float"
-          line 1 width: 164.0625, height: 109, bottom: 218, baseline: 84.484375
+          frag 1 from TextNode start: 6, length: 4, rect: [12,140 164.0625x109] baseline: 84.484375
            frag 0 from TextNode start: 6, length: 4, rect: [12,140 164.0625x109]
              "left"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-1.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-1.txt
@ -4,63 +4,45 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
        TextNode <#text>
      BlockContainer <div.outer> at (9,9) content-size 300x250 children: inline
-        line 0 width: 239.15625, height: 16, bottom: 16, baseline: 12.796875
+        frag 0 from TextNode start: 1, length: 24, rect: [61,9 212x16] baseline: 12.796875
          frag 0 from TextNode start: 1, length: 24, rect: [61,9 212x16]
            "foo bar baz foo bar baz "
-          frag 1 from TextNode start: 1, length: 3, rect: [273,9 27.15625x16]
+        frag 1 from TextNode start: 1, length: 3, rect: [273,9 27.15625x16] baseline: 12.796875
            "foo"
-        line 1 width: 27.640625, height: 16, bottom: 32, baseline: 12.796875
+        frag 2 from TextNode start: 5, length: 3, rect: [263,25 27.640625x16] baseline: 12.796875
          frag 0 from TextNode start: 5, length: 3, rect: [263,25 27.640625x16]
            "bar"
-        line 2 width: 27.203125, height: 16, bottom: 48, baseline: 12.796875
+        frag 3 from TextNode start: 9, length: 3, rect: [263,41 27.203125x16] baseline: 12.796875
          frag 0 from TextNode start: 9, length: 3, rect: [263,41 27.203125x16]
            "baz"
-        line 3 width: 27.15625, height: 16, bottom: 64, baseline: 12.796875
+        frag 4 from TextNode start: 13, length: 3, rect: [263,57 27.15625x16] baseline: 12.796875
          frag 0 from TextNode start: 13, length: 3, rect: [263,57 27.15625x16]
            "foo"
-        line 4 width: 0, height: 0, bottom: 0, baseline: 0
+        frag 5 from TextNode start: 17, length: 7, rect: [9,77 62.84375x16] baseline: 12.796875
        line 5 width: 62.84375, height: 16, bottom: 84, baseline: 12.796875
          frag 0 from TextNode start: 17, length: 7, rect: [9,77 62.84375x16]
            "bar baz"
-        line 6 width: 62.796875, height: 16, bottom: 100, baseline: 12.796875
+        frag 6 from TextNode start: 25, length: 7, rect: [9,93 62.796875x16] baseline: 12.796875
          frag 0 from TextNode start: 25, length: 7, rect: [9,93 62.796875x16]
            "foo bar"
-        line 7 width: 62.359375, height: 16, bottom: 116, baseline: 12.796875
+        frag 7 from TextNode start: 33, length: 7, rect: [9,109 62.359375x16] baseline: 12.796875
          frag 0 from TextNode start: 33, length: 7, rect: [9,109 62.359375x16]
            "baz foo"
-        line 8 width: 62.84375, height: 16, bottom: 132, baseline: 12.796875
+        frag 8 from TextNode start: 41, length: 7, rect: [9,125 62.84375x16] baseline: 12.796875
          frag 0 from TextNode start: 41, length: 7, rect: [9,125 62.84375x16]
            "bar baz"
-        line 9 width: 239.15625, height: 16, bottom: 148, baseline: 12.796875
+        frag 9 from TextNode start: 1, length: 27, rect: [9,141 239.15625x16] baseline: 12.796875
          frag 0 from TextNode start: 1, length: 27, rect: [9,141 239.15625x16]
            "foo bar baz foo bar baz foo"
-        line 10 width: 239.640625, height: 16, bottom: 164, baseline: 12.796875
+        frag 10 from TextNode start: 29, length: 27, rect: [9,157 239.640625x16] baseline: 12.796875
          frag 0 from TextNode start: 29, length: 27, rect: [9,157 239.640625x16]
            "bar baz foo bar baz foo bar"
-        line 11 width: 239.203125, height: 16, bottom: 180, baseline: 12.796875
+        frag 11 from TextNode start: 57, length: 16, rect: [61,173 141.203125x16] baseline: 12.796875
          frag 0 from TextNode start: 57, length: 16, rect: [61,173 141.203125x16]
            "baz foo bar baz "
-          frag 1 from TextNode start: 1, length: 11, rect: [202,173 98x16]
+        frag 12 from TextNode start: 1, length: 11, rect: [202,173 98x16] baseline: 12.796875
            "foo bar baz"
-        line 12 width: 204, height: 16, bottom: 196, baseline: 12.796875
+        frag 13 from TextNode start: 13, length: 12, rect: [61,189 106x16] baseline: 12.796875
          frag 0 from TextNode start: 13, length: 12, rect: [61,189 106x16]
            "foo bar baz "
-          frag 1 from TextNode start: 1, length: 11, rect: [167,189 98x16]
+        frag 14 from TextNode start: 1, length: 11, rect: [167,189 98x16] baseline: 12.796875
            "foo bar baz"
-        line 13 width: 204, height: 16, bottom: 212, baseline: 12.796875
+        frag 15 from TextNode start: 13, length: 23, rect: [61,205 204x16] baseline: 12.796875
          frag 0 from TextNode start: 13, length: 23, rect: [61,205 204x16]
            "foo bar baz foo bar baz"
-        line 14 width: 239.15625, height: 16, bottom: 228, baseline: 12.796875
+        frag 16 from TextNode start: 37, length: 27, rect: [61,221 239.15625x16] baseline: 12.796875
          frag 0 from TextNode start: 37, length: 27, rect: [61,221 239.15625x16]
            "foo bar baz foo bar baz foo"
-        line 15 width: 274.84375, height: 16, bottom: 244, baseline: 12.796875
+        frag 17 from TextNode start: 65, length: 31, rect: [9,237 274.84375x16] baseline: 12.796875
          frag 0 from TextNode start: 65, length: 31, rect: [9,237 274.84375x16]
            "bar baz foo bar baz foo bar baz"
-        line 16 width: 274.796875, height: 16, bottom: 260, baseline: 12.796875
+        frag 18 from TextNode start: 97, length: 31, rect: [9,253 274.796875x16] baseline: 12.796875
          frag 0 from TextNode start: 97, length: 31, rect: [9,253 274.796875x16]
            "foo bar baz foo bar baz foo bar"
-        line 17 width: 133.203125, height: 16, bottom: 276, baseline: 12.796875
+        frag 19 from TextNode start: 129, length: 15, rect: [9,269 133.203125x16] baseline: 12.796875
          frag 0 from TextNode start: 129, length: 15, rect: [9,269 133.203125x16]
            "baz foo bar baz"
        TextNode <#text>
        BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-2.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-2.txt
@ -4,13 +4,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div#page> at (50,50) content-size 750x0 children: not-inline
        BlockContainer <div#content_box> at (50,50) content-size 400x150 floating [BFC] children: inline
          BlockContainer <article.first> at (50,50) content-size 300x100 floating [BFC] children: inline
-            line 0 width: 36.03125, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 5, rect: [50,50 36.03125x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 5, rect: [50,50 36.03125x17]
                "first"
            TextNode <#text>
          BlockContainer <article.second> at (50,150) content-size 200x50 floating [BFC] children: inline
-            line 0 width: 54.78125, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 0, length: 6, rect: [50,150 54.78125x17] baseline: 13.296875
              frag 0 from TextNode start: 0, length: 6, rect: [50,150 54.78125x17]
                "second"
            TextNode <#text>
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-3.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/float-stress-3.txt
@ -4,8 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
        TextNode <#text>
      BlockContainer <div.outer> at (9,9) content-size 300x250 children: inline
-        line 0 width: 204, height: 16, bottom: 16, baseline: 12.796875
+        frag 0 from TextNode start: 1, length: 23, rect: [61,9 204x16] baseline: 12.796875
          frag 0 from TextNode start: 1, length: 23, rect: [61,9 204x16]
            "foo bar baz foo bar baz"
        TextNode <#text>
        BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/floats-and-negative-margins.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/floats-and-negative-margins.txt
@ -3,14 +3,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (100,8) content-size 200x200 children: not-inline
      BlockContainer <div.row> at (50,8) content-size 250x200 children: inline
        BlockContainer <div.item> at (50,8) content-size 125x17 floating [BFC] children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 1, length: 1, rect: [50,8 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 1, length: 1, rect: [50,8 9.34375x17]
              "a"
          TextNode <#text>
        TextNode <#text>
        BlockContainer <div.item> at (175,8) content-size 125x17 floating [BFC] children: inline
-          line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 1, length: 1, rect: [175,8 9.46875x17] baseline: 13.296875
            frag 0 from TextNode start: 1, length: 1, rect: [175,8 9.46875x17]
              "b"
          TextNode <#text>
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/floats-with-negative-percentage-margins.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/floats-with-negative-percentage-margins.txt
@ -2,18 +2,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x208 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 600x0 children: not-inline
      BlockContainer <div#top> at (8,8) content-size 100x100 floating [BFC] children: inline
-        line 0 width: 26.640625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [8,8 26.640625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [8,8 26.640625x17]
            "top"
        TextNode <#text>
      BlockContainer <div#left> at (8,108) content-size 100x100 floating [BFC] children: inline
-        line 0 width: 26.25, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 4, rect: [8,108 26.25x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 4, rect: [8,108 26.25x17]
            "left"
        TextNode <#text>
      BlockContainer <div#right> at (208,108) content-size 100x100 floating [BFC] children: inline
-        line 0 width: 37.109375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [208,108 37.109375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [208,108 37.109375x17]
            "right"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/forced-break-stops-non-whitespace-sequence.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/forced-break-stops-non-whitespace-sequence.txt
@ -2,8 +2,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,16) content-size 784x19 children: not-inline
      BlockContainer <pre> at (9,17) content-size 782x17 children: inline
-        line 0 width: 8, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 1, rect: [9,17 8x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 1, rect: [9,17 8x17]
            " "
        InlineNode <span>
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/grid-container-should-avoid-overlapping-floats.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/grid-container-should-avoid-overlapping-floats.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 400x50 children: not-inline
      BlockContainer <div.right> at (370.890625,8) content-size 37.109375x17 floating [BFC] children: inline
-        line 0 width: 37.109375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [370.890625,8 37.109375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [370.890625,8 37.109375x17]
            "right"
        TextNode <#text>
      Box <div.grid> at (8,8) content-size 362.890625x50 [GFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/ifc-float-left-and-sibling-with-margin-left.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/ifc-float-left-and-sibling-with-margin-left.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 780x19 children: not-inline
      BlockContainer <div.thumbnail> at (11,11) content-size 50x50 floating [BFC] children: not-inline
      BlockContainer <div.title> at (91,11) content-size 698x17 children: inline
-        line 0 width: 125.125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 14, rect: [91,11 125.125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 14, rect: [91,11 125.125x17]
            "Chrono Trigger"
        TextNode <#text>
--- 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,20 +1,17 @@
 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
-      line 0 width: 307.140625, height: 92, bottom: 92, baseline: 34.296875
+      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,31 103.140625x17]
          "Hello friends"
-        frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 202x90]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 202x90] baseline: 34.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
-          line 0 width: 22.546875, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 3, rect: [115,12 22.546875x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 3, rect: [115,12 22.546875x17]
              "1st"
          TextNode <#text>
        BlockContainer <div> at (115,31) content-size 200x17 children: inline
-          line 0 width: 26.28125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 3, rect: [115,31 26.28125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 3, rect: [115,31 26.28125x17]
              "2nd"
          TextNode <#text>
        BlockContainer <div.whee> at (115,50) content-size 200x50 children: not-inline
--- 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,25 +1,21 @@
 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
-      line 0 width: 144.375, height: 59, bottom: 59, baseline: 34.296875
+      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,31 103.140625x17]
          "Hello friends"
-        frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 39.234375x57]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 39.234375x57] baseline: 34.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
-          line 0 width: 22.546875, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 3, rect: [115,12 22.546875x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 3, rect: [115,12 22.546875x17]
              "1st"
          TextNode <#text>
        BlockContainer <div> at (115,31) content-size 37.234375x17 children: inline
-          line 0 width: 26.28125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 3, rect: [115,31 26.28125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 3, rect: [115,31 26.28125x17]
              "2nd"
          TextNode <#text>
        BlockContainer <div.float> at (115,50) content-size 37.234375x17 floating [BFC] children: inline
-          line 0 width: 37.234375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 5, rect: [115,50 37.234375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 5, rect: [115,50 37.234375x17]
              "float"
          TextNode <#text>
        BlockContainer <(anonymous)> at (114,49) content-size 39.234375x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-contained-by-abspos-element.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-contained-by-abspos-element.txt
@ -3,26 +3,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 780x2 children: not-inline
      BlockContainer <div> at (11,11) content-size 500x0 positioned children: not-inline
        BlockContainer <h1> at (12,45.5) content-size 498x332 positioned [BFC] children: inline
-          line 0 width: 498, height: 332, bottom: 332, baseline: 43.484375
+          frag 0 from BlockContainer start: 0, length: 0, rect: [13,46.5 496x330] baseline: 43.484375
            frag 0 from BlockContainer start: 0, length: 0, rect: [13,46.5 496x330]
          BlockContainer <span> at (13,46.5) content-size 496x330 inline-block [BFC] children: inline
-            line 0 width: 246.484375, height: 55, bottom: 55, baseline: 42.484375
+            frag 0 from TextNode start: 0, length: 9, rect: [13,46.5 246.484375x55] baseline: 42.484375
              frag 0 from TextNode start: 0, length: 9, rect: [13,46.5 246.484375x55]
                "Skew is a"
-            line 1 width: 240.53125, height: 55, bottom: 110, baseline: 42.484375
+            frag 1 from TextNode start: 10, length: 10, rect: [13,101.5 240.53125x55] baseline: 42.484375
              frag 0 from TextNode start: 10, length: 10, rect: [13,101.5 240.53125x55]
                "web-first,"
-            line 2 width: 377.9375, height: 55, bottom: 165, baseline: 42.484375
+            frag 2 from TextNode start: 21, length: 14, rect: [13,156.5 377.9375x55] baseline: 42.484375
              frag 0 from TextNode start: 21, length: 14, rect: [13,156.5 377.9375x55]
                "cross-platform"
-            line 3 width: 314.015625, height: 55, bottom: 220, baseline: 42.484375
+            frag 3 from TextNode start: 36, length: 11, rect: [13,211.5 314.015625x55] baseline: 42.484375
              frag 0 from TextNode start: 36, length: 11, rect: [13,211.5 314.015625x55]
                "programming"
-            line 4 width: 415.734375, height: 55, bottom: 275, baseline: 42.484375
+            frag 4 from TextNode start: 48, length: 16, rect: [13,266.5 415.734375x55] baseline: 42.484375
              frag 0 from TextNode start: 48, length: 16, rect: [13,266.5 415.734375x55]
                "language with an"
-            line 5 width: 492.671875, height: 55, bottom: 330, baseline: 42.484375
+            frag 5 from TextNode start: 65, length: 20, rect: [13,321.5 492.671875x55] baseline: 42.484375
              frag 0 from TextNode start: 65, length: 20, rect: [13,321.5 492.671875x55]
                "optimizing compiler."
            TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-percentage-max-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-percentage-max-width.txt
@ -1,11 +1,9 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x113 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x97 children: inline
-      line 0 width: 134.109375, height: 97, bottom: 97, baseline: 53.296875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [48,48 54.109375x17] baseline: 53.296875
        frag 0 from BlockContainer start: 0, length: 0, rect: [48,48 54.109375x17]
      BlockContainer <div> at (48,48) content-size 54.109375x17 inline-block [BFC] children: inline
-        line 0 width: 54.109375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 6, rect: [48,48 54.109375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 6, rect: [48,48 54.109375x17]
            "New UI"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-max-width-fit-content.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-max-width-fit-content.txt
@ -1,11 +1,9 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x35 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x19 children: inline
-      line 0 width: 102.203125, height: 19, bottom: 19, baseline: 14.296875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 100.203125x17] baseline: 14.296875
        frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 100.203125x17]
      BlockContainer <span> at (9,9) content-size 100.203125x17 inline-block [BFC] children: inline
-        line 0 width: 100.203125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 13, rect: [9,9 100.203125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 13, rect: [9,9 100.203125x17]
            "hello friends"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-negative-margin-left.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-negative-margin-left.txt
@ -1,9 +1,8 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x60 [BFC] children: not-inline
    BlockContainer <body> at (5,5) content-size 150x50 children: inline
-      line 0 width: 150, height: 50, bottom: 50, baseline: 50
+      frag 0 from BlockContainer start: 0, length: 0, rect: [5,5 100x50] baseline: 50
-        frag 0 from BlockContainer start: 0, length: 0, rect: [5,5 100x50]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [55,5 100x50] baseline: 50
        frag 1 from BlockContainer start: 0, length: 0, rect: [55,5 100x50]
      BlockContainer <div.foo> at (5,5) content-size 100x50 inline-block [BFC] children: not-inline
      BlockContainer <div.bar> at (55,5) content-size 100x50 inline-block [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-negative-margin-right.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-negative-margin-right.txt
@ -1,9 +1,8 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x60 [BFC] children: not-inline
    BlockContainer <body> at (5,5) content-size 150x50 children: inline
-      line 0 width: 150, height: 50, bottom: 50, baseline: 50
+      frag 0 from BlockContainer start: 0, length: 0, rect: [5,5 100x50] baseline: 50
-        frag 0 from BlockContainer start: 0, length: 0, rect: [5,5 100x50]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [105,5 100x50] baseline: 50
        frag 1 from BlockContainer start: 0, length: 0, rect: [105,5 100x50]
      BlockContainer <div.foo> at (5,5) content-size 100x50 inline-block [BFC] children: not-inline
      BlockContainer <div.bar> at (105,5) content-size 100x50 inline-block [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-percentage-height-and-auto-height-of-containing-block.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-block-with-percentage-height-and-auto-height-of-containing-block.txt
@ -2,11 +2,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
      BlockContainer <div.pure-menu-list> at (8,8) content-size 784x17 children: inline
-        line 0 width: 36.453125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 36.453125x17] baseline: 13.296875
          frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 36.453125x17]
        BlockContainer <div.pure-menu-item> at (8,8) content-size 36.453125x17 inline-block [BFC] children: inline
-          line 0 width: 36.453125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 4, rect: [8,8 36.453125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 4, rect: [8,8 36.453125x17]
              "docs"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-box-positioned-with-top-left.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-box-positioned-with-top-left.txt
@ -1,16 +1,14 @@
 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 784x20 children: inline
-      line 0 width: 352.34375, height: 20, bottom: 20, baseline: 13.296875
+      frag 0 from TextNode start: 0, length: 14, rect: [8,8 112.421875x17] baseline: 13.296875
        frag 0 from TextNode start: 0, length: 14, rect: [8,8 112.421875x17]
          "text text text"
-        frag 1 from BlockContainer start: 0, length: 0, rect: [120,8 110.375x20]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [120,8 110.375x20] baseline: 13.296875
-        frag 2 from TextNode start: 0, length: 16, rect: [231,8 129.546875x17]
+      frag 2 from TextNode start: 0, length: 16, rect: [231,8 129.546875x17] baseline: 13.296875
          "more inline text"
      TextNode <#text>
      BlockContainer <span.displaced_text> at (150,48) content-size 110.375x20 positioned inline-block [BFC] children: inline
-        line 0 width: 110.375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 14, rect: [150,48 110.375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 14, rect: [150,48 110.375x17]
            "displaced text"
        TextNode <#text>
      TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-box-with-vertical-margins-vertical-align-top.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-box-with-vertical-margins-vertical-align-top.txt
@ -1,11 +1,10 @@
 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 784x175 children: inline
-      line 0 width: 210.828125, height: 175, bottom: 175, baseline: 13.296875
+      frag 0 from TextNode start: 0, length: 6, rect: [8,8 43.125x17] baseline: 13.296875
        frag 0 from TextNode start: 0, length: 6, rect: [8,8 43.125x17]
          "Well, "
-        frag 1 from BlockContainer start: 0, length: 0, rect: [51,58 100x100]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [51,58 100x100] baseline: 0
-        frag 2 from TextNode start: 0, length: 9, rect: [151,8 67.703125x17]
+      frag 2 from TextNode start: 0, length: 9, rect: [151,8 67.703125x17] baseline: 13.296875
          " friends."
      TextNode <#text>
      BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-box-with-vertical-margins.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-box-with-vertical-margins.txt
@ -1,11 +1,10 @@
 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 784x178 children: inline
-      line 0 width: 210.828125, height: 178, bottom: 178, baseline: 175
+      frag 0 from TextNode start: 0, length: 6, rect: [8,169 43.125x17] baseline: 13.296875
        frag 0 from TextNode start: 0, length: 6, rect: [8,169 43.125x17]
          "Well, "
-        frag 1 from BlockContainer start: 0, length: 0, rect: [51,58 100x100]
+      frag 1 from BlockContainer start: 0, length: 0, rect: [51,58 100x100] baseline: 175
-        frag 2 from TextNode start: 0, length: 9, rect: [151,169 67.703125x17]
+      frag 2 from TextNode start: 0, length: 9, rect: [151,169 67.703125x17] baseline: 13.296875
          " friends."
      TextNode <#text>
      BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/inline-node-not-inserted-into-generated-box.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/inline-node-not-inserted-into-generated-box.txt
@ -2,13 +2,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x50 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
      BlockContainer <(anonymous)> at (8,8) content-size 784x17 children: inline
-        line 0 width: 27.15625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [8,8 27.15625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [8,8 27.15625x17]
            "foo"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,25) content-size 784x17 children: inline
-        line 0 width: 27.640625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [8,25 27.640625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [8,25 27.640625x17]
            "bar"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x60 children: not-inline
      BlockContainer <div.banner> at (8,8) content-size 200x30 children: not-inline
      BlockContainer <(anonymous)> at (8,38) content-size 784x30 children: inline
-        line 0 width: 200, height: 30, bottom: 30, baseline: 30
+        frag 0 from BlockContainer start: 0, length: 0, rect: [8,38 200x30] baseline: 30
          frag 0 from BlockContainer start: 0, length: 0, rect: [8,38 200x30]
        BlockContainer <div.tab> at (8,38) content-size 200x30 inline-block [BFC] children: not-inline
        BlockContainer <div.timeline> at (592,38) content-size 200x30 floating [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/list-markers-intruded-by-float.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/list-markers-intruded-by-float.txt
@ -4,38 +4,32 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div.box> at (18,26) content-size 200x100 floating [BFC] children: not-inline
      BlockContainer <ul> at (48,16) content-size 744x102 children: not-inline
        ListItemBox <li> at (48,16) content-size 744x17 children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [328,16 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [328,16 9.34375x17]
              "a"
          TextNode <#text>
          ListItemMarkerBox <(anonymous)> at (304,16) content-size 12x17 children: not-inline
        ListItemBox <li> at (48,33) content-size 744x17 children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [328,33 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [328,33 9.34375x17]
              "a"
          TextNode <#text>
          ListItemMarkerBox <(anonymous)> at (304,33) content-size 12x17 children: not-inline
        ListItemBox <li> at (48,50) content-size 744x17 children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [328,50 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [328,50 9.34375x17]
              "a"
          TextNode <#text>
          ListItemMarkerBox <(anonymous)> at (304,50) content-size 12x17 children: not-inline
        ListItemBox <li> at (48,67) content-size 744x17 children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [328,67 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [328,67 9.34375x17]
              "a"
          TextNode <#text>
          ListItemMarkerBox <(anonymous)> at (304,67) content-size 12x17 children: not-inline
        ListItemBox <li> at (48,84) content-size 744x17 children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [328,84 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [328,84 9.34375x17]
              "a"
          TextNode <#text>
          ListItemMarkerBox <(anonymous)> at (304,84) content-size 12x17 children: not-inline
        ListItemBox <li> at (48,101) content-size 744x17 children: inline
-          line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [328,101 9.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [328,101 9.34375x17]
              "a"
          TextNode <#text>
          ListItemMarkerBox <(anonymous)> at (304,101) content-size 12x17 children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-1.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-1.txt
@ -2,15 +2,13 @@ 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,25) content-size 784x229 children: not-inline
      BlockContainer <div#foo> at (34,26) content-size 100x100 children: inline
-        line 0 width: 27.15625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [34,26 27.15625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [34,26 27.15625x17]
            "foo"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,152) content-size 784x0 children: inline
        TextNode <#text>
      BlockContainer <div#bar> at (34,153) content-size 100x100 children: inline
-        line 0 width: 27.640625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [34,153 27.640625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [34,153 27.640625x17]
            "bar"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,279) content-size 784x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-2.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-2.txt
@ -2,22 +2,19 @@ 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 784x336 children: not-inline
      BlockContainer <div#foo> at (9,9) content-size 100x100 children: inline
-        line 0 width: 27.15625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [9,9 27.15625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [9,9 27.15625x17]
            "foo"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,135) content-size 784x0 children: inline
        TextNode <#text>
      BlockContainer <div#bar> at (9,136) content-size 100x100 children: inline
-        line 0 width: 27.640625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [9,136 27.640625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [9,136 27.640625x17]
            "bar"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,262) content-size 784x0 children: inline
        TextNode <#text>
      BlockContainer <div#baz> at (9,243) content-size 100x100 children: inline
-        line 0 width: 27.203125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [9,243 27.203125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [9,243 27.203125x17]
            "baz"
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,344) content-size 784x0 children: inline
--- 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,11 +1,9 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x121 [BFC] children: inline
-    line 0 width: 170.96875, height: 121, bottom: 121, baseline: 15.296875
+    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]
    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
-        line 0 width: 166.96875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 21, rect: [3,3 166.96875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 21, rect: [3,3 166.96875x17]
            "suspiciously tall box"
        TextNode <#text>
      BlockContainer <(anonymous)> at (2,121) content-size 168.96875x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline-start.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline-start.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 500x81 children: not-inline
      BlockContainer <div.a> at (51,21) content-size 413x49 children: not-inline
        BlockContainer <div.b> at (92,32) content-size 326x17 children: inline
-          line 0 width: 41.78125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 5, rect: [93,32 39.78125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 5, rect: [93,32 39.78125x17]
              "Hello"
          InlineNode <span>
            TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/margin-padding-block-inline.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 500x101 children: not-inline
      BlockContainer <div.a> at (31,21) content-size 458x79 children: not-inline
        BlockContainer <div.b> at (72,52) content-size 376x17 children: inline
-          line 0 width: 41.78125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 5, rect: [73,52 39.78125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 5, rect: [73,52 39.78125x17]
              "Hello"
          InlineNode <span>
            TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/max-width-for-box-with-inline-children.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/max-width-for-box-with-inline-children.txt
@ -3,14 +3,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 204x169 children: not-inline
      BlockContainer <div.outer> at (11,11) content-size 202x167 children: not-inline
        BlockContainer <div.inner> at (12,12) content-size 200x165 children: inline
-          line 0 width: 88.765625, height: 55, bottom: 55, baseline: 42.484375
+          frag 0 from TextNode start: 0, length: 4, rect: [12,12 88.765625x55] baseline: 42.484375
            frag 0 from TextNode start: 0, length: 4, rect: [12,12 88.765625x55]
              "well"
-          line 1 width: 115.140625, height: 55, bottom: 110, baseline: 42.484375
+          frag 1 from TextNode start: 5, length: 5, rect: [12,67 115.140625x55] baseline: 42.484375
            frag 0 from TextNode start: 5, length: 5, rect: [12,67 115.140625x55]
              "hello"
-          line 2 width: 173, height: 55, bottom: 165, baseline: 42.484375
+          frag 2 from TextNode start: 11, length: 7, rect: [12,122 173x55] baseline: 42.484375
            frag 0 from TextNode start: 11, length: 7, rect: [12,122 173x55]
              "friends"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/max-width-on-child-block-with-width-auto-contributes-to-intrinsic-size-of-parent.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/max-width-on-child-block-with-width-auto-contributes-to-intrinsic-size-of-parent.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    Box <body.outer> at (10,10) content-size 780x21 flex-container(row) [FFC] children: not-inline
      BlockContainer <div.middle> at (11,11) content-size 202x19 flex-item [BFC] children: not-inline
        BlockContainer <div.inner> at (12,12) content-size 200x17 children: inline
-          line 0 width: 45.15625, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 4, rect: [12,12 45.15625x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 4, rect: [12,12 45.15625x17]
              "OPEN"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/max-width-percentage-100-border-box.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/max-width-percentage-100-border-box.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 93.59375x19 positioned [BFC] children: not-inline
      BlockContainer <nav> at (11,11) content-size 91.59375x17 children: inline
-        line 0 width: 91.59375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 10, rect: [11,11 91.59375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 10, rect: [11,11 91.59375x17]
            "border box"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/max-width-percentage-100.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/max-width-percentage-100.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 138.609375x19 positioned [BFC] children: not-inline
      BlockContainer <div> at (11,11) content-size 136.609375x17 children: inline
-        line 0 width: 136.609375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 18, rect: [11,11 136.609375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 18, rect: [11,11 136.609375x17]
            "well hello friends"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/max-width-percentage-containing-block.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/max-width-percentage-containing-block.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (1,1) content-size 798x37 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x19 children: not-inline
      BlockContainer <span.text> at (11,11) content-size 66.671875x17 children: inline
-        line 0 width: 66.671875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 7, rect: [11,11 66.671875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 7, rect: [11,11 66.671875x17]
            "Trimmed"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/max-width-wrapped-in-max-content.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/max-width-wrapped-in-max-content.txt
@ -4,23 +4,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div.wrapper> at (8,8) content-size 270x102 children: not-inline
        BlockContainer <div.constrained> at (8,8) content-size 270x102 children: not-inline
          BlockContainer <(anonymous)> at (8,8) content-size 270x102 children: inline
-            line 0 width: 261.0625, height: 17, bottom: 17, baseline: 13.296875
+            frag 0 from TextNode start: 1, length: 35, rect: [8,8 261.0625x17] baseline: 13.296875
              frag 0 from TextNode start: 1, length: 35, rect: [8,8 261.0625x17]
                "hello hello hello hello hello hello"
-            line 1 width: 261.0625, height: 17, bottom: 34, baseline: 13.296875
+            frag 1 from TextNode start: 37, length: 35, rect: [8,25 261.0625x17] baseline: 13.296875
              frag 0 from TextNode start: 37, length: 35, rect: [8,25 261.0625x17]
                "hello hello hello hello hello hello"
-            line 2 width: 261.0625, height: 17, bottom: 51, baseline: 13.296875
+            frag 2 from TextNode start: 73, length: 35, rect: [8,42 261.0625x17] baseline: 13.296875
              frag 0 from TextNode start: 73, length: 35, rect: [8,42 261.0625x17]
                "hello hello hello hello hello hello"
-            line 3 width: 261.0625, height: 17, bottom: 68, baseline: 13.296875
+            frag 3 from TextNode start: 109, length: 35, rect: [8,59 261.0625x17] baseline: 13.296875
              frag 0 from TextNode start: 109, length: 35, rect: [8,59 261.0625x17]
                "hello hello hello hello hello hello"
-            line 4 width: 261.0625, height: 17, bottom: 85, baseline: 13.296875
+            frag 4 from TextNode start: 145, length: 35, rect: [8,76 261.0625x17] baseline: 13.296875
              frag 0 from TextNode start: 145, length: 35, rect: [8,76 261.0625x17]
                "hello hello hello hello hello hello"
-            line 5 width: 81.6875, height: 17, bottom: 102, baseline: 13.296875
+            frag 5 from TextNode start: 181, length: 11, rect: [8,93 81.6875x17] baseline: 13.296875
              frag 0 from TextNode start: 181, length: 11, rect: [8,93 81.6875x17]
                "hello hello"
            TextNode <#text>
          BlockContainer <div> at (8,110) content-size 270x0 children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/min-width-for-box-with-inline-children.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/min-width-for-box-with-inline-children.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 604x59 children: not-inline
      BlockContainer <div.outer> at (11,11) content-size 602x57 children: not-inline
        BlockContainer <div.inner> at (12,12) content-size 600x55 children: inline
-          line 0 width: 426.90625, height: 55, bottom: 55, baseline: 42.484375
+          frag 0 from TextNode start: 0, length: 18, rect: [12,12 426.90625x55] baseline: 42.484375
            frag 0 from TextNode start: 0, length: 18, rect: [12,12 426.90625x55]
              "well hello friends"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/narrow-bfc-width-to-avoid-overlap-with-floats.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/narrow-bfc-width-to-avoid-overlap-with-floats.txt
@ -4,20 +4,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
      BlockContainer <div.wrapper> at (8,8) content-size 784x105 children: not-inline
        BlockContainer <div.float> at (592,8) content-size 200x1000 floating [BFC] children: not-inline
        BlockContainer <div.bfc> at (18,18) content-size 564x85 [BFC] children: inline
-          line 0 width: 458.125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 56, rect: [18,18 458.125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 56, rect: [18,18 458.125x17]
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          line 1 width: 511.796875, height: 17, bottom: 34, baseline: 13.296875
+          frag 1 from TextNode start: 57, length: 60, rect: [18,35 511.796875x17] baseline: 13.296875
            frag 0 from TextNode start: 57, length: 60, rect: [18,35 511.796875x17]
              "Pellentesque vitae neque nunc. Nam fermentum libero a lectus"
-          line 2 width: 537.078125, height: 17, bottom: 51, baseline: 13.296875
+          frag 2 from TextNode start: 118, length: 67, rect: [18,52 537.078125x17] baseline: 13.296875
            frag 0 from TextNode start: 118, length: 67, rect: [18,52 537.078125x17]
              "vulputate eleifend. Nam sagittis tristique augue, id sodales mauris"
-          line 3 width: 537.34375, height: 17, bottom: 68, baseline: 13.296875
+          frag 3 from TextNode start: 186, length: 65, rect: [18,69 537.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 186, length: 65, rect: [18,69 537.34375x17]
              "suscipit at. Vivamus eget placerat ex. Suspendisse potenti. Morbi"
-          line 4 width: 455.375, height: 17, bottom: 85, baseline: 13.296875
+          frag 4 from TextNode start: 252, length: 57, rect: [18,86 455.375x17] baseline: 13.296875
            frag 0 from TextNode start: 252, length: 57, rect: [18,86 455.375x17]
              "pulvinar ipsum eget nulla dapibus, ac varius mi eleifend."
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-height-with-containing-block-padding.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-height-with-containing-block-padding.txt
@ -3,8 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x600 children: not-inline
      BlockContainer <div.container> at (8,108) content-size 784x500 children: not-inline
        BlockContainer <div.hmm> at (18,118) content-size 764x250 children: inline
-          line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 5, rect: [18,118 36.84375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 5, rect: [18,118 36.84375x17]
              "hello"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-height.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-height.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x53 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x37 children: not-inline
      BlockContainer <div.hmm> at (18,18) content-size 764x17 children: inline
-        line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [18,18 36.84375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [18,18 36.84375x17]
            "hello"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-width-with-max-content-containing-block-width.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/percentage-min-width-with-max-content-containing-block-width.txt
@ -2,8 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 200x17 children: not-inline
      BlockContainer <div> at (8,8) content-size 200x17 children: inline
-        line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.84375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.84375x17]
            "hello"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/percentage-padding-on-inline-block-with-indefinite-containing-block-size.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/percentage-padding-on-inline-block-with-indefinite-containing-block-size.txt
@ -1,8 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 0x17 children: inline
-      line 0 width: 0, height: 17, bottom: 17, baseline: 13.296875
+      frag 0 from BlockContainer start: 0, length: 0, rect: [8,21 0x0] baseline: 0
        frag 0 from BlockContainer start: 0, length: 0, rect: [8,21 0x0]
      BlockContainer <div> at (8,21) content-size 0x0 inline-block [BFC] children: not-inline
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
--- a/Tests/LibWeb/Layout/expected/block-and-inline/relpos-block.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/relpos-block.txt
@ -2,13 +2,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (2,2) content-size 796x62 [BFC] children: not-inline
    BlockContainer <body> at (12,12) content-size 600x42 children: not-inline
      BlockContainer <div.exekiller> at (14,14) content-size 200x17 positioned children: inline
-        line 0 width: 65.4375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 9, rect: [14,14 65.4375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 9, rect: [14,14 65.4375x17]
            "exekiller"
        TextNode <#text>
      BlockContainer <div.athena> at (24,25) content-size 200x17 positioned children: inline
-        line 0 width: 53.171875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 6, rect: [24,25 53.171875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 6, rect: [24,25 53.171875x17]
            "athena"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/relpos-float.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/relpos-float.txt
@ -2,13 +2,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (2,2) content-size 796x31 [BFC] children: not-inline
    BlockContainer <body> at (12,12) content-size 600x0 children: not-inline
      BlockContainer <div.exekiller> at (14,14) content-size 200x17 positioned floating [BFC] children: inline
-        line 0 width: 65.4375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 9, rect: [14,14 65.4375x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 9, rect: [14,14 65.4375x17]
            "exekiller"
        TextNode <#text>
      BlockContainer <div.athena> at (18,18) content-size 200x17 positioned floating [BFC] children: inline
-        line 0 width: 53.171875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 6, rect: [18,18 53.171875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 6, rect: [18,18 53.171875x17]
            "athena"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/relpos-inline-element-js-offsets.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/relpos-inline-element-js-offsets.txt
@ -2,12 +2,11 @@ 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 784x152 children: not-inline
      BlockContainer <(anonymous)> at (8,8) content-size 784x17 children: inline
-        line 0 width: 136.609375, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.40625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.40625x17]
            "well "
-          frag 1 from TextNode start: 0, length: 6, rect: [44,33 44.84375x17]
+        frag 1 from TextNode start: 0, length: 6, rect: [44,33 44.84375x17] baseline: 13.296875
            "hello "
-          frag 2 from TextNode start: 0, length: 7, rect: [89,58 55.359375x17]
+        frag 2 from TextNode start: 0, length: 7, rect: [89,58 55.359375x17] baseline: 13.296875
            "friends"
        InlineNode <span>
          TextNode <#text>
@ -18,23 +17,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
        TextNode <#text>
      BlockContainer <div> at (8,25) content-size 784x135 children: not-inline
        BlockContainer <(anonymous)> at (8,25) content-size 784x68 children: inline
          line 0 width: 0, height: 17, bottom: 17, baseline: 13.296875
          line 1 width: 0, height: 17, bottom: 34, baseline: 13.296875
          line 2 width: 0, height: 17, bottom: 51, baseline: 13.296875
          line 3 width: 0, height: 17, bottom: 68, baseline: 13.296875
          BreakNode <br>
          BreakNode <br>
          BreakNode <br>
          BreakNode <br>
        BlockContainer <pre#out> at (8,109) content-size 784x51 children: inline
-          line 0 width: 72.421875, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 10, rect: [8,109 72.421875x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 10, rect: [8,109 72.421875x17]
              "well: 0, 0"
-          line 1 width: 96.765625, height: 17, bottom: 34, baseline: 13.296875
+          frag 1 from TextNode start: 11, length: 13, rect: [8,126 96.765625x17] baseline: 13.296875
            frag 0 from TextNode start: 11, length: 13, rect: [8,126 96.765625x17]
              "hello: 36, 25"
-          line 2 width: 113.65625, height: 17, bottom: 51, baseline: 13.296875
+          frag 2 from TextNode start: 25, length: 15, rect: [8,143 113.65625x17] baseline: 13.296875
            frag 0 from TextNode start: 25, length: 15, rect: [8,143 113.65625x17]
              "friends: 45, 25"
          TextNode <#text>
      BlockContainer <(anonymous)> at (8,176) content-size 784x0 children: inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/relpos-inline-elements.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/relpos-inline-elements.txt
@ -1,14 +1,13 @@
 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 784x17 children: inline
-      line 0 width: 98, height: 17, bottom: 17, baseline: 13.296875
+      frag 0 from TextNode start: 0, length: 4, rect: [8,8 35.15625x17] baseline: 13.296875
        frag 0 from TextNode start: 0, length: 4, rect: [8,8 35.15625x17]
          "foo "
-        frag 1 from TextNode start: 0, length: 3, rect: [43,33 27.640625x17]
+      frag 1 from TextNode start: 0, length: 3, rect: [43,33 27.640625x17] baseline: 13.296875
          "bar"
-        frag 2 from TextNode start: 0, length: 1, rect: [71,8 8x17]
+      frag 2 from TextNode start: 0, length: 1, rect: [71,8 8x17] baseline: 13.296875
          " "
-        frag 3 from TextNode start: 0, length: 3, rect: [54,58 27.203125x17]
+      frag 3 from TextNode start: 0, length: 3, rect: [54,58 27.203125x17] baseline: 13.296875
          "baz"
      TextNode <#text>
      InlineNode <b>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/single-br-inline-layout.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/single-br-inline-layout.txt
@ -3,7 +3,6 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x21 children: not-inline
      BlockContainer <div#begin> at (8,8) content-size 784x2 children: not-inline
      BlockContainer <(anonymous)> at (8,10) content-size 784x17 children: inline
        line 0 width: 0, height: 17, bottom: 17, baseline: 13.296875
        BreakNode <br>
      BlockContainer <div#end> at (8,27) content-size 784x2 children: not-inline
--- a/Tests/LibWeb/Layout/expected/block-and-inline/small-percentage-margin.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/small-percentage-margin.txt
@ -2,23 +2,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x208 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x0 children: not-inline
      BlockContainer <div> at (15.828125,8) content-size 376.3125x100 floating [BFC] children: inline
-        line 0 width: 27.703125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [15.828125,8 27.703125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [15.828125,8 27.703125x17]
            "abc"
        TextNode <#text>
      BlockContainer <div> at (407.796875,8) content-size 376.3125x100 floating [BFC] children: inline
-        line 0 width: 23.015625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [407.796875,8 23.015625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [407.796875,8 23.015625x17]
            "def"
        TextNode <#text>
      BlockContainer <div> at (15.828125,108) content-size 376.3125x100 floating [BFC] children: inline
-        line 0 width: 21.421875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [15.828125,108 21.421875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [15.828125,108 21.421875x17]
            "ghi"
        TextNode <#text>
      BlockContainer <div> at (407.796875,108) content-size 376.3125x100 floating [BFC] children: inline
-        line 0 width: 18.40625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 3, rect: [407.796875,108 18.40625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 3, rect: [407.796875,108 18.40625x17]
            "jkl"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/block-and-inline/width-auto-margins-set-zero-if-containing-size-smaller.txt
+++ b/Tests/LibWeb/Layout/expected/block-and-inline/width-auto-margins-set-zero-if-containing-size-smaller.txt
@ -3,14 +3,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (10,10) content-size 102x55 positioned [BFC] children: not-inline
      BlockContainer <div#container> at (11,11) content-size 100x53 children: not-inline
        BlockContainer <div#child> at (72,12) content-size 50x51 children: inline
-          line 0 width: 28.40625, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 4, rect: [72,12 28.40625x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 4, rect: [72,12 28.40625x17]
              "well"
-          line 1 width: 36.84375, height: 17, bottom: 34, baseline: 13.296875
+          frag 1 from TextNode start: 5, length: 5, rect: [72,29 36.84375x17] baseline: 13.296875
            frag 0 from TextNode start: 5, length: 5, rect: [72,29 36.84375x17]
              "hello"
-          line 2 width: 55.359375, height: 17, bottom: 51, baseline: 13.296875
+          frag 2 from TextNode start: 11, length: 7, rect: [72,46 55.359375x17] baseline: 13.296875
            frag 0 from TextNode start: 11, length: 7, rect: [72,46 55.359375x17]
              "friends"
          TextNode <#text>
--- 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,12 +1,10 @@
 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
-      line 0 width: 89.71875, height: 51, bottom: 51, baseline: 17
+      frag 0 from Box start: 0, length: 0, rect: [28,39 49.71875x0] baseline: 6
        frag 0 from Box start: 0, length: 0, rect: [28,39 49.71875x0]
      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
-          line 0 width: 49.71875, height: 22, bottom: 22, baseline: 17
+          frag 0 from TextNode start: 0, length: 5, rect: [28,28 49.71875x22] baseline: 17
            frag 0 from TextNode start: 0, length: 5, rect: [28,28 49.71875x22]
              "Hello"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/br-should-not-generate-pseudo-before.txt
+++ b/Tests/LibWeb/Layout/expected/br-should-not-generate-pseudo-before.txt
@ -2,18 +2,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x83 [BFC] children: not-inline
    BlockContainer <body> at (8,16) content-size 784x67 children: not-inline
      BlockContainer <p> at (8,16) content-size 784x17 children: inline
-        line 0 width: 310.625, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 1, rect: [8,16 10.625x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 1, rect: [8,16 10.625x17]
            "+"
-          frag 1 from TextNode start: 0, length: 36, rect: [19,16 300x17]
+        frag 1 from TextNode start: 0, length: 36, rect: [19,16 300x17] baseline: 13.296875
            "P should generate a ::before pseudo."
        InlineNode <(anonymous)>
          TextNode <#text>
        TextNode <#text>
      BlockContainer <(anonymous)> at (8,49) content-size 784x34 children: inline
-        line 0 width: 0, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 14, rect: [8,66 120.578125x17] baseline: 13.296875
        line 1 width: 120.578125, height: 17, bottom: 34, baseline: 13.296875
          frag 0 from TextNode start: 0, length: 14, rect: [8,66 120.578125x17]
            "BR should not!"
        BreakNode <br>
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/calc-font-size-with-percentages.txt
+++ b/Tests/LibWeb/Layout/expected/calc-font-size-with-percentages.txt
@ -2,11 +2,9 @@ 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 784x104 children: not-inline
      BlockContainer <div.test> at (8,8) content-size 784x104 children: inline
-        line 0 width: 500.8125, height: 52, bottom: 52, baseline: 40.390625
+        frag 0 from TextNode start: 0, length: 20, rect: [8,8 500.8125x52] baseline: 40.390625
          frag 0 from TextNode start: 0, length: 20, rect: [8,8 500.8125x52]
            "i resolved enough of"
-        line 1 width: 406.40625, height: 52, bottom: 104, baseline: 40.390625
+        frag 1 from TextNode start: 21, length: 16, rect: [8,60 406.40625x52] baseline: 40.390625
          frag 0 from TextNode start: 21, length: 16, rect: [8,60 406.40625x52]
            "percentages, no?"
        TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/calc-with-fr.txt
+++ b/Tests/LibWeb/Layout/expected/calc-with-fr.txt
@ -3,18 +3,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
    BlockContainer <body> at (8,8) content-size 784x51 children: not-inline
      Box <div.container> at (8,8) content-size 784x51 [GFC] children: not-inline
        BlockContainer <div> at (8,8) content-size 784x17 [BFC] children: inline
-          line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17]
              "1"
          TextNode <#text>
        BlockContainer <div> at (8,25) content-size 784x17 [BFC] children: inline
-          line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,25 8.8125x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [8,25 8.8125x17]
              "2"
          TextNode <#text>
        BlockContainer <div> at (8,42) content-size 784x17 [BFC] children: inline
-          line 0 width: 9.09375, height: 17, bottom: 17, baseline: 13.296875
+          frag 0 from TextNode start: 0, length: 1, rect: [8,42 9.09375x17] baseline: 13.296875
            frag 0 from TextNode start: 0, length: 1, rect: [8,42 9.09375x17]
              "3"
          TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/css-all-unset.txt
+++ b/Tests/LibWeb/Layout/expected/css-all-unset.txt
@ -1,8 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: inline
-  line 0 width: 238.125, height: 17, bottom: 17, baseline: 13.296875
+  frag 0 from TextNode start: 1, length: 18, rect: [0,0 134.984375x17] baseline: 13.296875
    frag 0 from TextNode start: 1, length: 18, rect: [0,0 134.984375x17]
      "* { all: unset; } "
-    frag 1 from TextNode start: 0, length: 13, rect: [135,0 103.140625x17]
+  frag 1 from TextNode start: 0, length: 13, rect: [135,0 103.140625x17] baseline: 13.296875
      "Hello friends"
  InlineNode <html>
    InlineNode <head>
--- a/Tests/LibWeb/Layout/expected/css-dir-selector.txt
+++ b/Tests/LibWeb/Layout/expected/css-dir-selector.txt
@ -2,81 +2,65 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (100,0) content-size 700x832 [BFC] children: not-inline
    BlockContainer <body> at (200,8) content-size 592x816 children: not-inline
      BlockContainer <div> at (301,9) content-size 100x100 children: inline
-        line 0 width: 79.96875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 11, rect: [301,9 79.96875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 11, rect: [301,9 79.96875x17]
            "Well, hello"
-        line 1 width: 59.21875, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 12, length: 8, rect: [301,26 59.21875x17] baseline: 13.296875
          frag 0 from TextNode start: 12, length: 8, rect: [301,26 59.21875x17]
            "friends!"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,110) content-size 592x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (301,111) content-size 100x100 children: inline
-        line 0 width: 79.96875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 11, rect: [301,111 79.96875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 11, rect: [301,111 79.96875x17]
            "Well, hello"
-        line 1 width: 59.21875, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 12, length: 8, rect: [301,128 59.21875x17] baseline: 13.296875
          frag 0 from TextNode start: 12, length: 8, rect: [301,128 59.21875x17]
            "friends!"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,212) content-size 592x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (401,213) content-size 100x100 children: inline
-        line 0 width: 79.96875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 11, rect: [401,213 79.96875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 11, rect: [401,213 79.96875x17]
            "Well, hello"
-        line 1 width: 59.21875, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 12, length: 8, rect: [401,230 59.21875x17] baseline: 13.296875
          frag 0 from TextNode start: 12, length: 8, rect: [401,230 59.21875x17]
            "friends!"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,314) content-size 592x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (301,315) content-size 100x100 children: inline
-        line 0 width: 79.96875, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 11, rect: [301,315 79.96875x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 11, rect: [301,315 79.96875x17]
            "Well, hello"
-        line 1 width: 59.21875, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 12, length: 8, rect: [301,332 59.21875x17] baseline: 13.296875
          frag 0 from TextNode start: 12, length: 8, rect: [301,332 59.21875x17]
            "friends!"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,416) content-size 592x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (301,417) content-size 100x100 children: inline
-        line 0 width: 86.125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 26, rect: [301,417 86.125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 26, rect: [301,417 86.125x17]
            "حسنًا ، مرحباً"
-        line 1 width: 78.125, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 27, length: 25, rect: [301,434 78.125x17] baseline: 13.296875
          frag 0 from TextNode start: 27, length: 25, rect: [301,434 78.125x17]
            "أيها الأصدقاء"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,518) content-size 592x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (301,519) content-size 100x100 children: inline
-        line 0 width: 86.125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 26, rect: [301,519 86.125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 26, rect: [301,519 86.125x17]
            "حسنًا ، مرحباً"
-        line 1 width: 78.125, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 27, length: 25, rect: [301,536 78.125x17] baseline: 13.296875
          frag 0 from TextNode start: 27, length: 25, rect: [301,536 78.125x17]
            "أيها الأصدقاء"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,620) content-size 592x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (401,621) content-size 100x100 children: inline
-        line 0 width: 86.125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 26, rect: [401,621 86.125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 26, rect: [401,621 86.125x17]
            "حسنًا ، مرحباً"
-        line 1 width: 78.125, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 27, length: 25, rect: [401,638 78.125x17] baseline: 13.296875
          frag 0 from TextNode start: 27, length: 25, rect: [401,638 78.125x17]
            "أيها الأصدقاء"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,722) content-size 592x0 children: inline
        TextNode <#text>
      BlockContainer <div> at (401,723) content-size 100x100 children: inline
-        line 0 width: 86.125, height: 17, bottom: 17, baseline: 13.296875
+        frag 0 from TextNode start: 0, length: 26, rect: [401,723 86.125x17] baseline: 13.296875
          frag 0 from TextNode start: 0, length: 26, rect: [401,723 86.125x17]
            "حسنًا ، مرحباً"
-        line 1 width: 78.125, height: 17, bottom: 34, baseline: 13.296875
+        frag 1 from TextNode start: 27, length: 25, rect: [401,740 78.125x17] baseline: 13.296875
          frag 0 from TextNode start: 27, length: 25, rect: [401,740 78.125x17]
            "أيها الأصدقاء"
        TextNode <#text>
      BlockContainer <(anonymous)> at (200,824) content-size 592x0 children: inline
--- a/Tests/LibWeb/Layout/expected/css-font-size-calc.txt
+++ b/Tests/LibWeb/Layout/expected/css-font-size-calc.txt
@ -1,8 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  BlockContainer <html> at (0,0) content-size 800x125 [BFC] children: not-inline
    BlockContainer <body> at (8,8) content-size 784x109 children: inline
-      line 0 width: 644.625, height: 109, bottom: 109, baseline: 84.484375
+      frag 0 from TextNode start: 0, length: 13, rect: [8,8 644.625x109] baseline: 84.484375
        frag 0 from TextNode start: 0, length: 13, rect: [8,8 644.625x109]
          "Hello friends"
      TextNode <#text>
--- a/Tests/LibWeb/Layout/expected/css-font-size-math.txt
+++ b/Tests/LibWeb/Layout/expected/css-font-size-math.txt
@ -1,16 +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 784x79 children: inline
-      line 0 width: 78.9375, height: 79, bottom: 79, baseline: 61.09375
+      frag 0 from TextNode start: 0, length: 1, rect: [8,25 39.09375x56] baseline: 43.328125
        frag 0 from TextNode start: 0, length: 1, rect: [8,25 39.09375x56]
          "H"
-        frag 1 from TextNode start: 0, length: 1, rect: [47,38 19.78125x40]
+      frag 1 from TextNode start: 0, length: 1, rect: [47,38 19.78125x40] baseline: 30.875
          "e"
-        frag 2 from TextNode start: 0, length: 1, rect: [67,47 6.8125x28]
+      frag 2 from TextNode start: 0, length: 1, rect: [67,47 6.8125x28] baseline: 21.71875
          "l"
-        frag 3 from TextNode start: 0, length: 1, rect: [74,53 4.84375x20]
+      frag 3 from TextNode start: 0, length: 1, rect: [74,53 4.84375x20] baseline: 15.484375
          "l"
-        frag 4 from TextNode start: 0, length: 1, rect: [79,58 8.40625x14]
+      frag 4 from TextNode start: 0, length: 1, rect: [79,58 8.40625x14] baseline: 10.890625
          "o"
      InlineNode <span>
        TextNode <#text>
--- a/Show more
+++ b/Show more