LibWeb: Repeating background due to child elements
Example:
<!DOCTYPE html>
<head>
<style>
.link {
background-image: url(https://en.wikipedia.org/w/skins/Vector/resources/common/images/link-external-small-ltr-progressive.svg?30a3a);
background-repeat: no-repeat;
background-position: center right;
padding-right: 1em;
}
</style>
<html>
<body>
<a class="link" href="https://github.com/SerenityOS/serenity">
github<wbr>.com<wbr>/SerenityOS<wbr>/serenity
</a>
</body>
</html>
Firefox (expected)
Ladybird
Additional details
The example is trimmed down from the infobox on https://en.wikipedia.org/wiki/SerenityOS. That's also why it includes a reference to an external file, wasn't sure what to replace it with. The extra symbols is caused by the wbr tags, when removing those the symbols go away as well.
I originally thought the child elements inherited the background (which they shouldn't https://drafts.csswg.org/css-backgrounds/#backgrounds), since that would explain the issue. However when inspecting the elements, I noticed that background-image is only set on the parent element. So it looks like inherit works as expected, but that doesn't explain why the extra symbols occur.
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too