0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Propagate margin and offset when computing a box's baseline

Browse source 
When traversing the layout tree to find an appropriate box child to
derive the baseline from. Only the child's margin and offset was being
applied. Now we sum each offset on the recursive call.
This commit is contained in:
BenJilks 2024-07-15 16:07:06 +01:00 • committed by Andreas Kling
parent c8e29ad691
commit 3c897e7cf3
Notes: sideshowbarker 2024-07-16 17:12:03 +09:00
32 changed files with 134 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
Tests/LibWeb/Layout/expected/block-and-inline/button-baseline-align.txt
View file

@ -1,15 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x48 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 34
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 36
BlockContainer <div.ib> at (8,8) content-size 61.1875x48 inline-block [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22] baseline: 18
frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,27 17.828125x22] baseline: 18
frag 1 from TextNode start: 0, length: 1, rect: [28,30 8x17] baseline: 13.296875
" "
frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 34
frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 36
TextNode <#text>
BlockContainer <div.label> at (9,25) content-size 17.828125x22 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22] baseline: 17
BlockContainer <div.label> at (9,27) content-size 17.828125x22 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [9,27 17.828125x22] baseline: 17
"A"
TextNode <#text>
TextNode <#text>
@ -25,7 +25,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x48]
PaintableWithLines (BlockContainer<DIV>.ib) [8,8 61.1875x48]
PaintableWithLines (BlockContainer<DIV>.label) [8,24 19.828125x24]
PaintableWithLines (BlockContainer<DIV>.label) [8,26 19.828125x24]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x48]

2
Tests/LibWeb/Layout/expected/block-and-inline/button-image-only.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x424 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 420x420] baseline: 420
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 420x420] baseline: 422
BlockContainer <button> at (13,10) content-size 420x420 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 420x420 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 420x420 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/block-and-inline/button-should-have-vertically-aligned-content.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x200 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178] baseline: 70.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178] baseline: 81.296875
TextNode <#text>
BlockContainer <button.button.border-black> at (22,19) content-size 48.6875x178 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (22,19) content-size 48.6875x178 flex-container(column) [FFC] children: not-inline

2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-after-pseudo.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x75 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x59 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 42.484375
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 44.484375
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x55 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-before-pseudo.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x75 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x59 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 42.484375
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 44.484375
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x55 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 422.640625x57 positioned [BFC] children: inline
TextNode <#text>

14
Tests/LibWeb/Layout/expected/block-and-inline/button-with-block-content-baseline-align.txt
View file

@ -1,15 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x48 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 34
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 61.1875x48] baseline: 36
BlockContainer <div.ib> at (8,8) content-size 61.1875x48 inline-block [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,25 17.828125x22] baseline: 18
frag 1 from TextNode start: 0, length: 1, rect: [28,28 8x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,27 17.828125x22] baseline: 18
frag 1 from TextNode start: 0, length: 1, rect: [28,30 8x17] baseline: 13.296875
" "
frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 34
frag 2 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x44] baseline: 36
TextNode <#text>
BlockContainer <div.label> at (9,25) content-size 17.828125x22 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [9,25 17.828125x22] baseline: 17
BlockContainer <div.label> at (9,27) content-size 17.828125x22 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [9,27 17.828125x22] baseline: 17
"A"
TextNode <#text>
TextNode <#text>
@ -30,7 +30,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x48]
PaintableWithLines (BlockContainer<DIV>.ib) [8,8 61.1875x48]
PaintableWithLines (BlockContainer<DIV>.label) [8,24 19.828125x24]
PaintableWithLines (BlockContainer<DIV>.label) [8,26 19.828125x24]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x48]

2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-min-height.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x120 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x104 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 143.515625x100] baseline: 54.796875
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 143.515625x100] baseline: 56.796875
BlockContainer <button> at (13,10) content-size 143.515625x100 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 143.515625x100 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,51.5) content-size 143.515625x17 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-multiple-words-text-node-label.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17] baseline: 15.296875
BlockContainer <button> at (13,10) content-size 49.921875x17 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label-and-font-size.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x56 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 111.65625x52] baseline: 40.390625
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 111.65625x52] baseline: 42.390625
BlockContainer <button> at (13,10) content-size 111.65625x52 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/block-and-inline/button-with-text-node-label.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17] baseline: 15.296875
BlockContainer <button> at (13,10) content-size 37.21875x17 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17 flex-item [BFC] children: inline

4
Tests/LibWeb/Layout/expected/block-and-inline/inline-block-baseline-1.txt
View file

@ -1,9 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x92 children: inline
frag 0 from TextNode start: 0, length: 13, rect: [10,31 103.140625x17] baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [10,32 103.140625x17] baseline: 13.296875
"Hello friends"
frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 202x90] baseline: 34.296875
frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 202x90] baseline: 35.296875
TextNode <#text>
BlockContainer <div.ib> at (114,11) content-size 202x90 inline-block [BFC] children: not-inline
BlockContainer <div> at (115,12) content-size 200x17 children: inline

4
Tests/LibWeb/Layout/expected/block-and-inline/inline-block-baseline-2.txt
View file

@ -1,9 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x59 children: inline
frag 0 from TextNode start: 0, length: 13, rect: [10,31 103.140625x17] baseline: 13.296875
frag 0 from TextNode start: 0, length: 13, rect: [10,32 103.140625x17] baseline: 13.296875
"Hello friends"
frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 39.234375x57] baseline: 34.296875
frag 1 from BlockContainer start: 0, length: 0, rect: [114,11 39.234375x57] baseline: 35.296875
TextNode <#text>
BlockContainer <div.ib> at (114,11) content-size 39.234375x57 inline-block [BFC] children: not-inline
BlockContainer <div> at (115,12) content-size 37.234375x17 children: inline

2
Tests/LibWeb/Layout/expected/block-and-inline/margin-collapse-5.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x121 [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [2,2 168.96875x119] baseline: 15.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [2,2 168.96875x119] baseline: 16.296875
BlockContainer <body> at (2,2) content-size 168.96875x119 inline-block [BFC] children: not-inline
BlockContainer <div.hmm> at (3,3) content-size 166.96875x17 children: inline
frag 0 from TextNode start: 0, length: 21, rect: [3,3 166.96875x17] baseline: 13.296875

20
Tests/LibWeb/Layout/expected/box-sizing-border-box-for-definite-sizes-without-layout.txt
View file

@ -1,16 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x67 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x51 children: inline
frag 0 from Box start: 0, length: 0, rect: [28,39 49.71875x0] baseline: 6
Box <div.button> at (28,39) content-size 49.71875x0 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (28,28) content-size 49.71875x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [28,28 49.71875x22] baseline: 17
BlockContainer <html> at (0,0) content-size 800x56 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x40 children: inline
frag 0 from Box start: 0, length: 0, rect: [28,28 49.71875x0] baseline: 26
Box <div.button> at (28,28) content-size 49.71875x0 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (28,17) content-size 49.71875x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [28,17 49.71875x22] baseline: 17
"Hello"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x67]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x51]
PaintableBox (Box<DIV>.button) [8,19 89.71875x40]
PaintableWithLines (BlockContainer(anonymous)) [28,28 49.71875x22]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x56]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x40]
PaintableBox (Box<DIV>.button) [8,8 89.71875x40]
PaintableWithLines (BlockContainer(anonymous)) [28,17 49.71875x22]
TextPaintable (TextNode<#text>)

2
Tests/LibWeb/Layout/expected/css-line-height-zero.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x37 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 191.875x19] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 191.875x19] baseline: 14.296875
BlockContainer <input> at (9,9) content-size 191.875x19 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 187.875x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 187.875x17 flex-item [BFC] children: inline

39
Tests/LibWeb/Layout/expected/flex/inline-flex-baseline-of-child.txt Normal file
View file

@ -0,0 +1,39 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x106 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x88 children: not-inline
BlockContainer <div> at (11,11) content-size 778x86 children: inline
frag 0 from Box start: 0, length: 0, rect: [12,32 180x64] baseline: 14.296875
frag 1 from Box start: 0, length: 0, rect: [194,32 180x64] baseline: 34.296875
frag 2 from Box start: 0, length: 0, rect: [376,32 180x64] baseline: 14.296875
Box <span> at (12,32) content-size 180x64 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,32) content-size 6.34375x64 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [12,32 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
Box <span> at (194,32) content-size 180x64 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (194,32) content-size 8.8125x64 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [194,32 8.8125x17] baseline: 13.296875
"2"
TextNode <#text>
Box <span> at (376,32) content-size 180x64 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (376,32) content-size 9.09375x64 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 1, rect: [376,32 9.09375x17] baseline: 13.296875
"3"
TextNode <#text>
BlockContainer <(anonymous)> at (10,98) content-size 780x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x108]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x90]
PaintableWithLines (BlockContainer<DIV>) [10,10 780x88]
PaintableBox (Box<SPAN>) [11,31 182x66]
PaintableWithLines (BlockContainer(anonymous)) [12,32 6.34375x64]
TextPaintable (TextNode<#text>)
PaintableBox (Box<SPAN>) [193,31 182x66]
PaintableWithLines (BlockContainer(anonymous)) [194,32 8.8125x64]
TextPaintable (TextNode<#text>)
PaintableBox (Box<SPAN>) [375,31 182x66]
PaintableWithLines (BlockContainer(anonymous)) [376,32 9.09375x64]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [10,98 780x0]

2
Tests/LibWeb/Layout/expected/flex/inline-flex-early-resolution-of-percentage-height.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x216 [BFC] children: inline
frag 0 from Box start: 0, length: 0, rect: [8,8 200x200] baseline: 13.296875
frag 0 from Box start: 0, length: 0, rect: [8,8 200x200] baseline: 21.296875
Box <body> at (8,8) content-size 200x200 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (8,8) content-size 200x200 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [8,8 36.84375x17] baseline: 13.296875

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

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 500x37 [BFC] children: inline
frag 0 from Box start: 0, length: 0, rect: [10,10 162.40625x19] baseline: 15.296875
frag 0 from Box start: 0, length: 0, rect: [10,10 162.40625x19] baseline: 24.296875
Box <body> at (10,10) content-size 162.40625x19 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,11) content-size 160.40625x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 20, rect: [11,11 160.40625x17] baseline: 13.296875

2
Tests/LibWeb/Layout/expected/grid/inline-grid-simple.txt
View file

@ -1,6 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: inline
frag 0 from Box start: 0, length: 0, rect: [8,8 26.953125x17] baseline: 13.296875
frag 0 from Box start: 0, length: 0, rect: [8,8 26.953125x17] baseline: 21.296875
Box <body> at (8,8) content-size 26.953125x17 [GFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 26.953125x17 [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [8,8 26.953125x17] baseline: 13.296875

40
Tests/LibWeb/Layout/expected/input-file.txt
View file

@ -1,52 +1,52 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 236.65625x21] baseline: 13.296875
frag 1 from TextNode start: 0, length: 1, rect: [245,8 8x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [8,8 236.65625x21] baseline: 15.296875
frag 1 from TextNode start: 0, length: 1, rect: [245,10 8x17] baseline: 13.296875
" "
frag 2 from BlockContainer start: 0, length: 0, rect: [253,8 255.34375x21] baseline: 13.296875
frag 3 from TextNode start: 0, length: 1, rect: [508,8 8x17] baseline: 13.296875
frag 2 from BlockContainer start: 0, length: 0, rect: [253,8 255.34375x21] baseline: 15.296875
frag 3 from TextNode start: 0, length: 1, rect: [508,10 8x17] baseline: 13.296875
" "
frag 4 from BlockContainer start: 0, length: 0, rect: [516,8 255.34375x21] baseline: 13.296875
frag 4 from BlockContainer start: 0, length: 0, rect: [516,8 255.34375x21] baseline: 15.296875
BlockContainer <input> at (8,8) content-size 236.65625x21 inline-block [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 94.375x17] baseline: 13.296875
frag 1 from Label start: 0, length: 0, rect: [116,8 128.28125x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 94.375x17] baseline: 15.296875
frag 1 from Label start: 0, length: 0, rect: [116,10 128.28125x17] baseline: 13.296875
BlockContainer <button> at (13,10) content-size 94.375x17 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 94.375x17 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 94.375x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 14, rect: [13,10 94.375x17] baseline: 13.296875
"Select file..."
TextNode <#text>
Label <label> at (116,8) content-size 128.28125x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 17, rect: [116,8 128.28125x17] baseline: 13.296875
Label <label> at (116,10) content-size 128.28125x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 17, rect: [116,10 128.28125x17] baseline: 13.296875
"No file selected."
TextNode <#text>
TextNode <#text>
BlockContainer <input> at (253,8) content-size 255.34375x21 inline-block [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [258,10 103.71875x17] baseline: 13.296875
frag 1 from Label start: 0, length: 0, rect: [371,8 137.625x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [258,10 103.71875x17] baseline: 15.296875
frag 1 from Label start: 0, length: 0, rect: [371,10 137.625x17] baseline: 13.296875
BlockContainer <button> at (258,10) content-size 103.71875x17 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (258,10) content-size 103.71875x17 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (258,10) content-size 103.71875x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 15, rect: [258,10 103.71875x17] baseline: 13.296875
"Select files..."
TextNode <#text>
Label <label> at (371,8) content-size 137.625x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 18, rect: [371,8 137.625x17] baseline: 13.296875
Label <label> at (371,10) content-size 137.625x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 18, rect: [371,10 137.625x17] baseline: 13.296875
"No files selected."
TextNode <#text>
TextNode <#text>
BlockContainer <input#multiple> at (516,8) content-size 255.34375x21 inline-block [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [521,10 103.71875x17] baseline: 13.296875
frag 1 from Label start: 0, length: 0, rect: [634,8 137.625x17] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [521,10 103.71875x17] baseline: 15.296875
frag 1 from Label start: 0, length: 0, rect: [634,10 137.625x17] baseline: 13.296875
BlockContainer <button> at (521,10) content-size 103.71875x17 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (521,10) content-size 103.71875x17 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (521,10) content-size 103.71875x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 15, rect: [521,10 103.71875x17] baseline: 13.296875
"Select files..."
TextNode <#text>
Label <label> at (634,8) content-size 137.625x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 18, rect: [634,8 137.625x17] baseline: 13.296875
Label <label> at (634,10) content-size 137.625x17 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 18, rect: [634,10 137.625x17] baseline: 13.296875
"No files selected."
TextNode <#text>
TextNode <#text>
@ -60,7 +60,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer(anonymous)) [13,10 94.375x17]
PaintableWithLines (BlockContainer(anonymous)) [13,10 94.375x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (Label<LABEL>) [112,8 132.28125x17]
PaintableWithLines (Label<LABEL>) [112,10 132.28125x17]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>) [253,8 255.34375x21] overflow: [253,8 255.625x21]
@ -68,7 +68,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer(anonymous)) [258,10 103.71875x17]
PaintableWithLines (BlockContainer(anonymous)) [258,10 103.71875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (Label<LABEL>) [367,8 141.625x17]
PaintableWithLines (Label<LABEL>) [367,10 141.625x17]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>#multiple) [516,8 255.34375x21] overflow: [516,8 255.625x21]
@ -76,5 +76,5 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer(anonymous)) [521,10 103.71875x17]
PaintableWithLines (BlockContainer(anonymous)) [521,10 103.71875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (Label<LABEL>) [630,8 141.625x17]
PaintableWithLines (Label<LABEL>) [630,10 141.625x17]
TextPaintable (TextNode<#text>)

2
Tests/LibWeb/Layout/expected/input-image-to-text.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 14.296875
BlockContainer <input> at (9,9) content-size 189.875x19 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 185.875x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 185.875x17 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/input-password-to-text.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 14.296875
BlockContainer <input> at (9,9) content-size 189.875x19 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 185.875x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 185.875x17 flex-item [BFC] children: inline

12
Tests/LibWeb/Layout/expected/input-placeholder.txt
View file

@ -1,14 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x68 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x52 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 200x24] baseline: 17
frag 1 from TextNode start: 0, length: 1, rect: [210,8 10x22] baseline: 17
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 200x24] baseline: 18
frag 1 from TextNode start: 0, length: 1, rect: [210,9 10x22] baseline: 17
" "
frag 2 from BlockContainer start: 0, length: 0, rect: [221,9 200x24] baseline: 17
frag 3 from TextNode start: 0, length: 1, rect: [422,8 10x22] baseline: 17
frag 2 from BlockContainer start: 0, length: 0, rect: [221,9 200x24] baseline: 18
frag 3 from TextNode start: 0, length: 1, rect: [422,9 10x22] baseline: 17
" "
frag 4 from BlockContainer start: 0, length: 0, rect: [433,9 200x24] baseline: 17
frag 5 from BlockContainer start: 0, length: 0, rect: [9,35 200x24] baseline: 17
frag 4 from BlockContainer start: 0, length: 0, rect: [433,9 200x24] baseline: 18
frag 5 from BlockContainer start: 0, length: 0, rect: [9,35 200x24] baseline: 18
BlockContainer <input> at (9,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 196x22 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/input-text-node-invalidation-on-value-change.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x42 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x26 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 200x24] baseline: 17
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 200x24] baseline: 18
BlockContainer <input#foo> at (9,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 196x22 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/input-text-to-password.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 189.875x19] baseline: 14.296875
BlockContainer <input> at (9,9) content-size 189.875x19 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 185.875x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 185.875x17 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/select-with-option-selected.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x37 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x21 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 89.109375x17] baseline: 16.5
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 89.109375x17] baseline: 18.5
BlockContainer <select> at (13,10) content-size 89.109375x17 inline-block [BFC] children: not-inline
Box <div> at (13,10) content-size 89.109375x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (13,10) content-size 69.109375x17 flex-item [BFC] children: inline

2
Tests/LibWeb/Layout/expected/table/border-collapse-is-inherited.txt
View file

@ -6,7 +6,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.horizontal> at (8,8) content-size 784x197 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 161.90625x195] baseline: 12.796875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 161.90625x195] baseline: 13.796875
TextNode <#text>
BlockContainer <table> at (9,9) content-size 161.90625x195 inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 161.90625x0 children: inline

2
Tests/LibWeb/Layout/expected/table/inline-table-width.txt
View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x46 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 135.984375x44] baseline: 12.796875
frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 135.984375x44] baseline: 13.796875
BlockContainer <table> at (9,9) content-size 135.984375x44 inline-block [BFC] children: not-inline
TableWrapper <(anonymous)> at (9,9) content-size 135.984375x44 inline-block [BFC] children: not-inline
Box <(anonymous)> at (9,9) content-size 135.984375x44 inline-table table-box [TFC] children: not-inline

8
Tests/LibWeb/Layout/expected/textarea-content.txt
View file

@ -1,11 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x50 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 240x44] baseline: 17
frag 1 from TextNode start: 0, length: 1, rect: [254,8 10x22] baseline: 17
frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 240x44] baseline: 20
frag 1 from TextNode start: 0, length: 1, rect: [254,11 10x22] baseline: 17
" "
frag 2 from BlockContainer start: 0, length: 0, rect: [267,11 240x44] baseline: 17
frag 3 from BlockContainer start: 0, length: 0, rect: [513,11 240x44] baseline: 17
frag 2 from BlockContainer start: 0, length: 0, rect: [267,11 240x44] baseline: 20
frag 3 from BlockContainer start: 0, length: 0, rect: [513,11 240x44] baseline: 20
TextNode <#text>
BlockContainer <textarea> at (11,11) content-size 240x44 inline-block [BFC] children: not-inline
BlockContainer <div> at (11,11) content-size 240x22 children: not-inline

2
Tests/LibWeb/Layout/expected/textarea-reset.txt
View file

@ -2,7 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
BlockContainer <form#form> at (8,8) content-size 784x34 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 185.875x28] baseline: 13.296875
frag 0 from BlockContainer start: 0, length: 0, rect: [11,11 185.875x28] baseline: 16.296875
TextNode <#text>
BlockContainer <textarea#textarea> at (11,11) content-size 185.875x28 inline-block [BFC] children: not-inline
BlockContainer <div> at (11,11) content-size 185.875x17 children: not-inline

15
Tests/LibWeb/Layout/input/flex/inline-flex-baseline-of-child.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<style>
* {
border: 1px solid grey;
}
span {
display: inline-flex;
width: 180px;
height: 64px;
background: yellow;
}
</style>
<div><span>1</span><span style="margin-top: 20px">2</span><span>3</span></div>

2
Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
View file

@ -1886,7 +1886,7 @@ CSSPixels FormattingContext::box_baseline(Box const& box) const
if (!box_state.line_boxes.is_empty())
return box_state.margin_box_top() + box_state.offset.y() + box_state.line_boxes.last().baseline();
if (auto const* child_box = box_child_to_derive_baseline_from(box)) {
return box_baseline(*child_box);
return box_state.margin_box_top() + box_state.offset.y() + box_baseline(*child_box);
}
// If none of the children have a baseline set, the bottom margin edge of the box is used.
return box_state.margin_box_height();