layout/reftests/invalidation/clip-path-invalidation-1b.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CSS Masking: clipPath invalidation.</title>
   6     <style type="text/css">
   7       div.outer {
   8         position: absolute;
   9         background-color: purple;
  10         border: solid purple;
  11         width: 10px;
  12         height: 10px;
  13         transform: scale(20);
  14         transform-origin: top left;
  15       }
  16
  17       div.clipped {
  18         clip-path: url(#cp1);
  19       }
  20
  21       div.inner {
  22         width: 5px;
  23         height: 5px;
  24         border: 1px solid transparent;
  25         will-change: transform;
  26       }
  27     </style>
  28   </head>
  29   <body>
  30     <div id="d1" class="outer clipped"><div class="inner"></div></div>
  31     <script type="text/javascript">
  32       function changeTransform()
  33       {
  34         document.getElementById("d1").style.transform = "scale(10)";
  35         document.documentElement.removeAttribute("class");
  36       }
  37
  38       document.addEventListener("MozReftestInvalidate",
  39                                 changeTransform);
  40     </script>
  41     <svg height="0">
  42       <clipPath id="cp1">
  43        <rect x="10" y="10" width="5" height="5"/>
  44       </clipPath>
  45     </svg>
  46   </body>
  47 </html>