system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 02:26:11 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Adjust 4 abspos tests to highlight errors

Browse source 
The tests still pass, but opening the files in Ladybird and Safari or
Firefox shows clearly where the layouting in Ladybird is incorrect
for some absolute positioned elements. The previous 1px border was
subtly hiding some issues.
This commit is contained in:
Sebastian Zaha 2023-07-07 16:29:40 +02:00 committed by Andreas Kling
parent d77986f01c
commit 6a66a05809
7 changed files with 171 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/flex-abspos-item-with-preceding-whitespace.txt
View file

@ -1,7 +1,8 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x20 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x2 children: not-inline
Box <div.pink> at (11,11) content-size 778x0 flex-container(row) [FFC] children: not-inline
BlockContainer <html> at (10,10) content-size 780x56 [BFC] children: not-inline
BlockContainer <body> at (28,28) content-size 744x20 children: not-inline
Box <div.pink> at (38,38) content-size 724x0 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.orange> at (11,-39) content-size 100x100 positioned [BFC] children: not-inline
BlockContainer <div.orange> at (38,-12) content-size 100x100 positioned [BFC] children: inline
TextNode <#text>

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

@ -1,76 +1,76 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x322 [BFC] children: not-inline
Box <body> at (10,10) content-size 780x304 flex-container(row) [FFC] children: not-inline
BlockContainer <html> at (10,10) content-size 780x546 [BFC] children: not-inline
Box <body> at (28,28) content-size 744x510 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.normal> at (11,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (11,12) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.normal> at (38,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (38,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: [11,12 54.578125x17.46875]
frag 0 from TextNode start: 0, length: 6, rect: [38,48 54.578125x17.46875]
"normal"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.stretch> at (163,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (163,12) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.stretch> at (208,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (208,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: [163,12 58.796875x17.46875]
frag 0 from TextNode start: 0, length: 7, rect: [208,48 58.796875x17.46875]
"stretch"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.start> at (315,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (315,12) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.start> at (378,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (378,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: [315,12 41.234375x17.46875]
frag 0 from TextNode start: 0, length: 5, rect: [378,48 41.234375x17.46875]
"start"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.flex-start> at (467,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (467,12) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.flex-start> at (548,38) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (548,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: [467,12 76.8125x17.46875]
frag 0 from TextNode start: 0, length: 10, rect: [548,48 76.8125x17.46875]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.end> at (619,11) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (619,110) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.end> at (38,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (38,298) 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: [619,110 26.1875x17.46875]
frag 0 from TextNode start: 0, length: 3, rect: [38,298 26.1875x17.46875]
"end"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.flex-end> at (11,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (11,262) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.flex-end> at (208,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (208,298) 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: [11,262 61.765625x17.46875]
frag 0 from TextNode start: 0, length: 8, rect: [208,298 61.765625x17.46875]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.center> at (163,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (163,213) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.center> at (378,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (378,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: [163,213 51.625x17.46875]
frag 0 from TextNode start: 0, length: 6, rect: [378,258 51.625x17.46875]
"center"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.self-start> at (315,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (315,164) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.self-start> at (548,208) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (548,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: [315,164 76.453125x17.46875]
frag 0 from TextNode start: 0, length: 10, rect: [548,218 76.453125x17.46875]
"self-start"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
Box <div.outer.self-end> at (467,163) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (467,262) content-size 150x50 positioned [BFC] children: inline
Box <div.outer.self-end> at (38,378) content-size 150x150 flex-container(row) flex-item [FFC] children: not-inline
BlockContainer <div> at (38,468) 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: [467,262 61.40625x17.46875]
frag 0 from TextNode start: 0, length: 8, rect: [38,468 61.40625x17.46875]
"self-end"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline

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

@ -1,261 +1,261 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x2002 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x1984 children: not-inline
BlockContainer <(anonymous)> at (10,10) content-size 780x0 children: inline
BlockContainer <html> at (15,15) content-size 770x2926 [BFC] children: not-inline
BlockContainer <body> at (38,38) content-size 724x2880 children: not-inline
BlockContainer <(anonymous)> at (38,38) content-size 724x0 children: inline
TextNode <#text>
Box <div.row.outer.start> at (11,11) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,12) content-size 150x50 positioned [BFC] children: inline
Box <div.row.outer.start> at (53,53) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (53,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: [11,12 41.234375x17.46875]
frag 0 from TextNode start: 0, length: 5, rect: [53,68 41.234375x17.46875]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,72) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,128) content-size 724x0 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 (11,74) content-size 150x50 positioned [BFC] children: inline
Box <div.row.outer.flex-start> at (53,143) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (53,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: [11,74 76.8125x17.46875]
frag 0 from TextNode start: 0, length: 10, rect: [53,158 76.8125x17.46875]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,134) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,218) content-size 724x0 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 (161,136) content-size 150x50 positioned [BFC] children: inline
Box <div.row.outer.end> at (53,233) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (203,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: [161,136 26.1875x17.46875]
frag 0 from TextNode start: 0, length: 3, rect: [203,248 26.1875x17.46875]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,196) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,308) content-size 724x0 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 (161,198) content-size 150x50 positioned [BFC] children: inline
Box <div.row.outer.flex-end> at (53,323) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (203,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: [161,198 61.765625x17.46875]
frag 0 from TextNode start: 0, length: 8, rect: [203,338 61.765625x17.46875]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,258) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,398) content-size 724x0 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 (86,260) content-size 150x50 positioned [BFC] children: inline
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: [86,260 51.625x17.46875]
frag 0 from TextNode start: 0, length: 6, rect: [128,428 51.625x17.46875]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (10,320) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,488) content-size 724x0 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 (86,322) content-size 150x50 positioned [BFC] children: inline
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: [86,322 107.96875x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [128,518 107.96875x17.46875]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (10,382) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,578) content-size 724x0 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 (11,384) content-size 150x50 positioned [BFC] children: inline
Box <div.row.outer.space-between> at (53,593) content-size 300x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (53,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: [11,384 115.515625x17.46875]
frag 0 from TextNode start: 0, length: 13, rect: [53,608 115.515625x17.46875]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (10,444) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,668) content-size 724x0 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 (86,446) content-size 150x50 positioned [BFC] children: inline
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: [86,446 98.859375x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [128,698 98.859375x17.46875]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (10,506) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,758) content-size 724x0 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 (161,508) content-size 150x50 positioned [BFC] children: inline
Box <div.row.reverse.outer.start> at (53,773) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (203,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: [161,508 41.234375x17.46875]
frag 0 from TextNode start: 0, length: 5, rect: [203,788 41.234375x17.46875]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,568) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,848) content-size 724x0 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 (161,570) content-size 150x50 positioned [BFC] children: inline
Box <div.row.reverse.outer.flex-start> at (53,863) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (203,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: [161,570 76.8125x17.46875]
frag 0 from TextNode start: 0, length: 10, rect: [203,878 76.8125x17.46875]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,630) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,938) content-size 724x0 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 (11,632) content-size 150x50 positioned [BFC] children: inline
Box <div.row.reverse.outer.end> at (53,953) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (53,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: [11,632 26.1875x17.46875]
frag 0 from TextNode start: 0, length: 3, rect: [53,968 26.1875x17.46875]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,692) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1028) content-size 724x0 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 (11,694) content-size 150x50 positioned [BFC] children: inline
Box <div.row.reverse.outer.flex-end> at (53,1043) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (53,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: [11,694 61.765625x17.46875]
frag 0 from TextNode start: 0, length: 8, rect: [53,1058 61.765625x17.46875]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,754) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1118) content-size 724x0 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 (86,756) content-size 150x50 positioned [BFC] children: inline
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: [86,756 51.625x17.46875]
frag 0 from TextNode start: 0, length: 6, rect: [128,1148 51.625x17.46875]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (10,816) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1208) content-size 724x0 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 (86,818) content-size 150x50 positioned [BFC] children: inline
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: [86,818 107.96875x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [128,1238 107.96875x17.46875]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (10,878) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1298) content-size 724x0 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 (11,880) content-size 150x50 positioned [BFC] children: inline
Box <div.row.reverse.outer.space-between> at (53,1313) content-size 300x60 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (53,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: [11,880 115.515625x17.46875]
frag 0 from TextNode start: 0, length: 13, rect: [53,1328 115.515625x17.46875]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (10,940) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1388) content-size 724x0 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 (86,942) content-size 150x50 positioned [BFC] children: inline
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: [86,942 98.859375x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [128,1418 98.859375x17.46875]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1002) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1478) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.start> at (11,1003) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1003) content-size 150x50 positioned [BFC] children: inline
Box <div.column.outer.start> at (53,1493) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1493) 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: [12,1003 41.234375x17.46875]
frag 0 from TextNode start: 0, length: 5, rect: [68,1493 41.234375x17.46875]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1064) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1568) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-start> at (11,1065) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1065) content-size 150x50 positioned [BFC] children: inline
Box <div.column.outer.flex-start> at (53,1583) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1583) 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: [12,1065 76.8125x17.46875]
frag 0 from TextNode start: 0, length: 10, rect: [68,1583 76.8125x17.46875]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1126) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1658) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.end> at (11,1127) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1137) content-size 150x50 positioned [BFC] children: inline
Box <div.column.outer.end> at (53,1673) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1683) 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: [12,1137 26.1875x17.46875]
frag 0 from TextNode start: 0, length: 3, rect: [68,1683 26.1875x17.46875]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1188) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1748) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.flex-end> at (11,1189) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1199) content-size 150x50 positioned [BFC] children: inline
Box <div.column.outer.flex-end> at (53,1763) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,1773) 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: [12,1199 61.765625x17.46875]
frag 0 from TextNode start: 0, length: 8, rect: [68,1773 61.765625x17.46875]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1250) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1838) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.center> at (11,1251) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1256) content-size 150x50 positioned [BFC] children: inline
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: [12,1256 51.625x17.46875]
frag 0 from TextNode start: 0, length: 6, rect: [68,1858 51.625x17.46875]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1312) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,1928) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.space-around> at (11,1313) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1318) content-size 150x50 positioned [BFC] children: inline
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: [12,1318 107.96875x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [68,1948 107.96875x17.46875]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1374) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2018) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.space-between> at (11,1375) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1375) content-size 150x50 positioned [BFC] children: inline
Box <div.column.outer.space-between> at (53,2033) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (68,2033) 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: [12,1375 115.515625x17.46875]
frag 0 from TextNode start: 0, length: 13, rect: [68,2033 115.515625x17.46875]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1436) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2108) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.outer.space-evenly> at (11,1437) content-size 300x60 flex-container(column) [FFC] children: not-inline
BlockContainer <div> at (12,1442) content-size 150x50 positioned [BFC] children: inline
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: [12,1442 98.859375x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [68,2128 98.859375x17.46875]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1498) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2198) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.start> at (11,1499) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1509) content-size 150x50 positioned [BFC] children: inline
Box <div.column.reverse.outer.start> at (53,2213) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2223) 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: [12,1509 41.234375x17.46875]
frag 0 from TextNode start: 0, length: 5, rect: [68,2223 41.234375x17.46875]
"start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1560) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2288) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-start> at (11,1561) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1571) content-size 150x50 positioned [BFC] children: inline
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,2313) 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: [12,1571 76.8125x17.46875]
frag 0 from TextNode start: 0, length: 10, rect: [68,2313 76.8125x17.46875]
"flex-start"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1622) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2378) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.end> at (11,1623) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1623) content-size 150x50 positioned [BFC] children: inline
Box <div.column.reverse.outer.end> at (53,2393) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (68,2393) 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: [12,1623 26.1875x17.46875]
frag 0 from TextNode start: 0, length: 3, rect: [68,2393 26.1875x17.46875]
"end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1684) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2468) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.flex-end> at (11,1685) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1685) content-size 150x50 positioned [BFC] children: inline
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,2483) 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: [12,1685 61.765625x17.46875]
frag 0 from TextNode start: 0, length: 8, rect: [68,2483 61.765625x17.46875]
"flex-end"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1746) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2558) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.center> at (11,1747) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1752) content-size 150x50 positioned [BFC] children: inline
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: [12,1752 51.625x17.46875]
frag 0 from TextNode start: 0, length: 6, rect: [68,2578 51.625x17.46875]
"center"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1808) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2648) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-around> at (11,1809) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1814) content-size 150x50 positioned [BFC] children: inline
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: [12,1814 107.96875x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [68,2668 107.96875x17.46875]
"space-around"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1870) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2738) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-between> at (11,1871) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1871) content-size 150x50 positioned [BFC] children: inline
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,2753) 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: [12,1871 115.515625x17.46875]
frag 0 from TextNode start: 0, length: 13, rect: [68,2753 115.515625x17.46875]
"space-between"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1932) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2828) content-size 724x0 children: inline
TextNode <#text>
Box <div.column.reverse.outer.space-evenly> at (11,1933) content-size 300x60 flex-container(column-reverse) [FFC] children: not-inline
BlockContainer <div> at (12,1938) content-size 150x50 positioned [BFC] children: inline
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: [12,1938 98.859375x17.46875]
frag 0 from TextNode start: 0, length: 12, rect: [68,2848 98.859375x17.46875]
"space-evenly"
TextNode <#text>
BlockContainer <(anonymous)> at (10,1994) content-size 780x0 children: inline
BlockContainer <(anonymous)> at (38,2918) content-size 724x0 children: inline
TextNode <#text>

4
Tests/LibWeb/Layout/input/flex-abspos-item-with-preceding-whitespace.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html><html><head><style>
* {
border: 1px solid black !important;
border: 10px solid black !important;
}
.pink {
background: pink;
@ -13,4 +13,4 @@
height: 100px;
position: absolute;
}
</style></head><body><div class="pink"> <div class="orange">
</style></head><body><div class="pink"> <div class="orange">

2
Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-align-items.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html><style>
* {
border: 1px solid black !important;
border: 10px solid black !important;
}
body {
display: flex;

4
Tests/LibWeb/Layout/input/flex/abspos-flex-child-static-position-with-justify-content.html
View file

@ -1,6 +1,6 @@
<!DOCTYPE html><style>
* {
border: 1px solid black !important;
border: 15px solid black;
}
.outer {
display: flex;
@ -23,7 +23,7 @@
.space-between { justify-content: space-between; }
.space-evenly { justify-content: space-evenly; }
.row { flex-direction: row; }
.row { flex-direction: row; border-color: red; }
.row.reverse { flex-direction: row-reverse; }
.column { flex-direction: column; }
.column.reverse { flex-direction: column-reverse; }

2
Tests/LibWeb/Layout/input/position-absolute-from-edges.html
View file

@ -3,7 +3,7 @@
position: absolute;
width: 500px;
height: 400px;
border: 1px solid black;
border: 20px solid black;
}
#red {
position: absolute;