LibWeb: Show formatting context roots in layout tree dumps

This patch does three things: - Factors out the code that determines whether a box will create a new formatting context for its children (and which type of context) - Uses that code to mark all formatting context roots in layout tree dumps. This makes it much easier to follow along with layout since you can now see exactly where control is transferred to a new formatting context. - Rebaselines all existing layout tests, since the output format has changed slightly.
2025-07-28 05:37:44 +00:00 · 2023-05-03 10:32:23 +02:00 · 2023-05-03 10:32:23 +02:00 · 968db96101
commit 968db96101
parent 42e118e6a9
117 changed files with 905 additions and 851 deletions
--- a/Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt
+++ b/Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt
@ -1,8 +1,8 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x245.09375 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x245.09375 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x227.09375 children: not-inline
-      Box <div.outer.flex.flex-wrap> at (11,11) content-size 778x225.09375 flex-container(row) children: not-inline
-        BlockContainer <div.inner> at (12,62) content-size 776x123.09375 flex-item children: inline
+      Box <div.outer.flex.flex-wrap> at (11,11) content-size 778x225.09375 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div.inner> at (12,62) content-size 776x123.09375 flex-item [BFC] children: inline
          line 0 width: 741.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
            frag 0 from TextNode start: 0, length: 90, rect: [12,62 741.640625x17.46875]
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum libero et urna"
--- a/Tests/LibWeb/Layout/expected/flex/flex-gap-between-items-and-lines.txt
+++ b/Tests/LibWeb/Layout/expected/flex/flex-gap-between-items-and-lines.txt
@ -1,12 +1,12 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x268 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x268 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x250 children: not-inline
-      Box <div.flexbox> at (11,11) content-size 100x248 flex-container(row) children: not-inline
-        BlockContainer <div> at (12,12) content-size 30x30 flex-item children: not-inline
-        BlockContainer <div> at (64,12) content-size 30x30 flex-item children: not-inline
-        BlockContainer <div> at (12,84) content-size 30x30 flex-item children: not-inline
-        BlockContainer <div> at (64,84) content-size 30x30 flex-item children: not-inline
-        BlockContainer <div> at (12,156) content-size 30x30 flex-item children: not-inline
-        BlockContainer <div> at (64,156) content-size 30x30 flex-item children: not-inline
-        BlockContainer <div> at (12,228) content-size 30x30 flex-item children: not-inline
-        BlockContainer <div> at (64,228) content-size 30x30 flex-item children: not-inline
+      Box <div.flexbox> at (11,11) content-size 100x248 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (12,12) content-size 30x30 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (64,12) content-size 30x30 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (12,84) content-size 30x30 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (64,84) content-size 30x30 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (12,156) content-size 30x30 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (64,156) content-size 30x30 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (12,228) content-size 30x30 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (64,228) content-size 30x30 flex-item [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/flex/multi-line-column-container-with-automatic-height.txt
+++ b/Tests/LibWeb/Layout/expected/flex/multi-line-column-container-with-automatic-height.txt
@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x176 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x176 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x158 children: not-inline
-      Box <div.flexbox> at (11,11) content-size 200x156 flex-container(column) children: not-inline
-        BlockContainer <div> at (12,12) content-size 50x50 flex-item children: not-inline
-        BlockContainer <div> at (12,64) content-size 50x50 flex-item children: not-inline
-        BlockContainer <div> at (12,116) content-size 50x50 flex-item children: not-inline
+      Box <div.flexbox> at (11,11) content-size 200x156 flex-container(column) [FFC] children: not-inline
+        BlockContainer <div> at (12,12) content-size 50x50 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (12,64) content-size 50x50 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (12,116) content-size 50x50 flex-item [BFC] children: not-inline
--- a/Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt
+++ b/Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt
@ -1,7 +1,7 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x33.46875 children: not-inline
-    Box <body.outer> at (8,8) content-size 200x17.46875 flex-container(column) children: not-inline
-      BlockContainer <div.middle> at (8,8) content-size 200x17.46875 flex-item children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
+    Box <body.outer> at (8,8) content-size 200x17.46875 flex-container(column) [FFC] children: not-inline
+      BlockContainer <div.middle> at (8,8) content-size 200x17.46875 flex-item [BFC] children: not-inline
        BlockContainer <div.inner> at (8,8) content-size 200x17.46875 children: inline
          line 0 width: 174.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
            frag 0 from TextNode start: 0, length: 20, rect: [8,8 174.234375x17.46875]
--- a/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt
+++ b/Tests/LibWeb/Layout/expected/flex/specified-size-suggestion-with-box-sizing-border-box.txt
@ -1,5 +1,5 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (0,0) content-size 800x100 children: not-inline
-    Box <body> at (0,0) content-size 800x100 flex-container(row) children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x100 [BFC] children: not-inline
+    Box <body> at (0,0) content-size 800x100 flex-container(row) [FFC] children: not-inline
      ImageBox <img> at (0,0) content-size 400x100 flex-item children: not-inline
      ImageBox <img.padded> at (600,0) content-size 200x100 flex-item children: not-inline
--- a/Tests/LibWeb/Layout/expected/flex/stretch-alignment-with-cross-gap.txt
+++ b/Tests/LibWeb/Layout/expected/flex/stretch-alignment-with-cross-gap.txt
@ -1,10 +1,10 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
-  BlockContainer <html> at (1,1) content-size 798x220 children: not-inline
+  BlockContainer <html> at (1,1) content-size 798x220 [BFC] children: not-inline
    BlockContainer <body> at (10,10) content-size 780x202 children: not-inline
-      Box <div.flex> at (11,11) content-size 300x200 flex-container(row) children: not-inline
-        BlockContainer <div> at (12,12) content-size 100x20 flex-item children: not-inline
-        BlockContainer <div> at (114,12) content-size 100x20 flex-item children: not-inline
-        BlockContainer <div> at (12,95.333328) content-size 100x20 flex-item children: not-inline
-        BlockContainer <div> at (114,95.333328) content-size 100x20 flex-item children: not-inline
-        BlockContainer <div> at (12,178.666656) content-size 100x20 flex-item children: not-inline
-        BlockContainer <div> at (114,178.666656) content-size 100x20 flex-item children: not-inline
+      Box <div.flex> at (11,11) content-size 300x200 flex-container(row) [FFC] children: not-inline
+        BlockContainer <div> at (12,12) content-size 100x20 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (114,12) content-size 100x20 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (12,95.333328) content-size 100x20 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (114,95.333328) content-size 100x20 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (12,178.666656) content-size 100x20 flex-item [BFC] children: not-inline
+        BlockContainer <div> at (114,178.666656) content-size 100x20 flex-item [BFC] children: not-inline