Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-variables/variable-pseudo-element.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>Variables work in ::before/::after pseudos</title>
<meta rel="author" title="Kevin Babbitt">
<meta rel="author" title="Greg Whitworth">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
:root {
--color: green;
--color2: red;
}
div::before {
content: '[before]';
}
div::after {
content: '[after]';
}
#div1 {
color: red;
}
#div1::before, #div1::after {
color: var(--color2);
--color2: green;
}
#div2 {
color: var(--color2);
}
#div2::before, #div2::after {
color: var(--color);
}
#div3 {
color: var(--color);
}
#div3::before, #div3::after {
--color: red;
}
</style>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<span id="control" style="color: green;"></span>
<script>
"use strict";
[...document.querySelectorAll("div")].forEach(function (div) {
test( function () {
const expectedColor = getComputedStyle(document.querySelector("#control")).color;
var actualBeforeColor = window.getComputedStyle(div, ':before').getPropertyValue('color');
var actualAfterColor = window.getComputedStyle(div, ':after').getPropertyValue('color');
assert_equals(actualBeforeColor, expectedColor);
assert_equals(actualAfterColor, expectedColor);
}, div.getAttribute("id"));
});
</script>
</body>
</html>