1260543-1.html (881B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <style> 4 #outer { 5 font-size: 52px; 6 transition: all 100s step-start; 7 color: transparent; 8 } 9 #outer.red { 10 color: red; 11 } 12 #outer.red > #inner { 13 color: green; 14 } 15 </style> 16 <!-- 17 This is testing that -webkit-text-fill-color should inherit currentcolor 18 keyword value, rather than the computed value of color (used value of 19 -webkit-text-fill-color) from the transition. 20 --> 21 <p>Test passes if the block below is green.</p> 22 <div id="outer"><span id="inner">█</span></div> 23 <script> 24 window.addEventListener("load", () => { 25 // Wait for the second frame to ensure that we will 26 // actually start the transition. 27 requestAnimationFrame(() => { 28 requestAnimationFrame(() => { 29 let outer = document.getElementById("outer"); 30 outer.className = "red"; 31 document.documentElement.className = ""; 32 }); 33 }); 34 }); 35 </script>