clip-path-url-reference-change-from-empty.html (811B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Switch from an empty to a non-empty clip-path url()</title> 4 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> 5 <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"> 6 <link rel="match" href="reference/green-100x100.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <svg> 9 <clipPath id="empty"/> 10 <clipPath id="rect"> 11 <rect width="100" height="100"/> 12 </clipPath> 13 <rect width="100" height="100" fill="red"/> 14 <rect width="100" height="100" fill="green" id="target" clip-path="url(#empty)"/> 15 </svg> 16 <script> 17 requestAnimationFrame(() => { 18 requestAnimationFrame(() => { 19 document.getElementById('target').setAttribute('clip-path', 'url(#rect)'); 20 takeScreenshot(); 21 }); 22 }); 23 </script>