third_party/WebKit/LayoutTests/fast/canvas/canvas-bezier-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 ctx.moveTo(0,0);
  32
  33 // bezier curve with coincident endpoints, horizontal line
  34 ctx.bezierCurveTo(0,0,200,0,0,0);
  35 shouldBeBlue(50,0);
  36 ctx.stroke();
  37 shouldBeYellow(50,0);
  38 shouldBeBlue(0,50);
  39 shouldBeBlue(70,70);
  40
  41 // bezier curve with coincident endpoints, vertical line
  42 ctx.bezierCurveTo(0,200,0,0,0,0);
  43 ctx.stroke();
  44 shouldBeYellow(50,0);
  45 shouldBeBlue(75,75);
  46
  47 // bezier curve with coincident endpoints
  48 ctx.bezierCurveTo(200,0,0,200,0,0);
  49 ctx.stroke();
  50 shouldBeYellow(75,75);
  51
  52
  53 </script>
  54 </body>
  55 </html>