clip-path-url-reference-change-from-empty.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-from-empty.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<title>Switch from an empty to a non-empty clip-path url()</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="empty"/>

  <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(#empty)"/>

</svg>

<script>

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

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

      takeScreenshot();

});

});

</script>