mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-12-27 21:21:50 +03:00
LibWeb: Adjust 4 abspos tests to highlight errors
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
Andreas Kling
parent
d77986f01c
commit
6a66a05809
Notes:
sideshowbarker
2024-07-17 07:20:49 +09:00
Author: https://github.com/SebastianZaha Commit: https://github.com/SerenityOS/serenity/commit/6a66a05809 Pull-request: https://github.com/SerenityOS/serenity/pull/19866
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html><style>
|
||||
* {
|
||||
border: 1px solid black !important;
|
||||
border: 10px solid black !important;
|
||||
}
|
||||
body {
|
||||
display: flex;
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
border: 20px solid black;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user