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