third_party/WebKit/LayoutTests/svg/custom/mask-invalidation.svg

   1 <?xml version="1.0" encoding="utf-8"?>
   2 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="runRepaintAndPixelTest()">
   3 <script xlink:href="../../fast/repaint/resources/text-based-repaint.js"/>
   4 <script>
   5 window.testIsAsync = true;
   6 function draw(x, y) {
   7     var maskrect = document.getElementById("maskRect");
   8     maskrect.setAttribute("transform", "translate(" + x + "," + y + ")");
   9
  10     var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  11     rect.setAttribute("x", x);
  12     rect.setAttribute("y", y);
  13     rect.setAttribute("width", 453);
  14     rect.setAttribute("height", 299);
  15     rect.setAttribute("fill", "green");
  16     rect.setAttribute("mask", "url(#mask)");
  17
  18     var root = document.getElementById("root");
  19     while (root.firstChild) {
  20         root.removeChild(root.firstChild);
  21     }
  22     root.appendChild(rect);
  23 }
  24
  25 function repaintTest() {
  26     draw(150, 50);
  27     requestAnimationFrame(function() {
  28         draw(50, 50);
  29         finishRepaintTest();
  30     });
  31 }
  32
  33 </script>
  34 <defs>
  35 <mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
  36     <rect id="maskRect" x="50" y="50" width="460" height="316" fill="white" />
  37 </mask>
  38 </defs>
  39 <g id="root">
  40     <rect x="50" y="50" width="453" height="299" fill="green" mask="url(#mask)"/>
  41 </g>
  42 </svg>