mirror of
https://github.com/RGBCube/serenity
synced 2025-05-17 18:15:08 +00:00
fb722e69f3
The resolved property sets are stored with the element in a per-pseudo-element array (same as for pseudo element layout nodes). Longer term, we should stop storing this with elements entirely and make it temporary state in StyleComputer somehow, so we don't waste memory keeping all the resolved properties around. This makes various gradients show up on https://shopify.com/ :^)
32 lines
606 B
HTML
32 lines
606 B
HTML
<!DOCTYPE html><style>
|
|
* {
|
|
font: 20px SerenitySans;
|
|
}
|
|
:root {
|
|
--bg: red;
|
|
--width: 100px;
|
|
}
|
|
div::before {
|
|
display: inline-block;
|
|
height: 100px;
|
|
content: "";
|
|
background: var(--bg);
|
|
width: var(--width);
|
|
}
|
|
.b {
|
|
--bg: green;
|
|
--width: 200px;
|
|
}
|
|
.c::before {
|
|
--bg: green;
|
|
--width: 200px;
|
|
}
|
|
</style>
|
|
Variable set by inline style of element:<br>
|
|
<div class="a" style="--bg: green; --width: 200px;"></div>
|
|
<br><br>
|
|
Variable set by CSS rule matching element:<br>
|
|
<div class="b"></div>
|
|
<br><br>
|
|
Variable set by CSS rule matching pseudo element:<br>
|
|
<div class="c"></div>
|