third_party/WebKit/LayoutTests/svg/custom/js-late-gradient-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
  11     function repaintTest() {
  12         runAfterLayoutAndPaint(createGradients);
  13     }
  14
  15     var content = document.getElementById("content");
  16
  17     function createGradients()
  18     {
  19         // Setup "fillLinearGradient"
  20         var gradient1 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
  21         gradient1.setAttribute("id", "fillLinearGradient");
  22         gradient1.setAttribute("x1", "0");
  23         gradient1.setAttribute("x2", "1");
  24
  25         var stop11 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  26         stop11.setAttribute("stop-color", "blue");
  27         stop11.setAttribute("offset", "0");
  28
  29         var stop21 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  30         stop21.setAttribute("stop-color", "red");
  31         stop21.setAttribute("offset", "1");
  32
  33         gradient1.appendChild(stop11);
  34         gradient1.appendChild(stop21);
  35
  36         content.appendChild(gradient1);
  37
  38         // Setup "strokeLinearGradient"
  39         var gradient2 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
  40         gradient2.setAttribute("id", "strokeLinearGradient");
  41         gradient2.setAttribute("x1", "0");
  42         gradient2.setAttribute("x2", "1");
  43
  44         var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  45         stop22.setAttribute("stop-color", "yellow");
  46         stop22.setAttribute("offset", "0");
  47
  48         var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
  49         stop22.setAttribute("stop-color", "green");
  50         stop22.setAttribute("offset", "1");
  51
  52         gradient2.appendChild(stop22);
  53         gradient2.appendChild(stop22);
  54
  55         content.appendChild(gradient2);
  56
  57         runAfterLayoutAndPaint(setupGradientUsers);
  58     }
  59
  60     function setupGradientUsers()
  61     {
  62         var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  63         text1.setAttribute("font-size", "68");
  64         text1.setAttribute("x", "-150");
  65         text1.setAttribute("y", "70")
  66         text1.setAttribute("fill", "url(#fillLinearGradient)");
  67         text1.setAttribute("stroke", "none");
  68         text1.appendChild(document.createTextNode("Gradient on fill"));
  69
  70         content.appendChild(text1);
  71
  72         var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  73         text2.setAttribute("font-size", "68");
  74         text2.setAttribute("x", "-150");
  75         text2.setAttribute("y", "140")
  76         text2.setAttribute("fill", "none");
  77         text2.setAttribute("stroke", "url(#strokeLinearGradient)");
  78         text2.appendChild(document.createTextNode("Gradient on stroke"));
  79
  80         content.appendChild(text2);
  81
  82         var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
  83         text3.setAttribute("font-size", "68");
  84         text3.setAttribute("x", "-150");
  85         text3.setAttribute("y", "210")
  86         text3.setAttribute("fill", "url(#fillLinearGradient)");
  87         text3.setAttribute("stroke", "url(#strokeLinearGradient)");
  88         text3.appendChild(document.createTextNode("Gradient on fill/stroke"));
  89
  90         content.appendChild(text3);
  91
  92         finishRepaintTest();
  93     }
  94 </script>
  95
  96 </svg>