third_party/WebKit/LayoutTests/svg/custom/js-late-pattern-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"/>
   7
   8 <script>
   9     window.testIsAsync = true;
  10     var content = document.getElementById("content");
  11
  12     function repaintTest() {
  13         runAfterLayoutAndPaint(createPatterns);
  14     }
  15
  16     function createPatterns()
  17     {
  18         // Setup "fillPattern"
  19         var pattern1 = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
  20         pattern1.setAttribute("id", "fillPattern");
  21         pattern1.setAttribute("patternUnits", "userSpaceOnUse");
  22         pattern1.setAttribute("x", "0");
  23         pattern1.setAttribute("y", "0");
  24         pattern1.setAttribute("width", "20");
  25         pattern1.setAttribute("height", "20");
  26
  27         var rect11 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  28         rect11.setAttribute("x", "5");
  29         rect11.setAttribute("y", "5");
  30         rect11.setAttribute("width", "10");
  31         rect11.setAttribute("height", "10");
  32         rect11.setAttribute("fill", "red");
  33
  34         var rect21 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  35         rect21.setAttribute("x", "10");
  36         rect21.setAttribute("y", "10");
  37         rect21.setAttribute("width", "10");
  38         rect21.setAttribute("height", "10");
  39         rect21.setAttribute("fill", "green");
  40
  41         pattern1.appendChild(rect11);
  42         pattern1.appendChild(rect21);
  43
  44         content.appendChild(pattern1);
  45
  46         // Setup "strokePattern"
  47         var pattern2 = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
  48         pattern2.setAttribute("id", "strokePattern");
  49         pattern2.setAttribute("patternUnits", "userSpaceOnUse");
  50         pattern2.setAttribute("x", "0");
  51         pattern2.setAttribute("y", "0");
  52         pattern2.setAttribute("width", "20");
  53         pattern2.setAttribute("height", "20");
  54
  55         var rect12 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  56         rect12.setAttribute("x", "5");
  57         rect12.setAttribute("y", "5");
  58         rect12.setAttribute("width", "10");
  59         rect12.setAttribute("height", "10");
  60         rect12.setAttribute("fill", "yellow");
  61
  62         var rect22 = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  63         rect22.setAttribute("x", "10");
  64         rect22.setAttribute("y", "10");
  65         rect22.setAttribute("width", "10");
  66         rect22.setAttribute("height", "10");
  67         rect22.setAttribute("fill", "blue");
  68
  69         pattern2.appendChild(rect12);
  70         pattern2.appendChild(rect22);
  71
  72         content.appendChild(pattern2);
  73
  74         runAfterLayoutAndPaint(setupPatternUsers);
  75     }
  76
  77     function setupPatternUsers()
  78     {
  79         var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  80         text1.setAttribute("font-size", "68");
  81         text1.setAttribute("x", "-150");
  82         text1.setAttribute("y", "70")
  83         text1.setAttribute("fill", "url(#fillPattern)");
  84         text1.setAttribute("stroke", "none");
  85         text1.appendChild(document.createTextNode("Pattern on fill"));
  86
  87         content.appendChild(text1);
  88
  89         var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  90         text2.setAttribute("font-size", "68");
  91         text2.setAttribute("x", "-150");
  92         text2.setAttribute("y", "140")
  93         text2.setAttribute("fill", "none");
  94         text2.setAttribute("stroke", "url(#strokePattern)");
  95         text2.appendChild(document.createTextNode("Pattern on stroke"));
  96
  97         content.appendChild(text2);
  98
  99         var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
 100         text3.setAttribute("font-size", "68");
 101         text3.setAttribute("x", "-150");
 102         text3.setAttribute("y", "210")
 103         text3.setAttribute("fill", "url(#fillPattern)");
 104         text3.setAttribute("stroke", "url(#strokePattern)");
 105         text3.appendChild(document.createTextNode("Pattern on fill/stroke"));
 106
 107         content.appendChild(text3);
 108
 109         finishRepaintTest();
 110     }
 111 </script>
 112
 113 </svg>