third_party/WebKit/LayoutTests/fast/canvas/canvas-quadratic-same-endpoint.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <canvas id="canvas" width="100" height="100"></canvas>
   8 <script>
   9 description("Bug 105650: Test correct rendering of quadratic and bezier curves with coincident endpoints");
  10 var ctx = document.getElementById('canvas').getContext('2d');
  11 var data;
  12
  13 function shouldBeYellow(x,y)
  14 {
  15         blue_value = ctx.getImageData(x, y, 1, 1).data[2];
  16         shouldBe("blue_value", "0");
  17 }
  18
  19 function shouldBeBlue(x,y)
  20 {
  21         blue_value = ctx.getImageData(x, y, 1, 1).data[2];
  22         shouldBe("blue_value", "255");
  23 }
  24
  25 ctx.fillStyle = '#00f';
  26 ctx.strokeStyle = '#ff0';
  27 ctx.lineWidth = 30;
  28
  29 ctx.beginPath();
  30 ctx.fillRect(0,0,100,100);
  31
  32 // quadratic with coincident endpoint
  33 ctx.moveTo(20,20);
  34
  35 //Next line should be close to ctx.bezierCurveTo(81,80,80,80,20,20);
  36 ctx.quadraticCurveTo(110,110,20,20);
  37
  38 shouldBeBlue(70,70);
  39 ctx.stroke();
  40 shouldBeYellow(70,70);
  41
  42 </script>
  43 </body>
  44 </html>