ladybird
ladybird copied to clipboard
Published
20 hours ago •
LadybirdBrowser
LadybirdBrowser
CSS custom property declarations must honor !important
Simplified reduction:
<!doctype html><style>
* { outline: 1px solid black; }
:root {
--size: 50px !important;
--bg: green !important;
}
main {
--size: 200px;
width: var(--size);
height: var(--size);
--bg: red;
background: var(--bg);
}
</style><body><main>
Reduced from the ultra-wide search box on https://brave.com/
This is a consequence of us walking up the tree until we find an element with a custom property of the name we're after, instead of cascading them properly. A short-term fix would be to extend that to keep looking until we find an !important one (or not). The long-term fix is to compute and store custom properties per element.
