dynamic-mask-contents-01.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" onload="startTest()" class="reftest-wait">

  <style>

  .foo .maskrect { fill:white; }

  </style>

  <defs id="d">

    <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">

      <rect class="maskrect" width="1" height="1"/>

    </mask>

  </defs>

  <rect id="rect" width="100%" height="100%" fill="lime" mask="url(#m1)"/>

  <script>

  function startTest() {

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

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

  function doTest() {

    document.getElementById("d").setAttribute("class", "foo");

    document.documentElement.removeAttribute("class");

  </script>

</svg>