ladybird/Tests/LibWeb/Text/input/css/var-uses-fallback-value-if-custom-property-is-empty.html
Luke Wilde 751b93959f LibWeb/CSS: Use fallback var() value if custom property is empty
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.
2025-02-16 09:19:19 +01:00

28 lines
755 B
HTML

<!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>