mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-28 21:26:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb/CSS: Use fallback var() value if custom property is empty

Browse source 
If the expansion of a custom property in variable expansion returns
tokens, then the custom property is not the initial guaranteed-invalid
value.

If it didn't return any tokens, then it is the initial
guaranteed-invalid value, and thus we should move on to the fallback
value.

Makes Shopify checkout show the background colours, borders, skeletons,
etc.
This commit is contained in:
Luke Wilde 2025-02-14 20:00:10 +00:00 • committed by Andreas Kling
commit 751b93959f
Notes: github-actions[bot] 2025-02-16 08:20:17 +00:00
3 changed files with 38 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

28
Tests/LibWeb/Text/input/css/var-uses-fallback-value-if-custom-property-is-empty.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<style>
:root {
--color-green: green;
--i: var(--invalid);
--dont: var(--invalid);
--exist: var(--invalid);
--but-i-do: var(--color-green);
--green-background-color: var(--i, var(--dont, var(--exist, var(--but-i-do))));
}
div {
width: 300px;
height: 300px;
background-color: red;
}
#box {
background-color: var(--green-background-color);
}
</style>
<div id="box"></div>
<script src="../include.js"></script>
<script>
test(() => {
const box = document.getElementById("box");
const computedStyle = window.getComputedStyle(box);
println(`background-color: ${computedStyle.backgroundColor}`);
});
</script>