third_party/WebKit/LayoutTests/fast/canvas/quadraticCurveTo.xml

   1 <!DOCTYPE html
   2      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml">
   5
   6
   7         <head>
   8                 <title>Context2D.quadraticCurveTo Test Case</title>
   9                 <script>
  10                     if (window.testRunner)
  11                           testRunner.dumpAsTextWithPixelResults();
  12
  13                         var ctx;
  14                         var current_point;
  15                         var current_center;
  16
  17                         function M (x, y) {
  18                                 ctx.beginPath();
  19                                 ctx.moveTo(x,y);
  20                                 current_point = [x,y];
  21                                 current_center = [x,y];
  22                         }
  23
  24                         function q (x1, y1, x, y) {
  25                                 x1 += current_point[0];
  26                                 y1 += current_point[1];
  27                                 x += current_point[0];
  28                                 y += current_point[1];
  29                                 ctx.quadraticCurveTo(x1, y1, x, y);
  30                                 current_point = [x,y];
  31                                 current_center = [x1,y1];
  32                         }
  33
  34                         function t (x, y) {
  35                                 var x1 = current_point[0] * 2 - current_center[0];
  36                                 var y1 = current_point[1] * 2 - current_center[1];
  37                                 x += current_point[0];
  38                                 y += current_point[1];
  39                                 ctx.quadraticCurveTo(x1, y1, x, y);
  40                                 current_point = [x,y];
  41                                 current_center = [x1,y1];
  42                         }
  43
  44                         function z () {
  45                                 ctx.closePath();
  46                         }
  47
  48                         ////////////////////
  49
  50             function runTest() {
  51                             // setup canvas and context
  52                             var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
  53                             canvas.setAttribute('width', 480);
  54                             canvas.setAttribute('height', 360);
  55                             document.documentElement.appendChild(canvas);
  56                             ctx = canvas.getContext('2d');
  57
  58                             // draw shapes equivalent to SVG path data "M 240 296 q 25 -100 47 0 t 47 0 t 47 0 t 47 0 t 47 0 z"
  59                             M(10,60);
  60                             q(25,-100,47,0);
  61                             t(47,0);
  62                             t(47,0);
  63                             t(47,0);
  64                             t(47,0);
  65                             z();
  66
  67                             // stroke it
  68                             ctx.stroke();
  69             }
  70                 </script>
  71         </head>
  72
  73         <body onload="runTest()">
  74
  75                 <p>
  76                         This test case should produce a sine-wave stroked with 1px black.
  77                 </p>
  78
  79         </body>
  80
  81 </html>