<!DOCTYPE html> <html class="reftest-wait"> <style> #outer { font-size: 52px; transition: all 100s step-start; color: transparent; } #outer.red { color: red; } #outer.red > #inner { color: green; } </style> <!-- This is testing that -webkit-text-fill-color should inherit currentcolor keyword value, rather than the computed value of color (used value of -webkit-text-fill-color) from the transition. --> <p>Test passes if the block below is green.</p> <div id="outer"><span id="inner">█</span></div> <script> window.addEventListener("load", () => { // Wait for the second frame to ensure that we will // actually start the transition. requestAnimationFrame(() => { requestAnimationFrame(() => { let outer = document.getElementById("outer"); outer.className = "red"; document.documentElement.className = ""; }); }); }); </script>