RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-06-01 09:18:11 +00:00
Code Issues Activity Actions

LibWeb: Add boxes for before/after pseudos post button layout tweak

Browse source 
When a button should use flex for alignment and also has ::before
and/or ::after, we previously did the following:
1. Prepended/appended the button's children with boxes for
   pseudo-elements.
2. Replaced the button's direct children with a flex container that
   contains its children.
As a result, the generated boxes for ::before/::after ended up as
children of the generated flex item, instead of being direct children
of the button layout box as they were supposed to be.

This change reverses these steps, ensuring that boxes for
pseudo-elements are generated only after modifications inside the
button layout are completed.
This commit is contained in:
Aliaksandr Kalenik 2023-09-10 22:34:41 +02:00 • committed by Andreas Kling
parent 0160d921e9
commit 40dea272d2
6 changed files with 99 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,15 +5,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
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>
BlockContainer <(anonymous)> at (29,29) content-size 0x0 [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]
PaintableWithLines (BlockContainer(anonymous)) [29,29 0x0]
PaintableWithLines (BlockContainer(anonymous)) [29,29 0x0]
PaintableWithLines (BlockContainer(anonymous)) [9,9 40x40]

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

@ -0,0 +1,23 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x74.59375 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x58.59375 children: inline
line 0 width: 424.640625, height: 58.59375, bottom: 58.59375, baseline: 42.28125
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x54.59375]
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x54.59375 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x54.59375 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x54.59375 flex-item [BFC] children: inline
line 0 width: 414.640625, height: 54.59375, bottom: 54.59375, baseline: 42.28125
frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x54.59375]
"See more games"
TextNode <#text>
BlockContainer <(anonymous)> at (9,9) content-size 422.640625x56.59375 positioned [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x74.59375]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x58.59375]
PaintableWithLines (BlockContainer<BUTTON>.button_button___eDCW) [8,8 424.640625x58.59375]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x54.59375]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x54.59375]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [9,9 422.640625x56.59375]

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

@ -0,0 +1,23 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x74.59375 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x58.59375 children: inline
line 0 width: 424.640625, height: 58.59375, bottom: 58.59375, baseline: 42.28125
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x54.59375]
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x54.59375 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 422.640625x56.59375 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x54.59375 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x54.59375 flex-item [BFC] children: inline
line 0 width: 414.640625, height: 54.59375, bottom: 54.59375, baseline: 42.28125
frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x54.59375]
"See more games"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x74.59375]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x58.59375]
PaintableWithLines (BlockContainer<BUTTON>.button_button___eDCW) [8,8 424.640625x58.59375]
PaintableWithLines (BlockContainer(anonymous)) [9,9 422.640625x56.59375]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x54.59375]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x54.59375]
TextPaintable (TextNode<#text>)