clip-path-url-reference-change.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-url-reference-change.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<title>Switch from one clip-path url() to another with the same bounds</title>

<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">

<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">

<link rel="match" href="reference/green-100x100.html">

<script src="/common/reftest-wait.js"></script>

<svg>

  <clipPath id="circle">

    <circle cx="50" cy="50" r="50"/>

  </clipPath>

  <clipPath id="rect">

    <rect width="100" height="100"/>

  </clipPath>

  <rect width="100" height="100" fill="red"/>

  <rect width="100" height="100" fill="green" id="target" clip-path="url(#circle)"/>

</svg>

<script>

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      document.getElementById('target').setAttribute('clip-path', 'url(#rect)');

      takeScreenshot();

});

});

</script>