1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 22:17: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,10 +1,10 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x62.506248 children: not-inline
BlockContainer <html> at (1,1) content-size 798x62.506248 [BFC] children: not-inline
BlockContainer <body> at (2,2) content-size 796x60.506248 children: inline
line 0 width: 34, height: 28.50625, bottom: 28.50625, baseline: 28.50625
frag 0 from BlockContainer start: 0, length: 0, rect: [4,3 30x30]
line 1 width: 32, height: 28.506248, bottom: 60.506248, baseline: 28.50625
frag 0 from BlockContainer start: 0, length: 0, rect: [3,35 30x30]
BlockContainer <div.clump> at (4,3) content-size 30x30 inline-block children: not-inline
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 children: not-inline
BlockContainer <div.clump> at (3,35) content-size 30x30 inline-block [BFC] children: not-inline

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x108 children: not-inline
BlockContainer <html> at (0,0) content-size 800x108 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x34.9375 children: not-inline
@ -7,9 +7,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
line 0 width: 27.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [137,8 27.640625x17.46875]
"bar"
BlockContainer <div.big-float> at (8,8) content-size 100x100 floating children: not-inline
BlockContainer <div.big-float> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.xxx> at (108,8) content-size 29.109375x17.46875 floating children: inline
BlockContainer <div.xxx> at (108,8) content-size 29.109375x17.46875 floating [BFC] children: inline
line 0 width: 29.109375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [108,8 29.109375x17.46875]
"xxx"
@ -20,7 +20,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from TextNode start: 1, length: 3, rect: [130,25.46875 27.203125x17.46875]
"baz"
TextNode <#text>
BlockContainer <div.yyy> at (108,25.46875) content-size 21.515625x17.46875 floating children: inline
BlockContainer <div.yyy> at (108,25.46875) content-size 21.515625x17.46875 floating [BFC] children: inline
line 0 width: 21.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [108,25.46875 21.515625x17.46875]
"yyy"

View file

@ -1,10 +1,10 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x150 children: not-inline
BlockContainer <html> at (0,0) content-size 800x150 [BFC] children: not-inline
BlockContainer <body> at (0,0) content-size 200x0 children: not-inline
BlockContainer <ul> at (0,0) content-size 200x0 children: inline
BlockContainer <div.red> at (0,0) content-size 150x50 floating children: not-inline
BlockContainer <div.green> at (0,50) content-size 150x50 floating children: not-inline
BlockContainer <div.red> at (0,0) content-size 150x50 floating [BFC] children: not-inline
BlockContainer <div.green> at (0,50) content-size 150x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.orange> at (0,100) content-size 150x50 floating children: not-inline
BlockContainer <div.orange> at (0,100) content-size 150x50 floating [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 200x0 children: inline
TextNode <#text>

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x106 children: not-inline
BlockContainer <html> at (1,1) content-size 798x106 [BFC] children: not-inline
BlockContainer <(anonymous)> at (1,1) content-size 798x0 children: inline
TextNode <#text>
BlockContainer <body> at (2,2) content-size 400x2 children: not-inline
@ -7,11 +7,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <div.ul> at (3,3) content-size 398x0 children: inline
TextNode <#text>
BlockContainer <div.yellow> at (4,4) content-size 60x50 floating children: not-inline
BlockContainer <div.yellow> at (4,4) content-size 60x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.orange> at (66,4) content-size 250x50 floating children: not-inline
BlockContainer <div.orange> at (66,4) content-size 250x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (2,4) content-size 400x0 children: inline
TextNode <#text>
BlockContainer <div.green> at (3,56) content-size 100x50 floating children: not-inline
BlockContainer <div.green> at (3,56) content-size 100x50 floating [BFC] children: not-inline
TextNode <#text>

View file

@ -1,15 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x157 children: not-inline
BlockContainer <html> at (0,0) content-size 800x157 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x100 children: not-inline
BlockContainer <div> at (8,8) content-size 784x100 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating children: not-inline
BlockContainer <div.square.white> at (8,8) content-size 100x100 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.clearfix> at (8,108) content-size 784x0 children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.square.black> at (8,108) content-size 49x49 floating children: not-inline
BlockContainer <div.square.black> at (8,108) content-size 49x49 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,108) content-size 784x0 children: inline
TextNode <#text>

View file

@ -1,17 +1,17 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x348.34375 children: not-inline
BlockContainer <html> at (0,0) content-size 800x348.34375 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x332.34375 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#lefty> at (8,8) content-size 100x100 floating children: inline
BlockContainer <div#lefty> at (8,8) content-size 100x100 floating [BFC] children: inline
line 0 width: 10.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 10.859375x17.46875]
"L"
TextNode <#text>
TextNode <#text>
BlockContainer <div#righty> at (742,8) content-size 50x50 floating children: inline
BlockContainer <div#righty> at (742,8) content-size 50x50 floating [BFC] children: inline
line 0 width: 13.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [742,8 13.6875x17.46875]
"R"
@ -21,13 +21,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#lefty2> at (108,8) content-size 80x80 floating children: inline
BlockContainer <div#lefty2> at (108,8) content-size 80x80 floating [BFC] children: inline
line 0 width: 19.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [108,8 19.671875x17.46875]
"L2"
TextNode <#text>
TextNode <#text>
BlockContainer <div#righty2> at (712,8) content-size 30x30 floating children: inline
BlockContainer <div#righty2> at (712,8) content-size 30x30 floating [BFC] children: inline
line 0 width: 22.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [712,8 22.5x17.46875]
"R2"
@ -37,13 +37,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#lefty3> at (188,8) content-size 40x40 floating children: inline
BlockContainer <div#lefty3> at (188,8) content-size 40x40 floating [BFC] children: inline
line 0 width: 19.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [188,8 19.953125x17.46875]
"L3"
TextNode <#text>
TextNode <#text>
BlockContainer <div#righty3> at (692,8) content-size 20x20 floating children: inline
BlockContainer <div#righty3> at (692,8) content-size 20x20 floating [BFC] children: inline
line 0 width: 22.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [692,8 22.78125x17.46875]
"R3"

View file

@ -1,11 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x60 children: not-inline
BlockContainer <html> at (0,0) content-size 800x60 [BFC] children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#b> at (9,9) content-size 50x50 floating children: not-inline
BlockContainer <div#b> at (9,9) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div#a> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 37.578125, height: 17.46875, bottom: 17.46875, baseline: 13.53125

View file

@ -1,13 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x135.46875 children: not-inline
BlockContainer <html> at (0,0) content-size 800x135.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 780x119.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 780x0 children: inline
TextNode <#text>
BlockContainer <div#top> at (8,8) content-size 780x100 children: inline
BlockContainer <div#top> at (8,8) content-size 780x100 [BFC] children: inline
TextNode <#text>
BlockContainer <div#top-left.box> at (8,8) content-size 300x100 floating children: not-inline
BlockContainer <div#top-left.box> at (8,8) content-size 300x100 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div#top-right.box> at (488,8) content-size 300x100 floating children: not-inline
BlockContainer <div#top-right.box> at (488,8) content-size 300x100 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,108) content-size 780x0 children: inline
TextNode <#text>

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
BlockContainer <html> at (0,0) content-size 800x268 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
@ -65,15 +65,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from TextNode start: 125, length: 19, rect: [9,269 168.84375x16]
"bar baz foo bar baz"
TextNode <#text>
BlockContainer <div.lefty> at (10,10) content-size 50x50 floating children: not-inline
BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.one> at (62,26) content-size 200x50 floating children: not-inline
BlockContainer <div.one> at (62,26) content-size 200x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.two> at (108,78) content-size 200x50 floating children: not-inline
BlockContainer <div.two> at (108,78) content-size 200x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.righty> at (76,126) content-size 30x30 floating children: not-inline
BlockContainer <div.righty> at (76,126) content-size 30x30 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.lefty.shwifty> at (10,174) content-size 50x50 floating children: not-inline
BlockContainer <div.lefty.shwifty> at (10,174) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.righty> at (278,190) content-size 30x30 floating children: not-inline
BlockContainer <div.righty> at (278,190) content-size 30x30 floating [BFC] children: not-inline
TextNode <#text>

View file

@ -1,14 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html.js> at (0,0) content-size 800x200 children: not-inline
BlockContainer <html.js> at (0,0) content-size 800x200 [BFC] children: not-inline
BlockContainer <body> at (0,0) content-size 800x50 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 children: inline
BlockContainer <article.first> at (50,50) content-size 300x100 floating children: 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.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [50,50 36.03125x17.46875]
"first"
TextNode <#text>
BlockContainer <article.second> at (50,150) content-size 200x50 floating children: inline
BlockContainer <article.second> at (50,150) content-size 200x50 floating [BFC] children: inline
line 0 width: 54.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [50,150 54.78125x17.46875]
"second"

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
BlockContainer <html> at (0,0) content-size 800x268 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
@ -8,9 +8,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
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 children: not-inline
BlockContainer <div.lefty> at (10,10) content-size 50x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.one> at (62,26) content-size 200x50 floating children: not-inline
BlockContainer <div.one> at (62,26) content-size 200x50 floating [BFC] children: not-inline
TextNode <#text>
BlockContainer <div.two> at (108,78) content-size 200x50 floating children: not-inline
BlockContainer <div.two> at (108,78) content-size 200x50 floating [BFC] children: not-inline
TextNode <#text>

View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x61 children: not-inline
BlockContainer <html> at (1,1) content-size 798x61 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x19.46875 children: not-inline
BlockContainer <div.thumbnail> at (11,11) content-size 50x50 floating 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.46875 children: inline
line 0 width: 125.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 14, rect: [91,11 125.125x17.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 800x36 children: not-inline
BlockContainer <html> at (0,0) content-size 800x36 [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.53125
frag 0 from TextNode start: 0, length: 14, rect: [8,8 112.421875x17.46875]
@ -8,7 +8,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 2 from TextNode start: 0, length: 16, rect: [231,8 129.546875x17.46875]
"more inline text"
TextNode <#text>
BlockContainer <span.displaced_text> at (150,48) content-size 110.375x20 positioned inline-block children: inline
BlockContainer <span.displaced_text> at (150,48) content-size 110.375x20 positioned inline-block [BFC] children: inline
line 0 width: 110.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 14, rect: [150,48 110.375x17.46875]
"displaced text"

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x191 children: not-inline
BlockContainer <html> at (0,0) content-size 800x191 [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.53125
frag 0 from TextNode start: 0, length: 6, rect: [8,8 43.125x17.46875]
@ -8,5 +8,5 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 2 from TextNode start: 0, length: 9, rect: [151,8 67.703125x17.46875]
" friends."
TextNode <#text>
BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block children: not-inline
BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block [BFC] children: not-inline
TextNode <#text>

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x194.46875 children: not-inline
BlockContainer <html> at (0,0) content-size 800x194.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x178.46875 children: inline
line 0 width: 210.828125, height: 178.46875, bottom: 178.46875, baseline: 175
frag 0 from TextNode start: 0, length: 6, rect: [8,169 43.125x17.46875]
@ -8,5 +8,5 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 2 from TextNode start: 0, length: 9, rect: [151,169 67.703125x17.46875]
" friends."
TextNode <#text>
BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block children: not-inline
BlockContainer <div#inline-box> at (51,58) content-size 100x100 inline-block [BFC] children: not-inline
TextNode <#text>

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x52 children: not-inline
BlockContainer <body> at (10,10) content-size 104x34 floating children: not-inline
BlockContainer <html> at (1,1) content-size 798x52 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 104x34 floating [BFC] children: not-inline
BlockContainer <div.outer> at (11,11) content-size 102x32 children: not-inline
BlockContainer <div.inner> at (12,12) content-size 100x30 children: not-inline

View file

@ -1,9 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x76 children: not-inline
BlockContainer <html> at (0,0) content-size 800x76 [BFC] 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]
BlockContainer <div.tab> at (8,38) content-size 200x30 inline-block children: not-inline
BlockContainer <div.timeline> at (592,38) content-size 200x30 floating children: not-inline
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

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x262 children: not-inline
BlockContainer <html> at (0,0) content-size 800x262 [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.46875, bottom: 17.46875, baseline: 13.53125

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x352 children: not-inline
BlockContainer <html> at (0,0) content-size 800x352 [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.46875, bottom: 17.46875, baseline: 13.53125

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x366 children: not-inline
BlockContainer <html> at (0,0) content-size 800x366 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x350 children: not-inline
BlockContainer <div#foo> at (8,8) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,133) content-size 784x0 children: inline

View file

@ -1,5 +1,5 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x166 children: not-inline
BlockContainer <html> at (0,0) content-size 800x166 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x150 children: not-inline
BlockContainer <div#foo> at (8,8) content-size 100x50 children: not-inline
BlockContainer <div#baz> at (8,8) content-size 50x50 children: not-inline

View file

@ -1,8 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x134.46875 children: inline
BlockContainer <html> at (1,1) content-size 798x134.46875 [BFC] children: inline
line 0 width: 170.96875, height: 134.46875, bottom: 134.46875, baseline: 13.53125
frag 0 from BlockContainer start: 0, length: 0, rect: [2,15 168.96875x119.46875]
BlockContainer <body> at (2,15) content-size 168.96875x119.46875 inline-block children: not-inline
BlockContainer <body> at (2,15) content-size 168.96875x119.46875 inline-block [BFC] children: not-inline
BlockContainer <div.hmm> at (3,16) content-size 166.96875x17.46875 children: inline
line 0 width: 166.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 21, rect: [3,16 166.96875x17.46875]

View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x39.46875 children: not-inline
Box <body.outer> at (10,10) content-size 764x21.46875 flex-container(row) children: not-inline
BlockContainer <div.middle> at (11,11) content-size 202x19.46875 flex-item children: not-inline
BlockContainer <html> at (1,1) content-size 798x39.46875 [BFC] children: not-inline
Box <body.outer> at (10,10) content-size 764x21.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div.middle> at (11,11) content-size 202x19.46875 flex-item [BFC] children: not-inline
BlockContainer <div.inner> at (12,12) content-size 200x17.46875 children: inline
line 0 width: 45.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [12,12 45.15625x17.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 800x37.46875 children: not-inline
BlockContainer <html> at (0,0) content-size 800x37.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21.46875 children: not-inline
BlockContainer <div#begin> at (8,8) content-size 784x2 children: not-inline
BlockContainer <(anonymous)> at (8,10) content-size 784x17.46875 children: inline