third_party/WebKit/LayoutTests/svg/W3C-SVG-1.1-SE/paths-dom-02-f.svg

   1 <svg version="1.1" baseProfile="full" onload="CreatePath();setTimeout('AnimatePath();', 0);" id="svg-root"
   2   width="100%" height="100%" viewBox="0 0 480 360"
   3   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   4   <!--======================================================================-->
   5   <!--=  SVG 1.1 2nd Edition Test Case                                     =-->
   6   <!--======================================================================-->
   7   <!--=  Copyright 2009 World Wide Web Consortium, (Massachusetts          =-->
   8   <!--=  Institute of Technology, European Research Consortium for         =-->
   9   <!--=  Informatics and Mathematics (ERCIM), Keio University).            =-->
  10   <!--=  All Rights Reserved.                                              =-->
  11   <!--=  See http://www.w3.org/Consortium/Legal/.                          =-->
  12   <!--======================================================================-->
  13   <d:SVGTestCase xmlns:d="http://www.w3.org/2000/02/svg/testsuite/description/"
  14     template-version="1.4" reviewer="[reviewer]" author="ED" status="created"
  15     version="$Revision: 1.5 $" testname="$RCSfile: paths-dom-02-f.svg,v $">
  16     <d:testDescription xmlns="http://www.w3.org/1999/xhtml" href="http://www.w3.org/TR/SVG11/paths.html#DOMInterfaces">
  17         <p>
  18           This test is designed to test the PathSegList interface. At first a flower-like shape with 6 petals should be displayed.
  19           The roundness and number of petals are then animated using script.
  20         </p>
  21     </d:testDescription>
  22     <d:operatorScript xmlns="http://www.w3.org/1999/xhtml">
  23       <p>
  24         The roundness of the petals is animated from star-like sharp petals to softly rounded petals and back again, and is repeated like that until the animation stops.
  25         The number of petals should increase one by one until the flower has a total of 12 petals, and then go back one by one until it has 6 petals, then increase again one by one until the flower has 9 petals.
  26         Then the animation will stop. The rendered image should look exactly like the reference image.
  27       </p>
  28       <p>
  29         If the flower is clicked after the animation has finished, it will restart the animation and repeat it for some time.
  30       </p>
  31     </d:operatorScript>
  32     <d:passCriteria xmlns="http://www.w3.org/1999/xhtml">
  33       <p>
  34         [[Describe the pass criteria of the test here. The pass criteria is what
  35         should be displayed when the test is run.]]
  36       </p>
  37     </d:passCriteria>
  38   </d:SVGTestCase>
  39   <title id="test-title">$RCSfile: paths-dom-02-f.svg,v $</title>
  40   <defs>
  41     <font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
  42       <font-face-src>
  43         <font-face-uri xlink:href="../custom/resources/SVGFreeSans.svg#ascii"/>
  44       </font-face-src>
  45     </font-face>
  46   </defs>
  47   <g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
  48     <script><![CDATA[
  49        if (window.testRunner)
  50         testRunner.waitUntilDone();
  51       var offset_angle = 90;
  52       var current_shift = 0;
  53       var shift_inc = 1;
  54       var THRESHOLD = 60;
  55       var segments_added = 0;
  56       var seg_diff = 1;
  57       var adjust_count = 0;
  58       var anim_count = 0;
  59       var adjust_count_max = 8;
  60       var anim_count_max = 10;
  61       var stopped = false;
  62
  63       function DegToRad(degs)
  64       {
  65       return (degs * Math.PI) / 180;
  66       }
  67
  68       function CreatePath()
  69       {
  70       var pathelm = document.getElementById("mypath");
  71       var pathlist = pathelm.pathSegList;
  72
  73       var move = pathelm.createSVGPathSegMovetoAbs(240 + 30 * Math.cos(DegToRad(offset_angle - 30)),
  74       180 + 30 * Math.sin(DegToRad(offset_angle - 30)));
  75       pathlist.appendItem(move);
  76
  77       var angle = offset_angle;
  78       for (var i = 0; i < 6; i++)
  79       {
  80       var x, y, xcp, ycp;
  81
  82       x = 240 + 30 * Math.cos(DegToRad(angle + 30));
  83       y = 180 + 30 * Math.sin(DegToRad(angle + 30));
  84
  85       xcp = 240 + 120 * Math.cos(DegToRad(angle));
  86       ycp = 180 + 120 * Math.sin(DegToRad(angle));
  87
  88       var curve = pathelm.createSVGPathSegCurvetoCubicAbs(x, y,
  89       xcp, ycp,
  90       xcp, ycp);
  91
  92       pathlist.appendItem(curve);
  93
  94       angle += 60;
  95       }
  96
  97       pathlist.appendItem(pathelm.createSVGPathSegClosePath());
  98       setTimeout('AdjustPath()', 0);
  99       }
 100
 101       function AddSegment()
 102       {
 103       var pathelm = document.getElementById("mypath");
 104       var pathlist = pathelm.pathSegList;
 105
 106       var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close
 107       var angle = offset_angle;
 108       var inc_angle = 360/(segments+1);
 109       var shift_v_x, shift_v_y, xcp, ycp;
 110
 111       var move = pathlist.getItem(0);
 112       move.x = 240 + 30 * Math.cos(DegToRad(offset_angle - inc_angle/2));
 113       move.y = 180 + 30 * Math.sin(DegToRad(offset_angle - inc_angle/2));
 114
 115       for (var i = 0; i < segments; i++)
 116       {
 117       var curve = pathlist.getItem(1+i);
 118
 119       shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));
 120       shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));
 121
 122       xcp = 240 + 120 * Math.cos(DegToRad(angle));
 123       ycp = 180 + 120 * Math.sin(DegToRad(angle));
 124
 125       curve.x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2));
 126       curve.y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2));
 127
 128       curve.x1 = xcp - shift_v_x;
 129       curve.y1 = ycp - shift_v_y;
 130
 131       curve.x2 = xcp + shift_v_x;
 132       curve.y2 = ycp + shift_v_y;
 133
 134       angle += inc_angle;
 135       }
 136
 137       shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));
 138       shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));
 139
 140       xcp = 240 + 120 * Math.cos(DegToRad(angle));
 141       ycp = 180 + 120 * Math.sin(DegToRad(angle));
 142
 143       var x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2));
 144       var y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2));
 145
 146       var curve = pathelm.createSVGPathSegCurvetoCubicAbs(x, y,
 147       xcp - shift_v_x,
 148       ycp - shift_v_y,
 149       xcp + shift_v_x,
 150       ycp + shift_v_y);
 151
 152       pathlist.insertItemBefore(curve, pathlist.numberOfItems-1);
 153       }
 154
 155       function RemoveSegment()
 156       {
 157       var pathelm = document.getElementById("mypath");
 158       var pathlist = pathelm.pathSegList;
 159
 160       var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close
 161       var angle = offset_angle;
 162       var inc_angle = 360/(segments-1);
 163       var shift_v_x, shift_v_y, xcp, ycp;
 164
 165       var move = pathlist.getItem(0);
 166       move.x = 240 + 30 * Math.cos(DegToRad(offset_angle - inc_angle/2));
 167       move.y = 180 + 30 * Math.sin(DegToRad(offset_angle - inc_angle/2));
 168
 169       for (var i = 0; i < segments-1; i++)
 170       {
 171       var curve = pathlist.getItem(1+i);
 172
 173       shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));
 174       shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));
 175
 176       xcp = 240 + 120 * Math.cos(DegToRad(angle));
 177       ycp = 180 + 120 * Math.sin(DegToRad(angle));
 178
 179       curve.x = 240 + 30 * Math.cos(DegToRad(angle + inc_angle/2));
 180       curve.y = 180 + 30 * Math.sin(DegToRad(angle + inc_angle/2));
 181
 182       curve.x1 = xcp - shift_v_x;
 183       curve.y1 = ycp - shift_v_y;
 184
 185       curve.x2 = xcp + shift_v_x;
 186       curve.y2 = ycp + shift_v_y;
 187
 188       angle += inc_angle;
 189       }
 190
 191       pathlist.removeItem(pathlist.numberOfItems-2);
 192       }
 193
 194       function AdjustPath()
 195       {
 196       if (seg_diff > 0)
 197       {
 198       AddSegment();
 199       }
 200       else
 201       {
 202       RemoveSegment();
 203       }
 204
 205       segments_added += seg_diff;
 206
 207       if (segments_added > 5)
 208       seg_diff = -1;
 209       else if (segments_added <= 0)
 210       seg_diff = 1;
 211
 212       if(adjust_count < adjust_count_max)
 213       {
 214       adjust_count++;
 215       setTimeout('AdjustPath()', 0);
 216       }
 217       }
 218
 219       function AnimatePath()
 220       {
 221       var pathelm = document.getElementById("mypath");
 222       var pathlist = pathelm.pathSegList;
 223
 224       var segments = pathlist.numberOfItems - 2; // Not MoveTo and Close
 225       var angle = offset_angle;
 226       var inc_angle = 360/segments;
 227       for (var i = 0; i < segments; i++)
 228       {
 229       var curve = pathlist.getItem(1+i);
 230
 231       var shift_v_x, shift_v_y, xcp, ycp;
 232
 233       shift_v_x = current_shift * Math.cos(DegToRad(angle + 90));
 234       shift_v_y = current_shift * Math.sin(DegToRad(angle + 90));
 235
 236       xcp = 240 + 120 * Math.cos(DegToRad(angle));
 237       ycp = 180 + 120 * Math.sin(DegToRad(angle));
 238
 239       curve.x1 = xcp - shift_v_x;
 240       curve.y1 = ycp - shift_v_y;
 241
 242       curve.x2 = xcp + shift_v_x;
 243       curve.y2 = ycp + shift_v_y;
 244
 245       angle += inc_angle;
 246       }
 247
 248       current_shift += shift_inc;
 249       if (current_shift >= THRESHOLD || current_shift < 0)
 250       shift_inc = -shift_inc;
 251
 252       if(adjust_count >= adjust_count_max)
 253       {
 254       anim_count++;
 255       }
 256
 257       if(anim_count < anim_count_max)
 258       setTimeout('AnimatePath();', 0);
 259       else {
 260         document.getElementById("mypath").addEventListener("click", function func() { adjust_count_max=32768;anim_count_max=32768; AdjustPath(); AnimatePath(); }, false);
 261         if (window.testRunner)
 262           testRunner.notifyDone();
 263       }
 264       }
 265
 266     ]]></script>
 267     <path d="" id="mypath" stroke="black" fill="blue"/>
 268   </g>
 269   <g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
 270     <text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.5 $</text>
 271   </g>
 272   <rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000"/>
 273   <!-- comment out this watermark once the test is approved -->
 274   <g id="draft-watermark">
 275     <rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
 276     <text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
 277       text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
 278   </g>
 279 </svg>