highlight-cascade-010.html (1298B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: highlight styling: late property registration updates highlights</title> 4 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> 6 <meta name="assert" value="This test verifies that custom property values when defined on a highlight pseudo update when the property registration happens after first style recalc."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 #originating::spelling-error { 11 color: white; 12 --x: initial; 13 background-color: var(--x, red); 14 } 15 </style> 16 <div id="originating">Text wth a spelling error</div> 17 <script> 18 promise_test(async () => { 19 await new Promise(requestAnimationFrame); 20 CSS.registerProperty({ 21 name: '--x', 22 inherits: true, 23 initialValue: "green" 24 }); 25 await new Promise(requestAnimationFrame); 26 const originating_spelling = getComputedStyle(document.querySelector("div"), "::spelling-error"); 27 assert_equals(originating_spelling.getPropertyValue("--x"), "green"); 28 }, "the custom property receives its initial value from a deferred registration"); 29 </script>