highlight-cascade-008.html (1292B)
1 <!DOCTYPE html> 2 <title>Custom property values from the originating element</title> 3 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> 5 <link rel="match" href="highlight-cascade-008-ref.html"> 6 <meta name="assert" value="This test verifies that custom properties from the originating element are used to resolve var() on highlight pseudos."> 7 <meta name="fuzzy" content="0-255;0-10"> 8 <script src="../support/selections.js"></script> 9 <style> 10 :root { 11 --background-color: green; 12 --decoration-color: yellow; 13 } 14 :root::selection { 15 --background-color: cyan; 16 --decoration-color: magenta; 17 } 18 div::selection { 19 background-color: var(--background-color, red); 20 text-decoration-line: underline; 21 text-decoration-style: line; 22 text-decoration-color: var(--decoration-color, red); 23 } 24 span { 25 --background-color: purple; 26 } 27 span::selection { 28 --background-color: blue; 29 background-color: var(--background-color, red); 30 } 31 </style> 32 <div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.</div> 33 <script> 34 selectNodeContents(document.querySelector("div")); 35 </script>