mirror of
https://github.com/servo/servo.git
synced 2025-06-25 09:34:32 +01:00
70 lines
1.9 KiB
HTML
70 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Variables work in ::before/::after pseudos</title>
|
|
|
|
<meta rel="author" title="Kevin Babbitt">
|
|
<meta rel="author" title="Greg Whitworth">
|
|
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
|
|
<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/">
|
|
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
|
|
|
|
<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>
|