RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 18:37:35 +00:00
Code Issues Activity Actions

LibWeb: Use separate structure to represent fragments in paintable tree

Browse source 
This is a part of refactoring towards making the paintable tree
independent of the layout tree. Now, instead of transferring text
fragments from the layout tree to the paintable tree during the layout
commit phase, we allocate separate PaintableFragments that contain only
the information necessary for painting. Doing this also allows us to
get rid LineBoxes, as they are used only during layout.
This commit is contained in:
Aliaksandr Kalenik 2024-01-12 21:25:05 +01:00 • committed by Andreas Kling
parent 785fa60cca
commit de32b77ceb
401 changed files with 2122 additions and 3614 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,576 +5,480 @@ 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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [12,12 41.234375x17]
frag 0 from TextNode start: 0, length: 5, rect: [12,12 41.234375x17] baseline: 13.296875
"start"
TextNode <#text>
BlockContainer <div> at (64,12) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [64,12 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (116,12) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [116,12 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [12,74 76.8125x17]
frag 0 from TextNode start: 0, length: 10, rect: [12,74 76.8125x17] baseline: 13.296875
"flex-start"
TextNode <#text>
BlockContainer <div> at (64,74) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [64,74 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (116,74) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [116,74 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [156,136 26.1875x17]
frag 0 from TextNode start: 0, length: 3, rect: [156,136 26.1875x17] baseline: 13.296875
"end"
TextNode <#text>
BlockContainer <div> at (208,136) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [208,136 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (260,136) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [260,136 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [156,198 61.765625x17]
frag 0 from TextNode start: 0, length: 8, rect: [156,198 61.765625x17] baseline: 13.296875
"flex-end"
TextNode <#text>
BlockContainer <div> at (208,198) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [208,198 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (260,198) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [260,198 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [84,260 51.625x17]
frag 0 from TextNode start: 0, length: 6, rect: [84,260 51.625x17] baseline: 13.296875
"center"
TextNode <#text>
BlockContainer <div> at (136,260) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,260 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (188,260) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [188,260 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [36,322 107.96875x17]
frag 0 from TextNode start: 0, length: 12, rect: [36,322 107.96875x17] baseline: 13.296875
"space-around"
TextNode <#text>
BlockContainer <div> at (136,322) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,322 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (236,322) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [236,322 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [12,384 115.515625x17]
frag 0 from TextNode start: 0, length: 13, rect: [12,384 115.515625x17] baseline: 13.296875
"space-between"
TextNode <#text>
BlockContainer <div> at (136,384) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,384 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (260,384) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [260,384 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [48,446 98.859375x17]
frag 0 from TextNode start: 0, length: 12, rect: [48,446 98.859375x17] baseline: 13.296875
"space-evenly"
TextNode <#text>
BlockContainer <div> at (136,446) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,446 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (224,446) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [224,446 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [116,508 41.234375x17]
frag 0 from TextNode start: 0, length: 5, rect: [116,508 41.234375x17] baseline: 13.296875
"start"
TextNode <#text>
BlockContainer <div> at (64,508) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [64,508 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,508) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,508 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [260,570 76.8125x17]
frag 0 from TextNode start: 0, length: 10, rect: [260,570 76.8125x17] baseline: 13.296875
"flex-start"
TextNode <#text>
BlockContainer <div> at (208,570) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [208,570 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (156,570) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [156,570 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [260,632 26.1875x17]
frag 0 from TextNode start: 0, length: 3, rect: [260,632 26.1875x17] baseline: 13.296875
"end"
TextNode <#text>
BlockContainer <div> at (208,632) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [208,632 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (156,632) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [156,632 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [116,694 61.765625x17]
frag 0 from TextNode start: 0, length: 8, rect: [116,694 61.765625x17] baseline: 13.296875
"flex-end"
TextNode <#text>
BlockContainer <div> at (64,694) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [64,694 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,694) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,694 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [188,756 51.625x17]
frag 0 from TextNode start: 0, length: 6, rect: [188,756 51.625x17] baseline: 13.296875
"center"
TextNode <#text>
BlockContainer <div> at (136,756) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,756 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (84,756) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [84,756 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [236,818 107.96875x17]
frag 0 from TextNode start: 0, length: 12, rect: [236,818 107.96875x17] baseline: 13.296875
"space-around"
TextNode <#text>
BlockContainer <div> at (136,818) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,818 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (36,818) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [36,818 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [260,880 115.515625x17]
frag 0 from TextNode start: 0, length: 13, rect: [260,880 115.515625x17] baseline: 13.296875
"space-between"
TextNode <#text>
BlockContainer <div> at (136,880) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,880 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,880) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,880 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [224,942 98.859375x17]
frag 0 from TextNode start: 0, length: 12, rect: [224,942 98.859375x17] baseline: 13.296875
"space-evenly"
TextNode <#text>
BlockContainer <div> at (136,942) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [136,942 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (48,942) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [48,942 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [12,1004 41.234375x17]
frag 0 from TextNode start: 0, length: 5, rect: [12,1004 41.234375x17] baseline: 13.296875
"start"
TextNode <#text>
BlockContainer <div> at (12,1056) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,1056 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,1108) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,1108 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [12,1306 76.8125x17]
frag 0 from TextNode start: 0, length: 10, rect: [12,1306 76.8125x17] baseline: 13.296875
"flex-start"
TextNode <#text>
BlockContainer <div> at (12,1358) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,1358 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,1410) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,1410 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,1752 26.1875x17]
frag 0 from TextNode start: 0, length: 3, rect: [12,1752 26.1875x17] baseline: 13.296875
"end"
TextNode <#text>
BlockContainer <div> at (12,1804) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,1804 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,1856) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,1856 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [12,2054 61.765625x17]
frag 0 from TextNode start: 0, length: 8, rect: [12,2054 61.765625x17] baseline: 13.296875
"flex-end"
TextNode <#text>
BlockContainer <div> at (12,2106) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,2106 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,2158) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,2158 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [12,2284 51.625x17]
frag 0 from TextNode start: 0, length: 6, rect: [12,2284 51.625x17] baseline: 13.296875
"center"
TextNode <#text>
BlockContainer <div> at (12,2336) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,2336 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,2388) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,2388 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,2538 107.96875x17]
frag 0 from TextNode start: 0, length: 12, rect: [12,2538 107.96875x17] baseline: 13.296875
"space-around"
TextNode <#text>
BlockContainer <div> at (12,2638) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,2638 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,2738) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,2738 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [12,2816 115.515625x17]
frag 0 from TextNode start: 0, length: 13, rect: [12,2816 115.515625x17] baseline: 13.296875
"space-between"
TextNode <#text>
BlockContainer <div> at (12,2940) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,2940 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,3064) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,3064 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,3154 98.859375x17]
frag 0 from TextNode start: 0, length: 12, rect: [12,3154 98.859375x17] baseline: 13.296875
"space-evenly"
TextNode <#text>
BlockContainer <div> at (12,3242) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,3242 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,3330) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,3330 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 5, rect: [12,3524 41.234375x17]
frag 0 from TextNode start: 0, length: 5, rect: [12,3524 41.234375x17] baseline: 13.296875
"start"
TextNode <#text>
BlockContainer <div> at (12,3472) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,3472 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,3420) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,3420 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 10, rect: [12,3970 76.8125x17]
frag 0 from TextNode start: 0, length: 10, rect: [12,3970 76.8125x17] baseline: 13.296875
"flex-start"
TextNode <#text>
BlockContainer <div> at (12,3918) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,3918 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,3866) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,3866 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 3, rect: [12,4272 26.1875x17]
frag 0 from TextNode start: 0, length: 3, rect: [12,4272 26.1875x17] baseline: 13.296875
"end"
TextNode <#text>
BlockContainer <div> at (12,4220) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,4220 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,4168) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,4168 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 8, rect: [12,4430 61.765625x17]
frag 0 from TextNode start: 0, length: 8, rect: [12,4430 61.765625x17] baseline: 13.296875
"flex-end"
TextNode <#text>
BlockContainer <div> at (12,4378) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,4378 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,4326) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,4326 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 6, rect: [12,4804 51.625x17]
frag 0 from TextNode start: 0, length: 6, rect: [12,4804 51.625x17] baseline: 13.296875
"center"
TextNode <#text>
BlockContainer <div> at (12,4752) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,4752 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,4700) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,4700 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,5154 107.96875x17]
frag 0 from TextNode start: 0, length: 12, rect: [12,5154 107.96875x17] baseline: 13.296875
"space-around"
TextNode <#text>
BlockContainer <div> at (12,5054) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,5054 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,4954) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,4954 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [12,5480 115.515625x17]
frag 0 from TextNode start: 0, length: 13, rect: [12,5480 115.515625x17] baseline: 13.296875
"space-between"
TextNode <#text>
BlockContainer <div> at (12,5356) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,5356 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,5232) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,5232 9.46875x17] baseline: 13.296875
"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, bottom: 17, baseline: 13.296875
frag 0 from TextNode start: 0, length: 12, rect: [12,5746 98.859375x17]
frag 0 from TextNode start: 0, length: 12, rect: [12,5746 98.859375x17] baseline: 13.296875
"space-evenly"
TextNode <#text>
BlockContainer <div> at (12,5658) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,5658 9.34375x17] baseline: 13.296875
"a"
TextNode <#text>
BlockContainer <div> at (12,5570) content-size 50x50 flex-item [BFC] children: inline
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]
frag 0 from TextNode start: 0, length: 1, rect: [12,5570 9.46875x17] baseline: 13.296875
"b"
TextNode <#text>
BlockContainer <(anonymous)> at (10,5834) content-size 780x0 children: inline