marker-variable-computed-style.html (1555B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" /> 7 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#marker-pseudo" /> 8 <link rel="help" href="https://drafts.csswg.org/css-variables/#defining-variables" /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <title>::marker with variables</title> 12 <style> 13 .firstTest::marker { 14 --alpha: 0.75; 15 color: rgba(0 128 0 / var(--alpha)); 16 } 17 18 .secondTest::marker { 19 --color: rgb(0 128 0); 20 color: var(--color); 21 } 22 </style> 23 </head> 24 25 <body> 26 <ul> 27 <li class="firstTest">Item 1</li> 28 <li class="secondTest">Item 2</li> 29 </ul> 30 <script> 31 test(() => { 32 let firstTest = document.querySelector('.firstTest'); 33 let markerStyle = getComputedStyle(firstTest, '::marker'); 34 assert_equals(markerStyle.color, "rgba(0, 128, 0, 0.75)", "color is green with 0.75 opacity."); 35 }, `getComputedStyle() for opacity defined by variable in ::marker`); 36 test(() => { 37 let secondTest = document.querySelector('.secondTest'); 38 let markerStyle = getComputedStyle(secondTest, '::marker'); 39 assert_equals(markerStyle.color, "rgb(0, 128, 0)", "color is green."); 40 }, `getComputedStyle() for color defined by variable in ::marker`); 41 </script> 42 </body> 43 44 </html>