dynamic-clipPath-02.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"

     class="reftest-wait"

     onload="startTest()"

     xmlns:xlink="http://www.w3.org/1999/xlink">

  <title>Testing that dynamic changes to the clipPathUnits are reflected in the clipPath</title>

  <defs>

    <clipPath id="clip1" clipPathUnits="objectBoundingBox">

      <rect width=".1" height=".1"/>

    </clipPath>

  </defs>

  <rect width="100%" height="100%" fill="lime"/>

  <g transform="scale(1000)">

    <rect x=".2" y=".2" width=".6" height=".6" fill="red" clip-path="url(#clip1)"/>

  </g>

  <script>

    function startTest() {

      document.addEventListener("MozReftestInvalidate", doTest, false);

      setTimeout(doTest, 4000); // fallback for running outside reftest

    function doTest() {

      var clip1 = document.getElementById("clip1");

      clip1.clipPathUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE;

      document.documentElement.removeAttribute("class");

  </script>

</svg>