clip-path-invalidation-1a.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html class="reftest-wait">

  <head>

    <meta charset="utf-8">

    <title>CSS Masking: clipPath invalidation.</title>

    <style type="text/css">

      div.outer {

        position: absolute;

        background-color: purple;

        border: solid purple;

        width: 10px;

        height: 10px;

        transform: scale(20);

        transform-origin: top left;

      div.clipped {

        clip-path: url(#cp1);

    </style>

  </head>

  <body>

    <div id="d1" class="outer clipped"></div>

    <script type="text/javascript">

      function changeTransform()

        document.getElementById("d1").style.transform = "scale(10)";

        document.documentElement.removeAttribute("class");

      document.addEventListener("MozReftestInvalidate",

                                changeTransform);

    </script>

    <svg height="0">

      <clipPath id="cp1">

        <rect x="10" y="10" width="5" height="5"/>

      </clipPath>

    </svg>

  </body>

</html>