clip-text-dynamic-2.html (1056B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>CSS Test: background-clip: text is invalidated properly on text position changes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1525372"> 6 <link rel="author" href="mailto:mwoodrow@mozilla.com" title="Matt Woodrow"> 7 <link rel="author" href="https://mozilla.org" title="Mozilla"> 8 <link rel="match" href="clip-text-dynamic-2-ref.html"> 9 <style> 10 .text { 11 background-color: blue; 12 color: transparent; 13 font: 50px/1 monospace; 14 background-clip: text; 15 height: 200px; 16 } 17 .prev { 18 height: 10px; 19 } 20 p { 21 color: transparent; 22 } 23 </style> 24 <div class="text"> 25 <div class="prev"></div> 26 <div class="inner"> 27 <p>XxX</p> 28 </div> 29 </div> 30 <script> 31 onload = () => { 32 requestAnimationFrame(() => { 33 requestAnimationFrame(() => { 34 document.querySelector(".prev").style.height = "100px"; 35 document.documentElement.className = ""; 36 }) 37 }) 38 } 39 </script>