RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 04:27:45 +00:00
Code Issues Activity Actions

LibWeb: Bring CSS line-height closer to other engines

Browse source 
This patch makes a few changes to the way we calculate line-height:

- `line-height: normal` is now resolved using metrics from the used
  font (specifically, round(A + D + lineGap)).

- `line-height: calc(...)` is now resolved at style compute time.

- `line-height` values are now absolutized at style compute time.

As a consequence of the above, we no longer need to walk the DOM
ancestor chain looking for line-heights during style computation.
Instead, values are inherited, resolved and absolutized locally.

This is not only much faster, but also makes our line-height metrics
match those of other engines like Gecko and Blink.
This commit is contained in:
Andreas Kling 2024-01-12 12:39:40 +01:00
parent f0722671c3
commit e7de5cb4d2
385 changed files with 6889 additions and 6893 deletions
Download patch file Download diff file Expand all files Collapse all files

36
Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-align-items.txt
View file

@ -5,72 +5,72 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
Box <div.outer.normal> at (38,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (48,48) content-size 150x50 positioned [BFC] children: inline
line 0 width: 54.578125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [48,48 54.578125x17.46875]
line 0 width: 54.578125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [48,48 54.578125x17]
"normal"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.stretch> at (208,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (218,48) content-size 150x50 positioned [BFC] children: inline
line 0 width: 58.796875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [218,48 58.796875x17.46875]
line 0 width: 58.796875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 7, rect: [218,48 58.796875x17]
"stretch"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.start> at (378,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (388,48) content-size 150x50 positioned [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [388,48 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [388,48 41.234375x17]
"start"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.flex-start> at (548,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (558,48) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [558,48 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [558,48 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.end> at (38,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (48,308) content-size 150x50 positioned [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [48,308 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [48,308 26.1875x17]
"end"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.flex-end> at (208,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (218,308) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [218,308 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [218,308 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.center> at (378,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (388,258) content-size 150x50 positioned [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [388,258 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [388,258 51.625x17]
"center"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.self-start> at (548,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (558,218) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [558,218 76.453125x17.46875]
line 0 width: 76.453125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [558,218 76.453125x17]
"self-start"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.self-end> at (38,378) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (48,478) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [48,478 61.40625x17.46875]
line 0 width: 61.40625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [48,478 61.40625x17]
"self-end"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline

128
Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-justify-content.txt
View file

@ -5,256 +5,256 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
Box <div.row.outer.start> at (53,53) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (68,68) content-size 150x50 positioned [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [68,68 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [68,68 41.234375x17]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,128) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.flex-start> at (53,143) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (68,158) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [68,158 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [68,158 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,218) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.end> at (53,233) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (188,248) content-size 150x50 positioned [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [188,248 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [188,248 26.1875x17]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,308) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.flex-end> at (53,323) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (188,338) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [188,338 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [188,338 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,398) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.center> at (53,413) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (128,428) content-size 150x50 positioned [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [128,428 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [128,428 51.625x17]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (38,488) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.space-around> at (53,503) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (128,518) content-size 150x50 positioned [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [128,518 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [128,518 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (38,578) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.space-between> at (53,593) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (68,608) content-size 150x50 positioned [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [68,608 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [68,608 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (38,668) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.space-evenly> at (53,683) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (128,698) content-size 150x50 positioned [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [128,698 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [128,698 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (38,758) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.start> at (53,773) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,788) content-size 150x50 positioned [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [68,788 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [68,788 41.234375x17]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,848) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.flex-start> at (53,863) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (188,878) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [188,878 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [188,878 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,938) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.end> at (53,953) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (188,968) content-size 150x50 positioned [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [188,968 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [188,968 26.1875x17]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1028) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.flex-end> at (53,1043) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,1058) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [68,1058 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [68,1058 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1118) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.center> at (53,1133) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (128,1148) content-size 150x50 positioned [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [128,1148 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [128,1148 51.625x17]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1208) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.space-around> at (53,1223) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (128,1238) content-size 150x50 positioned [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [128,1238 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [128,1238 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1298) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.space-between> at (53,1313) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (188,1328) content-size 150x50 positioned [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [188,1328 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [188,1328 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1388) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.space-evenly> at (53,1403) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (128,1418) content-size 150x50 positioned [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [128,1418 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [128,1418 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1478) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.start> at (53,1493) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1508) content-size 150x50 positioned [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [68,1508 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [68,1508 41.234375x17]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1568) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-start> at (53,1583) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1598) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [68,1598 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [68,1598 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1658) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.end> at (53,1673) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1668) content-size 150x50 positioned [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [68,1668 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [68,1668 26.1875x17]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1748) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-end> at (53,1763) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1758) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [68,1758 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [68,1758 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1838) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.center> at (53,1853) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1858) content-size 150x50 positioned [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [68,1858 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [68,1858 51.625x17]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (38,1928) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.space-around> at (53,1943) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1948) content-size 150x50 positioned [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [68,1948 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [68,1948 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2018) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.space-between> at (53,2033) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,2048) content-size 150x50 positioned [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [68,2048 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [68,2048 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2108) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.space-evenly> at (53,2123) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,2128) content-size 150x50 positioned [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [68,2128 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [68,2128 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2198) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.start> at (53,2213) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2228) content-size 150x50 positioned [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [68,2228 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [68,2228 41.234375x17]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2288) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-start> at (53,2303) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2298) content-size 150x50 positioned [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [68,2298 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [68,2298 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2378) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.end> at (53,2393) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2388) content-size 150x50 positioned [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [68,2388 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [68,2388 26.1875x17]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2468) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-end> at (53,2483) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2498) content-size 150x50 positioned [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [68,2498 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [68,2498 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2558) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.center> at (53,2573) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2578) content-size 150x50 positioned [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [68,2578 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [68,2578 51.625x17]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2648) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-around> at (53,2663) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2668) content-size 150x50 positioned [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [68,2668 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [68,2668 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2738) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-between> at (53,2753) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2748) content-size 150x50 positioned [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [68,2748 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [68,2748 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2828) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-evenly> at (53,2843) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2848) content-size 150x50 positioned [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [68,2848 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [68,2848 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (38,2918) content-size 724x0 children: inline

20
Tests/LibWeb/Layout/expected/flex/abspos-flex-child-static-position-with-padding-on-flex-container.txt
View file

@ -1,20 +1,20 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x53.46875 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x37.46875 children: not-inline
Box <div#flex-container> at (18,18) content-size 764x17.46875 flex-container(row) [FFC] 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
Box <div#flex-container> at (18,18) content-size 764x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div#absolute> at (18,18) content-size 50x50 positioned [BFC] children: not-inline
BlockContainer <div#orange> at (18,18) content-size 50x50 children: not-inline
BlockContainer <div#red> at (18,18) content-size 9.703125x17.46875 flex-item [BFC] children: inline
line 0 width: 9.703125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [18,18 9.703125x17.46875]
BlockContainer <div#red> at (18,18) content-size 9.703125x17 flex-item [BFC] children: inline
line 0 width: 9.703125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [18,18 9.703125x17]
"x"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x53.46875] overflow: [0,0 800x68]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x37.46875] overflow: [8,8 784x60]
PaintableBox (Box<DIV>#flex-container) [8,8 784x37.46875] overflow: [8,8 784x60]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x53] overflow: [0,0 800x68]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x37] overflow: [8,8 784x60]
PaintableBox (Box<DIV>#flex-container) [8,8 784x37] overflow: [8,8 784x60]
PaintableWithLines (BlockContainer<DIV>#absolute) [18,18 50x50]
PaintableWithLines (BlockContainer<DIV>#orange) [18,18 50x50]
PaintableWithLines (BlockContainer<DIV>#red) [18,18 9.703125x17.46875]
PaintableWithLines (BlockContainer<DIV>#red) [18,18 9.703125x17]
TextPaintable (TextNode<#text>)

60
Tests/LibWeb/Layout/expected/flex/align-keywords-start-and-end.txt
View file

@ -1,49 +1,49 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x284.40625 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x266.40625 children: not-inline
BlockContainer <html> at (1,1) content-size 798x283 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x265 children: not-inline
Box <div.flex.row.align-start> at (11,11) content-size 500x200 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,12) content-size 136.5x17.46875 flex-item [BFC] children: inline
line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 18, rect: [12,12 136.5x17.46875]
BlockContainer <div> at (12,12) content-size 136.5x17 flex-item [BFC] children: inline
line 0 width: 136.5, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 18, rect: [12,12 136.5x17]
"align-items: start"
TextNode <#text>
Box <div.flex.align-end> at (11,213) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,214) content-size 121.453125x17.46875 flex-item [BFC] children: inline
line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 16, rect: [12,214 121.453125x17.46875]
Box <div.flex.align-end> at (11,213) content-size 500x19 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,214) content-size 121.453125x17 flex-item [BFC] children: inline
line 0 width: 121.453125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 16, rect: [12,214 121.453125x17]
"align-items: end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,233.46875) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (10,233) content-size 780x0 children: inline
TextNode <#text>
Box <div.flex.align-start> at (11,234.46875) content-size 500x19.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,235.46875) content-size 136.5x17.46875 flex-item [BFC] children: inline
line 0 width: 136.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 18, rect: [12,235.46875 136.5x17.46875]
Box <div.flex.align-start> at (11,234) content-size 500x19 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,235) content-size 136.5x17 flex-item [BFC] children: inline
line 0 width: 136.5, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 18, rect: [12,235 136.5x17]
"align-items: start"
TextNode <#text>
Box <div.flex.column.align-end> at (11,255.9375) content-size 500x19.46875 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (388.546875,256.9375) content-size 121.453125x17.46875 flex-item [BFC] children: inline
line 0 width: 121.453125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 16, rect: [388.546875,256.9375 121.453125x17.46875]
Box <div.flex.column.align-end> at (11,255) content-size 500x19 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (388.546875,256) content-size 121.453125x17 flex-item [BFC] children: inline
line 0 width: 121.453125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 16, rect: [388.546875,256 121.453125x17]
"align-items: end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,276.40625) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (10,275) content-size 780x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x286.40625]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x268.40625]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x285]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x267]
PaintableBox (Box<DIV>.flex.row.align-start) [10,10 502x202]
PaintableWithLines (BlockContainer<DIV>) [11,11 138.5x19.46875]
PaintableWithLines (BlockContainer<DIV>) [11,11 138.5x19]
TextPaintable (TextNode<#text>)
PaintableBox (Box<DIV>.flex.align-end) [10,212 502x21.46875]
PaintableWithLines (BlockContainer<DIV>) [11,213 123.453125x19.46875]
PaintableBox (Box<DIV>.flex.align-end) [10,212 502x21]
PaintableWithLines (BlockContainer<DIV>) [11,213 123.453125x19]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [10,233.46875 780x0]
PaintableBox (Box<DIV>.flex.align-start) [10,233.46875 502x21.46875]
PaintableWithLines (BlockContainer<DIV>) [11,234.46875 138.5x19.46875]
PaintableWithLines (BlockContainer(anonymous)) [10,233 780x0]
PaintableBox (Box<DIV>.flex.align-start) [10,233 502x21]
PaintableWithLines (BlockContainer<DIV>) [11,234 138.5x19]
TextPaintable (TextNode<#text>)
PaintableBox (Box<DIV>.flex.column.align-end) [10,254.9375 502x21.46875]
PaintableWithLines (BlockContainer<DIV>) [387.546875,255.9375 123.453125x19.46875]
PaintableBox (Box<DIV>.flex.column.align-end) [10,254 502x21]
PaintableWithLines (BlockContainer<DIV>) [387.546875,255 123.453125x19]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [10,276.40625 780x0]
PaintableWithLines (BlockContainer(anonymous)) [10,275 780x0]

4
Tests/LibWeb/Layout/expected/flex/automatic-minimum-size-with-explicit-flex-basis-and-flex-container-with-max-content-main-size.txt
View file

@ -2,8 +2,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x68 [BFC] children: not-inline
Box <body.flex> at (10,10) content-size 38.84375x50 flex-container(row) [FFC] children: not-inline
BlockContainer <div.item> at (11,11) content-size 36.84375x48 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [11,11 36.84375x17.46875]
line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [11,11 36.84375x17]
"hello"
TextNode <#text>

24
Tests/LibWeb/Layout/expected/flex/br-element-does-not-get-blockified-by-itself.txt
View file

@ -1,16 +1,16 @@
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 784x53.34375 children: not-inline
Box <div> at (8,8) content-size 784x53.34375 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 55.359375x53.34375 flex-item [BFC] children: inline
line 0 width: 28.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 4, rect: [8,8 28.40625x17.46875]
BlockContainer <body> at (8,8) content-size 784x51 children: not-inline
Box <div> at (8,8) content-size 784x51 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 55.359375x51 flex-item [BFC] children: inline
line 0 width: 28.40625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 1, length: 4, rect: [8,8 28.40625x17]
"well"
line 1 width: 36.84375, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 1, length: 5, rect: [8,25 36.84375x17.46875]
line 1 width: 36.84375, height: 17, bottom: 34, baseline: 13.296875
frag 0 from TextNode start: 1, length: 5, rect: [8,25 36.84375x17]
"hello"
line 2 width: 55.359375, height: 18.40625, bottom: 53.34375, baseline: 13.53125
frag 0 from TextNode start: 1, length: 7, rect: [8,42 55.359375x17.46875]
line 2 width: 55.359375, height: 17, bottom: 51, baseline: 13.296875
frag 0 from TextNode start: 1, length: 7, rect: [8,42 55.359375x17]
"friends"
TextNode <#text>
BreakNode <br>
@ -20,9 +20,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x53.34375]
PaintableBox (Box<DIV>) [8,8 784x53.34375]
PaintableWithLines (BlockContainer(anonymous)) [8,8 55.359375x53.34375]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x51]
PaintableBox (Box<DIV>) [8,8 784x51]
PaintableWithLines (BlockContainer(anonymous)) [8,8 55.359375x51]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)

16
Tests/LibWeb/Layout/expected/flex/calc-flex-basis.txt
View file

@ -3,23 +3,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (10,10) content-size 780x62 children: not-inline
Box <div.flex-container> at (11,11) content-size 778x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div.flex-item> at (12,12) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 58.40625, height: 21.84375, bottom: 21.84375, baseline: 16.921875
frag 0 from TextNode start: 0, length: 6, rect: [12,12 58.40625x21.84375]
line 0 width: 58.40625, height: 22, bottom: 22, baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [12,12 58.40625x22]
"Item 1"
TextNode <#text>
BlockContainer <div.flex-item> at (401,12) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 61.484375, height: 21.84375, bottom: 21.84375, baseline: 16.921875
frag 0 from TextNode start: 0, length: 6, rect: [401,12 61.484375x21.84375]
line 0 width: 61.484375, height: 22, bottom: 22, baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [401,12 61.484375x22]
"Item 2"
TextNode <#text>
BlockContainer <div.flex-item> at (12,42) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 61.84375, height: 21.84375, bottom: 21.84375, baseline: 16.921875
frag 0 from TextNode start: 0, length: 6, rect: [12,42 61.84375x21.84375]
line 0 width: 61.84375, height: 22, bottom: 22, baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [12,42 61.84375x22]
"Item 3"
TextNode <#text>
BlockContainer <div.flex-item> at (401,42) content-size 386x28 flex-item [BFC] children: inline
line 0 width: 60.15625, height: 21.84375, bottom: 21.84375, baseline: 16.921875
frag 0 from TextNode start: 0, length: 6, rect: [401,42 60.15625x21.84375]
line 0 width: 60.15625, height: 22, bottom: 22, baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [401,42 60.15625x22]
"Item 4"
TextNode <#text>

44
Tests/LibWeb/Layout/expected/flex/cross-size-of-item-with-box-sizing-border-box-and-nonzero-padding.txt
View file

@ -1,34 +1,34 @@
Viewport <#document> at (0,0) content-size 800x600 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) [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]
BlockContainer <html> at (1,1) content-size 798x241 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x223 children: not-inline
Box <div.outer.flex.flex-wrap> at (11,11) content-size 778x221 flex-container(row) [FFC] children: not-inline
BlockContainer <div.inner> at (12,62) content-size 776x119 flex-item [BFC] children: inline
line 0 width: 741.640625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 90, rect: [12,62 741.640625x17]
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum libero et urna"
line 1 width: 765.03125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 91, length: 95, rect: [12,79 765.03125x17.46875]
line 1 width: 765.03125, height: 17, bottom: 34, baseline: 13.296875
frag 0 from TextNode start: 91, length: 95, rect: [12,79 765.03125x17]
"sodales auctor. Nullam sodales bibendum turpis quis blandit. Ut fringilla erat et erat laoreet,"
line 2 width: 747.5625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
frag 0 from TextNode start: 187, length: 90, rect: [12,96 747.5625x17.46875]
line 2 width: 747.5625, height: 17, bottom: 51, baseline: 13.296875
frag 0 from TextNode start: 187, length: 90, rect: [12,96 747.5625x17]
"faucibus rhoncus orci hendrerit. Etiam at sagittis diam. Etiam nec neque non dolor iaculis"
line 3 width: 732.109375, height: 17.875, bottom: 70.28125, baseline: 13.53125
frag 0 from TextNode start: 278, length: 90, rect: [12,114 732.109375x17.46875]
line 3 width: 732.109375, height: 17, bottom: 68, baseline: 13.296875
frag 0 from TextNode start: 278, length: 90, rect: [12,113 732.109375x17]
"finibus euismod eget erat. Pellentesque vitae purus vitae nisi vehicula vestibulum quis ut"
line 4 width: 759.453125, height: 18.34375, bottom: 88.21875, baseline: 13.53125
frag 0 from TextNode start: 369, length: 95, rect: [12,131 759.453125x17.46875]
line 4 width: 759.453125, height: 17, bottom: 85, baseline: 13.296875
frag 0 from TextNode start: 369, length: 95, rect: [12,130 759.453125x17]
"diam. Integer convallis, justo ullamcorper sollicitudin varius, enim enim pellentesque erat, eu"
line 5 width: 767.1875, height: 17.8125, bottom: 105.15625, baseline: 13.53125
frag 0 from TextNode start: 465, length: 94, rect: [12,149 767.1875x17.46875]
line 5 width: 767.1875, height: 17, bottom: 102, baseline: 13.296875
frag 0 from TextNode start: 465, length: 94, rect: [12,147 767.1875x17]
"pellentesque sem arcu eu purus. Phasellus id erat sed felis luctus mollis eget sit amet dolor."
line 6 width: 765.578125, height: 18.28125, bottom: 123.09375, baseline: 13.53125
frag 0 from TextNode start: 560, length: 95, rect: [12,166 765.578125x17.46875]
line 6 width: 765.578125, height: 17, bottom: 119, baseline: 13.296875
frag 0 from TextNode start: 560, length: 95, rect: [12,164 765.578125x17]
"Pellentesque eget justo nulla. Duis consectetur imperdiet nisi, ac tincidunt urna blandit quis."
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x247.09375]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x229.09375]
PaintableBox (Box<DIV>.outer.flex.flex-wrap) [10,10 780x227.09375]
PaintableWithLines (BlockContainer<DIV>.inner) [11,11 778x225.09375]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x243]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x225]
PaintableBox (Box<DIV>.outer.flex.flex-wrap) [10,10 780x223]
PaintableWithLines (BlockContainer<DIV>.inner) [11,11 778x221]
TextPaintable (TextNode<#text>)

8
Tests/LibWeb/Layout/expected/flex/flex-column-item-with-percentage-max-width.txt
View file

@ -2,9 +2,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x120 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 54x102 children: not-inline
Box <div.flex> at (11,11) content-size 52x100 flex-container(column) [FFC] children: not-inline
BlockContainer <div.hmm> at (12,12) content-size 50x17.46875 flex-item [BFC] children: inline
line 0 width: 39.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [12,12 39.78125x17.46875]
BlockContainer <div.hmm> at (12,12) content-size 50x17 flex-item [BFC] children: inline
line 0 width: 39.78125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [12,12 39.78125x17]
"Hello"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
@ -14,5 +14,5 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x122]
PaintableWithLines (BlockContainer<BODY>) [9,9 56x104]
PaintableBox (Box<DIV>.flex) [10,10 54x102]
PaintableWithLines (BlockContainer<DIV>.hmm) [11,11 52x19.46875]
PaintableWithLines (BlockContainer<DIV>.hmm) [11,11 52x19]
TextPaintable (TextNode<#text>)

20
Tests/LibWeb/Layout/expected/flex/flex-container-intrinsic-cross-size-with-max-content-main-size.txt
View file

@ -1,16 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x53.46875 [BFC] children: not-inline
BlockContainer <body.outer> at (18,18) content-size 280.84375x17.46875 children: not-inline
Box <div.inner> at (18,18) content-size 280.84375x17.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (18,18) content-size 280.84375x17.46875 flex-item [BFC] children: inline
line 0 width: 280.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 35, rect: [18,18 280.84375x17.46875]
BlockContainer <html> at (0,0) content-size 800x53 [BFC] children: not-inline
BlockContainer <body.outer> at (18,18) content-size 280.84375x17 children: not-inline
Box <div.inner> at (18,18) content-size 280.84375x17 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (18,18) content-size 280.84375x17 flex-item [BFC] children: inline
line 0 width: 280.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 35, rect: [18,18 280.84375x17]
"this text should be all on one line"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x53.46875]
PaintableWithLines (BlockContainer<BODY>.outer) [8,8 300.84375x37.46875]
PaintableBox (Box<DIV>.inner) [18,18 280.84375x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [18,18 280.84375x17.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x53]
PaintableWithLines (BlockContainer<BODY>.outer) [8,8 300.84375x37]
PaintableBox (Box<DIV>.inner) [18,18 280.84375x17]
PaintableWithLines (BlockContainer(anonymous)) [18,18 280.84375x17]
TextPaintable (TextNode<#text>)

22
Tests/LibWeb/Layout/expected/flex/flex-item-min-width-fit-content.txt
View file

@ -7,17 +7,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.buttons> at (394.625,11) content-size 114.375x50 flex-item [BFC] children: inline
line 0 width: 114.375, height: 19.46875, bottom: 19.46875, baseline: 14.53125
frag 0 from BlockContainer start: 0, length: 0, rect: [395.625,12 57.046875x17.46875]
frag 1 from BlockContainer start: 0, length: 0, rect: [454.625,12 53.328125x17.46875]
BlockContainer <div.button> at (395.625,12) content-size 57.046875x17.46875 inline-block [BFC] children: inline
line 0 width: 57.046875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [395.625,12 57.046875x17.46875]
line 0 width: 114.375, height: 19, bottom: 19, baseline: 14.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [395.625,12 57.046875x17]
frag 1 from BlockContainer start: 0, length: 0, rect: [454.625,12 53.328125x17]
BlockContainer <div.button> at (395.625,12) content-size 57.046875x17 inline-block [BFC] children: inline
line 0 width: 57.046875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [395.625,12 57.046875x17]
"Accept"
TextNode <#text>
BlockContainer <div.button> at (454.625,12) content-size 53.328125x17.46875 inline-block [BFC] children: inline
line 0 width: 53.328125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [454.625,12 53.328125x17.46875]
BlockContainer <div.button> at (454.625,12) content-size 53.328125x17 inline-block [BFC] children: inline
line 0 width: 53.328125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [454.625,12 53.328125x17]
"Reject"
TextNode <#text>
@ -26,7 +26,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableBox (Box<BODY>) [9,9 502x54]
PaintableWithLines (BlockContainer<DIV>.big) [10,10 383.625x52]
PaintableWithLines (BlockContainer<DIV>.buttons) [393.625,10 116.375x52]
PaintableWithLines (BlockContainer<DIV>.button) [394.625,11 59.046875x19.46875]
PaintableWithLines (BlockContainer<DIV>.button) [394.625,11 59.046875x19]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.button) [453.625,11 55.328125x19.46875]
PaintableWithLines (BlockContainer<DIV>.button) [453.625,11 55.328125x19]
TextPaintable (TextNode<#text>)

28
Tests/LibWeb/Layout/expected/flex/flex-item-with-calc-main-size-and-layout-dependent-containing-block-size.txt
View file

@ -1,22 +1,22 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x69.34375 [BFC] children: not-inline
Box <body.pink> at (8,8) content-size 784x53.34375 flex-container(row) [FFC] children: not-inline
Box <div.orange> at (8,8) content-size 194.71875x53.34375 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div.lime> at (8,8) content-size 87.359375x53.34375 flex-item [BFC] children: inline
line 0 width: 74.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [8,8 74.75x17.46875]
BlockContainer <html> at (0,0) content-size 800x67 [BFC] children: not-inline
Box <body.pink> at (8,8) content-size 784x51 flex-container(row) [FFC] children: not-inline
Box <div.orange> at (8,8) content-size 194.71875x51 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div.lime> at (8,8) content-size 87.359375x51 flex-item [BFC] children: inline
line 0 width: 74.75, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 9, rect: [8,8 74.75x17]
"This is a"
line 1 width: 71.828125, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 10, length: 8, rect: [8,25 71.828125x17.46875]
line 1 width: 71.828125, height: 17, bottom: 34, baseline: 13.296875
frag 0 from TextNode start: 10, length: 8, rect: [8,25 71.828125x17]
"bunch of"
line 2 width: 32.140625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
frag 0 from TextNode start: 19, length: 4, rect: [8,42 32.140625x17.46875]
line 2 width: 32.140625, height: 17, bottom: 51, baseline: 13.296875
frag 0 from TextNode start: 19, length: 4, rect: [8,42 32.140625x17]
"text"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x69.34375]
PaintableBox (Box<BODY>.pink) [8,8 784x53.34375]
PaintableBox (Box<DIV>.orange) [8,8 194.71875x53.34375]
PaintableWithLines (BlockContainer<DIV>.lime) [8,8 87.359375x53.34375]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x67]
PaintableBox (Box<BODY>.pink) [8,8 784x51]
PaintableBox (Box<DIV>.orange) [8,8 194.71875x51]
PaintableWithLines (BlockContainer<DIV>.lime) [8,8 87.359375x51]
TextPaintable (TextNode<#text>)

12
Tests/LibWeb/Layout/expected/flex/flex-row-reverse-with-centered-content.txt
View file

@ -3,18 +3,18 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
Box <div.flex> at (8,8) content-size 784x50 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (425,8) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [425,8 6.34375x17.46875]
line 0 width: 6.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [425,8 6.34375x17]
"1"
TextNode <#text>
BlockContainer <div> at (375,8) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [375,8 8.8125x17.46875]
line 0 width: 8.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [375,8 8.8125x17]
"2"
TextNode <#text>
BlockContainer <div> at (325,8) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [325,8 9.09375x17.46875]
line 0 width: 9.09375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [325,8 9.09375x17]
"3"
TextNode <#text>

16
Tests/LibWeb/Layout/expected/flex/flex-shorthand-flex-basis-zero-percent.txt
View file

@ -3,28 +3,28 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (10,10) content-size 780x108 children: not-inline
Box <div.flex> at (11,11) content-size 500x52 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (11,11) content-size 36.84375x52 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [11,11 36.84375x17.46875]
line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [11,11 36.84375x17]
"hello"
TextNode <#text>
Box <div.item.one> at (48.84375,12) content-size 461.15625x50 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <(anonymous)> at (48.84375,12) content-size 55.359375x50 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [48.84375,12 55.359375x17.46875]
line 0 width: 55.359375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 7, rect: [48.84375,12 55.359375x17]
"friends"
TextNode <#text>
BlockContainer <(anonymous)> at (10,64) content-size 780x0 children: inline
TextNode <#text>
Box <div.flex> at (11,65) content-size 500x52 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (11,65) content-size 36.84375x52 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [11,65 36.84375x17.46875]
line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [11,65 36.84375x17]
"hello"
TextNode <#text>
Box <div.item.two> at (48.84375,66) content-size 461.15625x50 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <(anonymous)> at (48.84375,66) content-size 55.359375x50 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [48.84375,66 55.359375x17.46875]
line 0 width: 55.359375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 7, rect: [48.84375,66 55.359375x17]
"friends"
TextNode <#text>

16
Tests/LibWeb/Layout/expected/flex/inf-available-space-with-auto-margins.txt
View file

@ -1,14 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline
Box <body> at (8,8) content-size 784x17.46875 flex-container(column) [FFC] children: not-inline
BlockContainer <main> at (8,8) content-size 784x17.46875 flex-item [BFC] children: inline
line 0 width: 153.984375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [8,8 153.984375x17.46875]
BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
Box <body> at (8,8) content-size 784x17 flex-container(column) [FFC] children: not-inline
BlockContainer <main> at (8,8) content-size 784x17 flex-item [BFC] children: inline
line 0 width: 153.984375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [8,8 153.984375x17]
"hmmMMMMmmmmmm"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33.46875]
PaintableBox (Box<BODY>) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<MAIN>) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33]
PaintableBox (Box<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer<MAIN>) [8,8 784x17]
TextPaintable (TextNode<#text>)

20
Tests/LibWeb/Layout/expected/flex/inline-flex-with-main-axis-margin-on-flex-container.txt
View file

@ -1,16 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 500x37.46875 [BFC] children: inline
line 0 width: 272.40625, height: 37.46875, bottom: 37.46875, baseline: 15.53125
frag 0 from Box start: 0, length: 0, rect: [10,10 162.40625x19.46875]
Box <body> at (10,10) content-size 162.40625x19.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,11) content-size 160.40625x17.46875 flex-item [BFC] children: inline
line 0 width: 160.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 20, rect: [11,11 160.40625x17.46875]
BlockContainer <html> at (1,1) content-size 500x37 [BFC] children: inline
line 0 width: 272.40625, height: 37, bottom: 37, baseline: 15.296875
frag 0 from Box start: 0, length: 0, rect: [10,10 162.40625x19]
Box <body> at (10,10) content-size 162.40625x19 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,11) content-size 160.40625x17 flex-item [BFC] children: inline
line 0 width: 160.40625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 20, rect: [11,11 160.40625x17]
"Immobilie inserieren"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 502x39.46875]
PaintableBox (Box<BODY>) [9,9 164.40625x21.46875]
PaintableWithLines (BlockContainer<DIV>) [10,10 162.40625x19.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 502x39]
PaintableBox (Box<BODY>) [9,9 164.40625x21]
PaintableWithLines (BlockContainer<DIV>) [10,10 162.40625x19]
TextPaintable (TextNode<#text>)

92
Tests/LibWeb/Layout/expected/flex/intrinsic-height-of-column-items-with-different-kinds-of-width.txt
View file

@ -1,77 +1,77 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x143.28125 [BFC] children: not-inline
Box <body> at (10,10) content-size 780x125.28125 flex-container(column) [FFC] children: not-inline
BlockContainer <html> at (1,1) content-size 798x140 [BFC] children: not-inline
Box <body> at (10,10) content-size 780x122 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.px> at (11,11) content-size 200x19.46875 flex-item [BFC] children: not-inline
Box <div.inner> at (12,12) content-size 198x17.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,12) content-size 19.125x17.46875 flex-item [BFC] children: inline
line 0 width: 19.125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [12,12 19.125x17.46875]
BlockContainer <div.px> at (11,11) content-size 200x19 flex-item [BFC] children: not-inline
Box <div.inner> at (12,12) content-size 198x17 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,12) content-size 19.125x17 flex-item [BFC] children: inline
line 0 width: 19.125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 2, rect: [12,12 19.125x17]
"px"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.percentage> at (11,32.46875) content-size 50x19.46875 flex-item [BFC] children: not-inline
Box <div.inner> at (12,33.46875) content-size 48x17.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,33.46875) content-size 86.671875x17.46875 flex-item [BFC] children: inline
line 0 width: 86.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [12,33.46875 86.671875x17.46875]
BlockContainer <div.percentage> at (11,32) content-size 50x19 flex-item [BFC] children: not-inline
Box <div.inner> at (12,33) content-size 48x17 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,33) content-size 86.671875x17 flex-item [BFC] children: inline
line 0 width: 86.671875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [12,33 86.671875x17]
"percentage"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.fit-content> at (11,53.9375) content-size 88.765625x19.46875 flex-item [BFC] children: not-inline
Box <div.inner> at (12,54.9375) content-size 86.765625x17.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,54.9375) content-size 86.765625x17.46875 flex-item [BFC] children: inline
line 0 width: 86.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 11, rect: [12,54.9375 86.765625x17.46875]
BlockContainer <div.fit-content> at (11,53) content-size 88.765625x19 flex-item [BFC] children: not-inline
Box <div.inner> at (12,54) content-size 86.765625x17 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,54) content-size 86.765625x17 flex-item [BFC] children: inline
line 0 width: 86.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 11, rect: [12,54 86.765625x17]
"fit content"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.max-content> at (11,75.40625) content-size 102.15625x19.46875 flex-item [BFC] children: not-inline
Box <div.inner> at (12,76.40625) content-size 100.15625x17.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,76.40625) content-size 100.15625x17.46875 flex-item [BFC] children: inline
line 0 width: 100.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 11, rect: [12,76.40625 100.15625x17.46875]
BlockContainer <div.max-content> at (11,74) content-size 102.15625x19 flex-item [BFC] children: not-inline
Box <div.inner> at (12,75) content-size 100.15625x17 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,75) content-size 100.15625x17 flex-item [BFC] children: inline
line 0 width: 100.15625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 11, rect: [12,75 100.15625x17]
"max content"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.min-content> at (11,96.875) content-size 62.90625x37.40625 flex-item [BFC] children: not-inline
Box <div.inner> at (12,97.875) content-size 60.90625x35.40625 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,97.875) content-size 60.90625x35.40625 flex-item [BFC] children: inline
line 0 width: 26.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [12,97.875 26.375x17.46875]
BlockContainer <div.min-content> at (11,95) content-size 62.90625x36 flex-item [BFC] children: not-inline
Box <div.inner> at (12,96) content-size 60.90625x34 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,96) content-size 60.90625x34 flex-item [BFC] children: inline
line 0 width: 26.375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,96 26.375x17]
"min"
line 1 width: 60.90625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 4, length: 7, rect: [12,114.875 60.90625x17.46875]
line 1 width: 60.90625, height: 17, bottom: 34, baseline: 13.296875
frag 0 from TextNode start: 4, length: 7, rect: [12,113 60.90625x17]
"content"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x145.28125]
PaintableBox (Box<BODY>) [9,9 782x127.28125]
PaintableWithLines (BlockContainer<DIV>.px) [10,10 202x21.46875]
PaintableBox (Box<DIV>.inner) [11,11 200x19.46875]
PaintableWithLines (BlockContainer(anonymous)) [12,12 19.125x17.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x142]
PaintableBox (Box<BODY>) [9,9 782x124]
PaintableWithLines (BlockContainer<DIV>.px) [10,10 202x21]
PaintableBox (Box<DIV>.inner) [11,11 200x19]
PaintableWithLines (BlockContainer(anonymous)) [12,12 19.125x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.percentage) [10,31.46875 52x21.46875] overflow: [11,32.46875 87.671875x19.46875]
PaintableBox (Box<DIV>.inner) [11,32.46875 50x19.46875] overflow: [12,33.46875 86.671875x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [12,33.46875 86.671875x17.46875]
PaintableWithLines (BlockContainer<DIV>.percentage) [10,31 52x21] overflow: [11,32 87.671875x19]
PaintableBox (Box<DIV>.inner) [11,32 50x19] overflow: [12,33 86.671875x17]
PaintableWithLines (BlockContainer(anonymous)) [12,33 86.671875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.fit-content) [10,52.9375 90.765625x21.46875]
PaintableBox (Box<DIV>.inner) [11,53.9375 88.765625x19.46875]
PaintableWithLines (BlockContainer(anonymous)) [12,54.9375 86.765625x17.46875]
PaintableWithLines (BlockContainer<DIV>.fit-content) [10,52 90.765625x21]
PaintableBox (Box<DIV>.inner) [11,53 88.765625x19]
PaintableWithLines (BlockContainer(anonymous)) [12,54 86.765625x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.max-content) [10,74.40625 104.15625x21.46875]
PaintableBox (Box<DIV>.inner) [11,75.40625 102.15625x19.46875]
PaintableWithLines (BlockContainer(anonymous)) [12,76.40625 100.15625x17.46875]
PaintableWithLines (BlockContainer<DIV>.max-content) [10,73 104.15625x21]
PaintableBox (Box<DIV>.inner) [11,74 102.15625x19]
PaintableWithLines (BlockContainer(anonymous)) [12,75 100.15625x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.min-content) [10,95.875 64.90625x39.40625]
PaintableBox (Box<DIV>.inner) [11,96.875 62.90625x37.40625]
PaintableWithLines (BlockContainer(anonymous)) [12,97.875 60.90625x35.40625]
PaintableWithLines (BlockContainer<DIV>.min-content) [10,94 64.90625x38]
PaintableBox (Box<DIV>.inner) [11,95 62.90625x36]
PaintableWithLines (BlockContainer(anonymous)) [12,96 60.90625x34]
TextPaintable (TextNode<#text>)

384
Tests/LibWeb/Layout/expected/flex/justify-content-1.txt
View file

@ -5,576 +5,576 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
Box <div.row.outer.start> at (11,11) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,12) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [12,12 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [12,12 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (64,12) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [64,12 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [64,12 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (116,12) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [116,12 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [116,12 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,72) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.flex-start> at (11,73) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,74) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [12,74 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [12,74 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (64,74) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [64,74 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [64,74 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (116,74) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [116,74 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [116,74 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,134) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.end> at (11,135) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (156,136) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [156,136 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [156,136 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (208,136) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [208,136 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [208,136 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (260,136) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [260,136 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [260,136 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,196) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.flex-end> at (11,197) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (156,198) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [156,198 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [156,198 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (208,198) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [208,198 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [208,198 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (260,198) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [260,198 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [260,198 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,258) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.center> at (11,259) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (84,260) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [84,260 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [84,260 51.625x17]
"center"
TextNode <#text>
BlockContainer <div> at (136,260) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,260 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,260 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (188,260) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [188,260 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [188,260 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,320) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.space-around> at (11,321) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (36,322) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [36,322 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [36,322 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <div> at (136,322) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,322 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,322 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (236,322) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [236,322 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [236,322 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,382) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.space-between> at (11,383) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,384) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [12,384 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [12,384 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <div> at (136,384) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,384 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,384 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (260,384) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [260,384 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [260,384 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,444) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.space-evenly> at (11,445) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (48,446) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [48,446 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [48,446 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <div> at (136,446) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,446 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,446 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (224,446) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [224,446 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [224,446 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.start> at (11,507) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (116,508) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [116,508 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [116,508 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (64,508) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,508) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,508 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,508 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.flex-start> at (11,569) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (260,570) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [260,570 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [260,570 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (208,570) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [208,570 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [208,570 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (156,570) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [156,570 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [156,570 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,630) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.end> at (11,631) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (260,632) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [260,632 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [260,632 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (208,632) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [208,632 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [208,632 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (156,632) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [156,632 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [156,632 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,692) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.flex-end> at (11,693) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (116,694) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [116,694 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [116,694 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (64,694) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,694) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,694 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,694 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.center> at (11,755) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (188,756) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [188,756 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [188,756 51.625x17]
"center"
TextNode <#text>
BlockContainer <div> at (136,756) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,756 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,756 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (84,756) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [84,756 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [84,756 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,816) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.space-around> at (11,817) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (236,818) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [236,818 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [236,818 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <div> at (136,818) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,818 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,818 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (36,818) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [36,818 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [36,818 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,878) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.space-between> at (11,879) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (260,880) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [260,880 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [260,880 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <div> at (136,880) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,880 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,880 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,880) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,880 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,880 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,940) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.space-evenly> at (11,941) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (224,942) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [224,942 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [224,942 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <div> at (136,942) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [136,942 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [136,942 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (48,942) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [48,942 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [48,942 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1002) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.start> at (11,1003) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1004) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [12,1004 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [12,1004 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (12,1056) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1056 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1056 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,1108) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1108 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1108 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1304) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-start> at (11,1305) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1306) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [12,1306 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [12,1306 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (12,1358) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1358 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1358 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,1410) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1410 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1410 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1606) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.end> at (11,1607) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1752) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [12,1752 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,1752 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (12,1804) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1804 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1804 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,1856) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1856 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1856 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1908) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-end> at (11,1909) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,2054) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [12,2054 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [12,2054 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (12,2106) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2106 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2106 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,2158) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2158 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2158 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,2210) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.center> at (11,2211) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,2284) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [12,2284 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [12,2284 51.625x17]
"center"
TextNode <#text>
BlockContainer <div> at (12,2336) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2336 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2336 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,2388) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2388 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2388 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,2512) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.space-around> at (11,2513) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,2538) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [12,2538 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,2538 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <div> at (12,2638) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2638 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2638 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,2738) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2738 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2738 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,2814) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.space-between> at (11,2815) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,2816) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [12,2816 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [12,2816 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <div> at (12,2940) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2940 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2940 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,3064) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3064 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,3064 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,3116) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.space-evenly> at (11,3117) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,3154) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [12,3154 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,3154 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <div> at (12,3242) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3242 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,3242 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,3330) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3330 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,3330 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,3418) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.start> at (11,3419) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,3524) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [12,3524 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [12,3524 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (12,3472) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,3420) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3420 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,3420 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,3720) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-start> at (11,3721) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,3970) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [12,3970 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [12,3970 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (12,3918) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3918 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,3918 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,3866) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,3866 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,3866 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,4022) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.end> at (11,4023) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,4272) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [12,4272 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,4272 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (12,4220) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4220 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,4220 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,4168) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4168 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,4168 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,4324) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-end> at (11,4325) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,4430) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [12,4430 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [12,4430 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (12,4378) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,4326) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4326 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,4326 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,4626) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.center> at (11,4627) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,4804) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 51.625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [12,4804 51.625x17.46875]
line 0 width: 51.625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [12,4804 51.625x17]
"center"
TextNode <#text>
BlockContainer <div> at (12,4752) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4752 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,4752 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,4700) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4700 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,4700 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,4928) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-around> at (11,4929) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,5154) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 107.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [12,5154 107.96875x17.46875]
line 0 width: 107.96875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,5154 107.96875x17]
"space-around"
TextNode <#text>
BlockContainer <div> at (12,5054) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,5054 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,5054 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,4954) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,4954 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,4954 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,5230) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-between> at (11,5231) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,5480) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 115.515625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 13, rect: [12,5480 115.515625x17.46875]
line 0 width: 115.515625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [12,5480 115.515625x17]
"space-between"
TextNode <#text>
BlockContainer <div> at (12,5356) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,5356 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,5356 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,5232) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,5232 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,5232 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,5532) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-evenly> at (11,5533) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,5746) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 98.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 12, rect: [12,5746 98.859375x17.46875]
line 0 width: 98.859375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,5746 98.859375x17]
"space-evenly"
TextNode <#text>
BlockContainer <div> at (12,5658) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,5658 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,5658 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,5570) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,5570 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,5570 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,5834) content-size 780x0 children: inline

16
Tests/LibWeb/Layout/expected/flex/justify-content-space-between-single-item.txt
View file

@ -1,16 +1,16 @@
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.46875 children: not-inline
Box <div.container> at (8,8) content-size 784x17.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (8,8) content-size 14.265625x17.46875 flex-item [BFC] children: inline
line 0 width: 14.265625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 14.265625x17.46875]
BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
Box <div.container> at (8,8) content-size 784x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (8,8) content-size 14.265625x17 flex-item [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]
"A"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875]
PaintableBox (Box<DIV>.container) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<DIV>) [8,8 14.265625x17.46875]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableBox (Box<DIV>.container) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>) [8,8 14.265625x17]
TextPaintable (TextNode<#text>)

192
Tests/LibWeb/Layout/expected/flex/justify-content-with-margin-auto-child.txt
View file

@ -5,288 +5,288 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
Box <div.row.outer.start> at (11,11) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (60,12) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [60,12 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [60,12 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (160,12) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [160,12 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [160,12 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (260,12) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [260,12 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [260,12 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,72) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.flex-start> at (11,73) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (60,74) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [60,74 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [60,74 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (160,74) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [160,74 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [160,74 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (260,74) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [260,74 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [260,74 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,134) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.end> at (11,135) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,136) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [12,136 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,136 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (112,136) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [112,136 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [112,136 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (212,136) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [212,136 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [212,136 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,196) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.outer.flex-end> at (11,197) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (12,198) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [12,198 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [12,198 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (112,198) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [112,198 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [112,198 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (212,198) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [212,198 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [212,198 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,258) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.start> at (11,259) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (260,260) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [260,260 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [260,260 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (160,260) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [160,260 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [160,260 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (60,260) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [60,260 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [60,260 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,320) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.flex-start> at (11,321) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (260,322) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [260,322 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [260,322 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (160,322) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [160,322 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [160,322 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (60,322) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [60,322 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [60,322 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,382) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.end> at (11,383) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (212,384) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [212,384 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [212,384 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (112,384) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [112,384 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [112,384 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,384) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,384 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,384 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,444) content-size 780x0 children: inline
TextNode <#text>
Box <div.row.reverse.outer.flex-end> at (11,445) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (212,446) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [212,446 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [212,446 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (112,446) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [112,446 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [112,446 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,446) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,446 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,446 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.start> at (11,507) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (20,508) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [20,508 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [20,508 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (20,560) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,560 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,560 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (20,612) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,612 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,612 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,808) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-start> at (11,809) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (20,810) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [20,810 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [20,810 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (20,862) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,862 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,862 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (20,914) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,914 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,914 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1110) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.end> at (11,1111) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1256) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [12,1256 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,1256 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (12,1308) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1308 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1308 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,1360) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1360 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1360 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1412) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-end> at (11,1413) content-size 60x300 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1558) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [12,1558 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [12,1558 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (12,1610) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1610 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1610 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,1662) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,1662 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,1662 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1714) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.start> at (11,1715) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (20,1820) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 41.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [20,1820 41.234375x17.46875]
line 0 width: 41.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [20,1820 41.234375x17]
"start"
TextNode <#text>
BlockContainer <div> at (20,1768) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,1768 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,1768 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (20,1716) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,1716 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,1716 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,2016) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-start> at (11,2017) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (20,2266) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 76.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 10, rect: [20,2266 76.8125x17.46875]
line 0 width: 76.8125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [20,2266 76.8125x17]
"flex-start"
TextNode <#text>
BlockContainer <div> at (20,2214) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,2214 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,2214 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (20,2162) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [20,2162 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [20,2162 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,2318) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.end> at (11,2319) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,2568) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 26.1875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [12,2568 26.1875x17.46875]
line 0 width: 26.1875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,2568 26.1875x17]
"end"
TextNode <#text>
BlockContainer <div> at (12,2516) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2516 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2516 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,2464) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2464 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2464 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,2620) content-size 780x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-end> at (11,2621) content-size 60x300 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,2726) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 61.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 8, rect: [12,2726 61.765625x17.46875]
line 0 width: 61.765625, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [12,2726 61.765625x17]
"flex-end"
TextNode <#text>
BlockContainer <div> at (12,2674) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2674 9.34375x17.46875]
line 0 width: 9.34375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2674 9.34375x17]
"a"
TextNode <#text>
BlockContainer <div> at (12,2622) content-size 50x50 flex-item [BFC] children: inline
line 0 width: 9.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [12,2622 9.46875x17.46875]
line 0 width: 9.46875, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 1, rect: [12,2622 9.46875x17]
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,2922) content-size 780x0 children: inline

28
Tests/LibWeb/Layout/expected/flex/list-container-display-contents.txt
View file

@ -1,23 +1,23 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x41.46875 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x17.46875 children: not-inline
Box <ul.globalnav-list> at (48,16) content-size 744x17.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div#item-1> at (48,16) content-size 46.734375x17.46875 flex-item [BFC] children: inline
line 0 width: 46.734375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [48,16 46.734375x17.46875]
BlockContainer <html> at (0,0) content-size 800x41 [BFC] children: not-inline
BlockContainer <body> at (8,16) content-size 784x17 children: not-inline
Box <ul.globalnav-list> at (48,16) content-size 744x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div#item-1> at (48,16) content-size 46.734375x17 flex-item [BFC] children: inline
line 0 width: 46.734375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [48,16 46.734375x17]
"Store"
TextNode <#text>
BlockContainer <div#item-2> at (762,16) content-size 30x17.46875 flex-item [BFC] children: inline
line 0 width: 30, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [762,16 30x17.46875]
BlockContainer <div#item-2> at (762,16) content-size 30x17 flex-item [BFC] children: inline
line 0 width: 30, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [762,16 30x17]
"Mac"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x41.46875]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x17.46875]
PaintableBox (Box<UL>.globalnav-list) [8,16 784x17.46875]
PaintableWithLines (BlockContainer<DIV>#item-1) [48,16 46.734375x17.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x41]
PaintableWithLines (BlockContainer<BODY>) [8,16 784x17]
PaintableBox (Box<UL>.globalnav-list) [8,16 784x17]
PaintableWithLines (BlockContainer<DIV>#item-1) [48,16 46.734375x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>#item-2) [762,16 30x17.46875]
PaintableWithLines (BlockContainer<DIV>#item-2) [762,16 30x17]
TextPaintable (TextNode<#text>)

20
Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt
View file

@ -1,16 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 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]
BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
Box <body.outer> at (8,8) content-size 200x17 flex-container(column) [FFC] children: not-inline
BlockContainer <div.middle> at (8,8) content-size 200x17 flex-item [BFC] children: not-inline
BlockContainer <div.inner> at (8,8) content-size 200x17 children: inline
line 0 width: 174.234375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 20, rect: [8,8 174.234375x17]
"percentages are hard"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33.46875]
PaintableBox (Box<BODY>.outer) [8,8 200x17.46875]
PaintableWithLines (BlockContainer<DIV>.middle) [8,8 200x17.46875]
PaintableWithLines (BlockContainer<DIV>.inner) [8,8 200x17.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33]
PaintableBox (Box<BODY>.outer) [8,8 200x17]
PaintableWithLines (BlockContainer<DIV>.middle) [8,8 200x17]
PaintableWithLines (BlockContainer<DIV>.inner) [8,8 200x17]
TextPaintable (TextNode<#text>)

24
Tests/LibWeb/Layout/expected/flex/relpos-flex-item.txt
View file

@ -1,21 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (2,2) content-size 796x41.46875 [BFC] children: not-inline
Box <body> at (12,12) content-size 600x21.46875 flex-container(row) [FFC] children: not-inline
BlockContainer <div.exekiller> at (14,14) content-size 200x17.46875 positioned flex-item [BFC] children: inline
line 0 width: 65.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 9, rect: [14,14 65.4375x17.46875]
BlockContainer <html> at (2,2) content-size 796x41 [BFC] children: not-inline
Box <body> at (12,12) content-size 600x21 flex-container(row) [FFC] children: not-inline
BlockContainer <div.exekiller> at (14,14) content-size 200x17 positioned flex-item [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]
"exekiller"
TextNode <#text>
BlockContainer <div.athena> at (18,18) content-size 200x17.46875 positioned flex-item [BFC] children: inline
line 0 width: 53.171875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [18,18 53.171875x17.46875]
BlockContainer <div.athena> at (18,18) content-size 200x17 positioned flex-item [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]
"athena"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x45.46875]
PaintableBox (Box<BODY>) [10,10 604x25.46875] overflow: [12,12 600x25.46875]
PaintableWithLines (BlockContainer<DIV>.exekiller) [12,12 204x21.46875]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x45]
PaintableBox (Box<BODY>) [10,10 604x25] overflow: [12,12 600x25]
PaintableWithLines (BlockContainer<DIV>.exekiller) [12,12 204x21]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.athena) [16,16 204x21.46875]
PaintableWithLines (BlockContainer<DIV>.athena) [16,16 204x21]
TextPaintable (TextNode<#text>)

72
Tests/LibWeb/Layout/expected/flex/reverse-flex-layout-with-space-between-and-space-around.txt
View file

@ -3,72 +3,72 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x600 children: not-inline
Box <div.outer.row> at (8,8) content-size 150x150 flex-container(row) [FFC] children: not-inline
BlockContainer <div.inner> at (12.609375,8) content-size 30.078125x150 flex-item [BFC] children: inline
line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [12.609375,8 30.078125x17.46875]
line 0 width: 30.078125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 4, rect: [12.609375,8 30.078125x17]
"Well"
TextNode <#text>
BlockContainer <div.inner> at (51.921875,8) content-size 36.84375x150 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [51.921875,8 36.84375x17.46875]
line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [51.921875,8 36.84375x17]
"hello"
TextNode <#text>
BlockContainer <div.inner> at (98,8) content-size 55.359375x150 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [98,8 55.359375x17.46875]
line 0 width: 55.359375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 7, rect: [98,8 55.359375x17]
"friends"
TextNode <#text>
BlockContainer <(anonymous)> at (8,158) content-size 784x0 children: inline
TextNode <#text>
Box <div.outer.row-reverse> at (8,158) content-size 150x150 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div.inner> at (123.3125,158) content-size 30.078125x150 flex-item [BFC] children: inline
line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [123.3125,158 30.078125x17.46875]
line 0 width: 30.078125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 4, rect: [123.3125,158 30.078125x17]
"Well"
TextNode <#text>
BlockContainer <div.inner> at (77.234375,158) content-size 36.84375x150 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [77.234375,158 36.84375x17.46875]
line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [77.234375,158 36.84375x17]
"hello"
TextNode <#text>
BlockContainer <div.inner> at (12.640625,158) content-size 55.359375x150 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [12.640625,158 55.359375x17.46875]
line 0 width: 55.359375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 7, rect: [12.640625,158 55.359375x17]
"friends"
TextNode <#text>
BlockContainer <(anonymous)> at (8,308) content-size 784x0 children: inline
TextNode <#text>
Box <div.outer.column> at (8,308) content-size 150x150 flex-container(column) [FFC] children: not-inline
BlockContainer <div.inner> at (8,324.265625) content-size 150x17.46875 flex-item [BFC] children: inline
line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [8,324.265625 30.078125x17.46875]
BlockContainer <div.inner> at (8,324.5) content-size 150x17 flex-item [BFC] children: inline
line 0 width: 30.078125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 4, rect: [8,324.5 30.078125x17]
"Well"
TextNode <#text>
BlockContainer <div.inner> at (8,374.265625) content-size 150x17.46875 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,374.265625 36.84375x17.46875]
BlockContainer <div.inner> at (8,374.5) content-size 150x17 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [8,374.5 36.84375x17]
"hello"
TextNode <#text>
BlockContainer <div.inner> at (8,424.265625) content-size 150x17.46875 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [8,424.265625 55.359375x17.46875]
BlockContainer <div.inner> at (8,424.5) content-size 150x17 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 7, rect: [8,424.5 55.359375x17]
"friends"
TextNode <#text>
BlockContainer <(anonymous)> at (8,458) content-size 784x0 children: inline
TextNode <#text>
Box <div.outer.column-reverse> at (8,458) content-size 150x150 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div.inner> at (8,574.265625) content-size 150x17.46875 flex-item [BFC] children: inline
line 0 width: 30.078125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [8,574.265625 30.078125x17.46875]
BlockContainer <div.inner> at (8,574.5) content-size 150x17 flex-item [BFC] children: inline
line 0 width: 30.078125, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 4, rect: [8,574.5 30.078125x17]
"Well"
TextNode <#text>
BlockContainer <div.inner> at (8,524.265625) content-size 150x17.46875 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [8,524.265625 36.84375x17.46875]
BlockContainer <div.inner> at (8,524.5) content-size 150x17 flex-item [BFC] children: inline
line 0 width: 36.84375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [8,524.5 36.84375x17]
"hello"
TextNode <#text>
BlockContainer <div.inner> at (8,474.265625) content-size 150x17.46875 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 7, rect: [8,474.265625 55.359375x17.46875]
BlockContainer <div.inner> at (8,474.5) content-size 150x17 flex-item [BFC] children: inline
line 0 width: 55.359375, height: 17, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 7, rect: [8,474.5 55.359375x17]
"friends"
TextNode <#text>
@ -92,17 +92,17 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x616]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,308 784x0]
PaintableBox (Box<DIV>.outer.column) [8,308 150x150]
PaintableWithLines (BlockContainer<DIV>.inner) [8,324.265625 150x17.46875]
PaintableWithLines (BlockContainer<DIV>.inner) [8,324.5 150x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.inner) [8,374.265625 150x17.46875]
PaintableWithLines (BlockContainer<DIV>.inner) [8,374.5 150x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.inner) [8,424.265625 150x17.46875]
PaintableWithLines (BlockContainer<DIV>.inner) [8,424.5 150x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,458 784x0]
PaintableBox (Box<DIV>.outer.column-reverse) [8,458 150x150]
PaintableWithLines (BlockContainer<DIV>.inner) [8,574.265625 150x17.46875]
PaintableWithLines (BlockContainer<DIV>.inner) [8,574.5 150x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.inner) [8,524.265625 150x17.46875]
PaintableWithLines (BlockContainer<DIV>.inner) [8,524.5 150x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.inner) [8,474.265625 150x17.46875]
PaintableWithLines (BlockContainer<DIV>.inner) [8,474.5 150x17]
TextPaintable (TextNode<#text>)