minerva/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties-2.html at 1d53ae1d6f7d460e411d0c3e9ba48f0e7b6160b9

ErisCyan / minerva

Find file

Newer

Older

minerva / Tests / LibWeb / Layout / input / pseudo-element-with-custom-properties-2.html

minerva on 13 Jul 605 bytes Initial commit

Raw Blame History

<!DOCTYPE html><style>
* {
    font: 20px MinervaSans;
}
: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>