third_party/WebKit/LayoutTests/svg/custom/js-late-mask-and-object-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 <g id="content"/>
   7
   8 <script>
   9     window.testIsAsync = true;
  10     var content = document.getElementById("content");
  11
  12     function repaintTest() {
  13         window.testRunner.layoutAndPaintAsyncThen(createObject);
  14     }
  15
  16     function createObject()
  17     {
  18         var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  19         rect.setAttribute("width", "800");
  20         rect.setAttribute("height", "100");
  21         rect.setAttribute("y", "100");
  22         rect.setAttribute("fill", "blue");
  23         rect.setAttribute("mask", "url(#dynMask)");
  24
  25         content.appendChild(rect);
  26         window.testRunner.layoutAndPaintAsyncThen(createMask);
  27     }
  28
  29     function createMask()
  30     {
  31         var mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
  32         mask.setAttribute("id", "dynMask");
  33         mask.setAttribute("maskUnits", "userSpaceOnUse");
  34         mask.setAttribute("x", "0");
  35         mask.setAttribute("y", "0");
  36         mask.setAttribute("width", "800");
  37         mask.setAttribute("height", "300");
  38
  39         var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  40         rect.setAttribute("width", "800");
  41         rect.setAttribute("height", "300");
  42         rect.setAttribute("fill", "red");
  43
  44         mask.appendChild(rect);
  45         content.appendChild(mask);
  46
  47         finishRepaintTest();
  48     }
  49 </script>
  50
  51 </svg>