clip-path-url-reference-change.html (875B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Switch from one clip-path url() to another with the same bounds</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="circle"> 10 <circle cx="50" cy="50" r="50"/> 11 </clipPath> 12 <clipPath id="rect"> 13 <rect width="100" height="100"/> 14 </clipPath> 15 <rect width="100" height="100" fill="red"/> 16 <rect width="100" height="100" fill="green" id="target" clip-path="url(#circle)"/> 17 </svg> 18 <script> 19 requestAnimationFrame(() => { 20 requestAnimationFrame(() => { 21 document.getElementById('target').setAttribute('clip-path', 'url(#rect)'); 22 takeScreenshot(); 23 }); 24 }); 25 </script>