RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 04:37:34 +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

18
Tests/LibWeb/Layout/input/block-and-inline/button-with-before-pseudo.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html><style type="text/css">
.button_button___eDCW {
background-color: initial;
font-size: 50px;
position: relative;
color: blueviolet;
}
.button_button___eDCW:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
top: 0;
background-color: #d1ccb6;
width: 100%;
height: 100%;
}
</style><button class="button_button___eDCW">See more games</button>