1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 05:37:44 +00:00

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.
This commit is contained in:
Andreas Kling 2023-05-03 10:32:23 +02:00
parent 42e118e6a9
commit 968db96101
117 changed files with 905 additions and 851 deletions

View file

@ -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"

View file

@ -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

View file

@ -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

View file

@ -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]

View file

@ -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

View file

@ -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