serenity icon indicating copy to clipboard operation
serenity copied to clipboard

Published 20 hours ago • verified publisher icon SerenityOS

LibWeb: `:before` and `:after` content not displayed correctly for buttons

Open tcl3 opened this issue 1 year ago • 1 comments

Simplified reduction from https://en.wikipedia.org/wiki/Software_bug:

<!doctype html><style>
    button::before { content: '['; }
    button::after { content: ']'; }
</style><button><span>show

Currently, the :before pseudo-element is not being displayed at all and the :after pseudo-element is being displayed on a new line.

tcl3 avatar Jan 26 '24 17:01 tcl3

I believe that these lines are causing the :before element to not be displayed: https://github.com/SerenityOS/serenity/blob/83ab9f7c2dbe4bc9b96a9d75a371cee4ebf40b71/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp#L427-L428

And this line may be what is causing the :after element to be displayed incorrectly: https://github.com/SerenityOS/serenity/blob/83ab9f7c2dbe4bc9b96a9d75a371cee4ebf40b71/Userland/Libraries/LibWeb/Layout/TreeBuilder.cpp#L440

Removing these lines "fixes" the Wikipedia article and the above reduction.

tcl3 avatar Jan 26 '24 17:01 tcl3