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

LibWeb: Use flex layout for button content alignment

Browse source 
Using flex layout inside button solves the issue with wrongly calculated
height when it has: pseudo element and whitespaces inside.

Also using flex instead of a table layout allows for the same vertical
alignment but with fewer layout nodes: a flex container and anonymous
wrapper for content instead of a table wrapper, table, row, and cell.
This commit is contained in:
Aliaksandr Kalenik 2023-09-03 11:07:38 +02:00 • committed by Andreas Kling
parent 3216cc34a6
commit ed0dc2ff72
11 changed files with 145 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,15 +18,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <button> at (41,10) content-size 23.359375x43.671875 inline-block [BFC] children: inline
line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
frag 0 from TableWrapper start: 0, length: 0, rect: [41,10 23.359375x43.671875]
TableWrapper <(anonymous)> at (41,10) content-size 23.359375x43.671875 [BFC] children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-box [TFC] children: not-inline
Box <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-row children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-cell [BFC] children: inline
line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x43.671875]
"B"
TextNode <#text>
frag 0 from BlockContainer start: 0, length: 0, rect: [41,10 23.359375x43.671875]
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 flex-item [BFC] children: inline
line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x43.671875]
"B"
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
@ -37,8 +35,6 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x47.671875]
PaintableWithLines (TableWrapper(anonymous)) [41,10 23.359375x43.671875]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
PaintableBox (Box(anonymous)) [41,10 23.359375x43.671875]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)

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

@ -5,24 +5,20 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 420x415.203125]
BlockContainer <button> at (13,10) content-size 420x415.203125 inline-block [BFC] children: inline
line 0 width: 420, height: 415.203125, bottom: 415.203125, baseline: 420
frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 420x420]
TableWrapper <(anonymous)> at (13,10) content-size 420x420 [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 420x420 table-box [TFC] children: not-inline
Box <(anonymous)> at (13,10) content-size 420x420 table-row children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 420x420 table-cell [BFC] children: inline
line 0 width: 420, height: 420, bottom: 420, baseline: 420
frag 0 from ImageBox start: 0, length: 0, rect: [13,10 420x420]
TextNode <#text>
ImageBox <img> at (13,10) content-size 420x420 children: not-inline
TextNode <#text>
TextNode <#text>
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 420x420]
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
line 0 width: 420, height: 420, bottom: 420, baseline: 420
frag 0 from ImageBox start: 0, length: 0, rect: [13,10 420x420]
TextNode <#text>
ImageBox <img> at (13,10) content-size 420x420 children: not-inline
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x419.203125]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 430x419.203125] overflow: [9,9 428x421]
PaintableWithLines (TableWrapper(anonymous)) [13,10 420x420]
PaintableWithLines (BlockContainer(anonymous)) [13,10 420x420]
PaintableWithLines (BlockContainer(anonymous)) [13,10 420x420]
PaintableBox (Box(anonymous)) [13,10 420x420]
PaintableWithLines (BlockContainer(anonymous)) [13,10 420x420]
ImagePaintable (ImageBox<IMG>) [13,10 420x420]
ImagePaintable (ImageBox<IMG>) [13,10 420x420]

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

@ -5,39 +5,35 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from BlockContainer start: 0, length: 0, rect: [22,19 48.6875x178]
TextNode <#text>
BlockContainer <button.button.border-black> at (22,19) content-size 48.6875x178 inline-block [BFC] children: not-inline
TableWrapper <(anonymous)> at (22,19) content-size 48.6875x178 [BFC] children: not-inline
BlockContainer <(anonymous)> at (22,19) content-size 48.6875x178 table-box [TFC] children: not-inline
Box <(anonymous)> at (22,19) content-size 48.6875x178 table-row children: not-inline
BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x157.46875 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x0 children: inline
TextNode <#text>
BlockContainer <div.border-black> at (32,39.265625) content-size 28.6875x17.46875 children: inline
line 0 width: 28.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [32,39.265625 28.6875x17.46875]
"one"
TextNode <#text>
BlockContainer <(anonymous)> at (22,66.734375) content-size 48.6875x0 children: inline
TextNode <#text>
BlockContainer <div.border-black> at (32,76.734375) content-size 28.6875x100 children: inline
line 0 width: 28.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [32,76.734375 28.4375x17.46875]
"two"
TextNode <#text>
BlockContainer <(anonymous)> at (22,186.734375) content-size 48.6875x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (22,19) content-size 48.6875x178 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x157.46875 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> at (22,29.265625) content-size 48.6875x0 children: inline
TextNode <#text>
BlockContainer <div.border-black> at (32,39.265625) content-size 28.6875x17.46875 children: inline
line 0 width: 28.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [32,39.265625 28.6875x17.46875]
"one"
TextNode <#text>
BlockContainer <(anonymous)> at (22,66.734375) content-size 48.6875x0 children: inline
TextNode <#text>
BlockContainer <div.border-black> at (32,76.734375) content-size 28.6875x100 children: inline
line 0 width: 28.4375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 3, rect: [32,76.734375 28.4375x17.46875]
"two"
TextNode <#text>
BlockContainer <(anonymous)> at (22,186.734375) content-size 48.6875x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
PaintableWithLines (BlockContainer<BUTTON>.button.border-black) [8,8 76.6875x200]
PaintableWithLines (TableWrapper(anonymous)) [22,19 48.6875x178]
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x178]
PaintableBox (Box(anonymous)) [22,19 48.6875x178]
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x178]
PaintableWithLines (BlockContainer(anonymous)) [22,29.265625 48.6875x0]
PaintableWithLines (BlockContainer<DIV>.border-black) [22,29.265625 48.6875x37.46875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [22,66.734375 48.6875x0]
PaintableWithLines (BlockContainer<DIV>.border-black) [22,66.734375 48.6875x120]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [22,186.734375 48.6875x0]
PaintableWithLines (BlockContainer(anonymous)) [22,19 48.6875x178]
PaintableWithLines (BlockContainer(anonymous)) [22,29.265625 48.6875x157.46875]
PaintableWithLines (BlockContainer(anonymous)) [22,29.265625 48.6875x0]
PaintableWithLines (BlockContainer<DIV>.border-black) [22,29.265625 48.6875x37.46875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [22,66.734375 48.6875x0]
PaintableWithLines (BlockContainer<DIV>.border-black) [22,66.734375 48.6875x120]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [22,186.734375 48.6875x0]

19
Tests/LibWeb/Layout/expected/block-and-inline/button-with-abspos-pseudo-element.txt Normal file
View file

@ -0,0 +1,19 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x58 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x42 children: inline
line 0 width: 42, height: 42, bottom: 42, baseline: 42
frag 0 from BlockContainer start: 0, length: 0, rect: [29,29 0x0]
BlockContainer <button> at (29,29) content-size 0x0 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (29,29) content-size 0x0 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (29,29) content-size 0x0 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 40x40 positioned [BFC] children: inline
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x58]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x42]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 42x42]
PaintableWithLines (BlockContainer(anonymous)) [29,29 0x0] overflow: [9,9 40x40]
PaintableWithLines (BlockContainer(anonymous)) [29,29 0x0] overflow: [9,9 40x40]
PaintableWithLines (BlockContainer(anonymous)) [9,9 40x40]

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

@ -17,19 +17,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <button> at (41,10) content-size 23.359375x43.671875 inline-block [BFC] children: not-inline
TableWrapper <(anonymous)> at (41,10) content-size 23.359375x43.671875 [BFC] children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-box [TFC] children: not-inline
Box <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-row children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x0 children: inline
TextNode <#text>
BlockContainer <div> at (41,10) content-size 23.359375x43.671875 children: inline
line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x43.671875]
"B"
TextNode <#text>
BlockContainer <(anonymous)> at (41,53.671875) content-size 23.359375x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x43.671875 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> at (41,10) content-size 23.359375x0 children: inline
TextNode <#text>
BlockContainer <div> at (41,10) content-size 23.359375x43.671875 children: inline
line 0 width: 23.359375, height: 43.671875, bottom: 43.671875, baseline: 33.828125
frag 0 from TextNode start: 0, length: 1, rect: [41,10 23.359375x43.671875]
"B"
TextNode <#text>
BlockContainer <(anonymous)> at (41,53.671875) content-size 23.359375x0 children: inline
TextNode <#text>
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
@ -40,11 +38,9 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<BUTTON>) [36,8 33.359375x47.671875]
PaintableWithLines (TableWrapper(anonymous)) [41,10 23.359375x43.671875]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
PaintableBox (Box(anonymous)) [41,10 23.359375x43.671875]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x43.671875]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x0]
PaintableWithLines (BlockContainer<DIV>) [41,10 23.359375x43.671875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [41,53.671875 23.359375x0]
PaintableWithLines (BlockContainer(anonymous)) [41,10 23.359375x0]
PaintableWithLines (BlockContainer<DIV>) [41,10 23.359375x43.671875]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [41,53.671875 23.359375x0]

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

@ -5,22 +5,18 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17.46875]
BlockContainer <button> at (13,10) content-size 49.921875x17.46875 inline-block [BFC] children: inline
line 0 width: 49.921875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 49.921875x17.46875]
TableWrapper <(anonymous)> at (13,10) content-size 49.921875x17.46875 [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17.46875 table-box [TFC] children: not-inline
Box <(anonymous)> at (13,10) content-size 49.921875x17.46875 table-row children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17.46875 table-cell [BFC] children: inline
line 0 width: 49.921875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [13,10 49.921875x17.46875]
"A B C"
TextNode <#text>
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 49.921875x17.46875]
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17.46875 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 49.921875x17.46875 flex-item [BFC] children: inline
line 0 width: 49.921875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [13,10 49.921875x17.46875]
"A B C"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x21.46875]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 59.921875x21.46875]
PaintableWithLines (TableWrapper(anonymous)) [13,10 49.921875x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [13,10 49.921875x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [13,10 49.921875x17.46875]
PaintableBox (Box(anonymous)) [13,10 49.921875x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [13,10 49.921875x17.46875]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)

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

@ -5,22 +5,18 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 111.65625x52.40625]
BlockContainer <button> at (13,10) content-size 111.65625x52.40625 inline-block [BFC] children: inline
line 0 width: 111.65625, height: 52.40625, bottom: 52.40625, baseline: 40.59375
frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 111.65625x52.40625]
TableWrapper <(anonymous)> at (13,10) content-size 111.65625x52.40625 [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52.40625 table-box [TFC] children: not-inline
Box <(anonymous)> at (13,10) content-size 111.65625x52.40625 table-row children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52.40625 table-cell [BFC] children: inline
line 0 width: 111.65625, height: 52.40625, bottom: 52.40625, baseline: 40.59375
frag 0 from TextNode start: 0, length: 4, rect: [13,10 111.65625x52.40625]
"Test"
TextNode <#text>
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 111.65625x52.40625]
BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52.40625 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 111.65625x52.40625 flex-item [BFC] children: inline
line 0 width: 111.65625, height: 52.40625, bottom: 52.40625, baseline: 40.59375
frag 0 from TextNode start: 0, length: 4, rect: [13,10 111.65625x52.40625]
"Test"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x56.40625]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 121.65625x56.40625]
PaintableWithLines (TableWrapper(anonymous)) [13,10 111.65625x52.40625]
PaintableWithLines (BlockContainer(anonymous)) [13,10 111.65625x52.40625]
PaintableWithLines (BlockContainer(anonymous)) [13,10 111.65625x52.40625]
PaintableBox (Box(anonymous)) [13,10 111.65625x52.40625]
PaintableWithLines (BlockContainer(anonymous)) [13,10 111.65625x52.40625]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)

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

@ -5,22 +5,18 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17.46875]
BlockContainer <button> at (13,10) content-size 37.21875x17.46875 inline-block [BFC] children: inline
line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TableWrapper start: 0, length: 0, rect: [13,10 37.21875x17.46875]
TableWrapper <(anonymous)> at (13,10) content-size 37.21875x17.46875 [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17.46875 table-box [TFC] children: not-inline
Box <(anonymous)> at (13,10) content-size 37.21875x17.46875 table-row children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17.46875 table-cell [BFC] children: inline
line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [13,10 37.21875x17.46875]
"Test"
TextNode <#text>
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 37.21875x17.46875]
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17.46875 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 37.21875x17.46875 flex-item [BFC] children: inline
line 0 width: 37.21875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [13,10 37.21875x17.46875]
"Test"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x21.46875]
PaintableWithLines (BlockContainer<BUTTON>) [8,8 47.21875x21.46875]
PaintableWithLines (TableWrapper(anonymous)) [13,10 37.21875x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [13,10 37.21875x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [13,10 37.21875x17.46875]
PaintableBox (Box(anonymous)) [13,10 37.21875x17.46875]
PaintableWithLines (BlockContainer(anonymous)) [13,10 37.21875x17.46875]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)

10
Tests/LibWeb/Layout/expected/table/table-cell-not-paintable.txt
View file

@ -4,16 +4,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
line 0 width: 10, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from BlockContainer start: 0, length: 0, rect: [13,19 0x0]
BlockContainer <button> at (13,19) content-size 0x0 inline-block [BFC] children: not-inline
TableWrapper <(anonymous)> at (13,19) content-size 0x0 [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,19) content-size 0x0 table-box [TFC] children: not-inline
Box <(anonymous)> at (13,19) content-size 0x0 table-row children: not-inline
BlockContainer <(anonymous)> at (13,19) content-size 0x0 table-cell [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,19) content-size 0x0 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,19) content-size 0x0 [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17.46875]
PaintableWithLines (BlockContainer<BUTTON>) [8,17 10x4]
PaintableWithLines (TableWrapper(anonymous)) [13,19 0x0]
PaintableWithLines (BlockContainer(anonymous)) [13,19 0x0]
PaintableWithLines (BlockContainer(anonymous)) [13,19 0x0]
PaintableBox (Box(anonymous)) [13,19 0x0]
PaintableWithLines (BlockContainer(anonymous)) [13,19 0x0]

16
Tests/LibWeb/Layout/input/block-and-inline/button-with-abspos-pseudo-element.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html><style>
button {
position: relative;
padding: 20px;
background: initial;
}
button:after {
content: "";
position: absolute;
left: 0;
top: 0;
background: green;
width: 100%;
height: 100%;
}
</style><body><button></button>