third_party/WebKit/LayoutTests/svg/custom/js-late-mask-creation.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
   3 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  id="svg-root" width="100%" height="100%" viewBox="0 0 800 600" onload="runRepaintAndPixelTest()">
   4 <script xlink:href="../../fast/repaint/resources/text-based-repaint.js"/>
   5
   6 <rect x="0" y="100" width="800" height="100" fill="blue" mask="url(#dynMask)"/>
   7 <g id="content"/>
   8
   9 <script>
  10     window.testIsAsync = true;
  11     var content = document.getElementById("content");
  12
  13     function repaintTest() {
  14         setTimeout(createMask, 0);
  15     }
  16
  17     function createMask()
  18     {
  19         var mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
  20         mask.setAttribute("id", "dynMask");
  21         mask.setAttribute("maskUnits", "userSpaceOnUse");
  22         mask.setAttribute("x", "0");
  23         mask.setAttribute("y", "0");
  24         mask.setAttribute("width", "800");
  25         mask.setAttribute("height", "300");
  26
  27         var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  28         rect.setAttribute("width", "800");
  29         rect.setAttribute("height", "300");
  30         rect.setAttribute("fill", "red");
  31
  32         mask.appendChild(rect);
  33         content.appendChild(mask);
  34
  35         finishRepaintTest();
  36     }
  37 </script>
  38
  39 </svg>