third_party/WebKit/LayoutTests/svg/custom/js-late-marker-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="../../fast/repaint/resources/text-based-repaint.js"/>
   5 <defs id="defs">
   6     <marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
   7         <rect width="10" height="10" fill="red" stroke="none"/>
   8     </marker>
   9     <marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="5" refY="5" markerUnits="strokeWidth">
  10         <path d="M 5 0 L 10 10 L 0 10 Z" fill="blue" stroke="none"/>
  11     </marker>
  12 </defs>
  13
  14 <g id="content"/>
  15
  16 <script>
  17     window.testIsAsync = true;
  18     var defs = document.getElementById("defs");
  19     var content = document.getElementById("content");
  20
  21     function repaintTest() {
  22         // FIXME: we need a better way of waiting for layout/repainting to happen
  23         setTimeout(createObject, 1);
  24     }
  25
  26     function createObject()
  27     {
  28         var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  29         path.setAttribute("fill", "none");
  30         path.setAttribute("stroke", "black");
  31         path.setAttribute("stroke-width", "8");
  32         path.setAttribute("marker-start", "url(#markerStart)");
  33         path.setAttribute("marker-mid", "url(#markerMiddle)");
  34         path.setAttribute("marker-end", "url(#markerEnd)");
  35         path.setAttribute("d", "M 130 135 L 180 135 L 180 185");
  36
  37         content.appendChild(path);
  38         // FIXME: we need a better way of waiting for layout/repainting to happen
  39         setTimeout(createMarker, 1);
  40     }
  41
  42     function createMarker()
  43     {
  44         var marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
  45         marker.setAttribute("id", "markerMiddle");
  46         marker.setAttribute("viewBox", "0 0 10 10");
  47         marker.setAttribute("markerWidth", "2");
  48         marker.setAttribute("markerHeight", "2");
  49         marker.setAttribute("refX", "5");
  50         marker.setAttribute("refY", "5");
  51         marker.setAttribute("markerUnits", "strokeWidth");
  52
  53         var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  54         circle.setAttribute("cx", "5");
  55         circle.setAttribute("cy", "5");
  56         circle.setAttribute("r", "5");
  57         circle.setAttribute("fill", "green");
  58         circle.setAttribute("stroke", "none");
  59
  60         marker.appendChild(circle);
  61         defs.appendChild(marker);
  62
  63         finishRepaintTest();
  64     }
  65 </script>
  66
  67 </svg>