third_party/WebKit/LayoutTests/svg/custom/js-late-clipPath-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 480 360" onload="runRepaintAndPixelTest()">
   4 <script xlink:href="../../resources/run-after-layout-and-paint.js"/>
   5 <script xlink:href="../../fast/repaint/resources/text-based-repaint.js"/>
   6 <g id="content" transform="scale(1, 1.5)"/>
   7 <script>
   8     window.testIsAsync = true;
   9     function repaintTest() {
  10         runAfterLayoutAndPaint(createObject);
  11     }
  12
  13     var content = document.getElementById("content");
  14
  15     function createObject()
  16     {
  17         var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
  18         text.setAttribute("font-size", "60");
  19         text.setAttribute("fill", "navy");
  20         text.setAttribute("clip-path", "url(#dynClip)");
  21         text.setAttribute("x", "10");
  22         text.setAttribute("y", "70");
  23
  24         text.appendChild(document.createTextNode("Clipped. INVISIBLE."));
  25         content.appendChild(text);
  26
  27         runAfterLayoutAndPaint(createClipPath);
  28     }
  29
  30     function createClipPath()
  31     {
  32         var clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
  33         clipPath.setAttribute("id", "dynClip");
  34         clipPath.setAttribute("clipPathUnits", "userSpaceOnUse");
  35
  36         var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  37         path.setAttribute("d", "M 0 0 l 200 0 l 0 200 l -200 0 Z");
  38
  39         clipPath.appendChild(path);
  40         content.appendChild(clipPath);
  41
  42         finishRepaintTest();
  43     }
  44 </script>
  45
  46 </svg>