third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-arc-connecting-line.js

   1 description("Test that canvas arc()s are connected by a straight line. There should be two C-shapes with a line from the bottom of the left one to the top of the right one.");
   2
   3 var canvas = document.createElement('canvas');
   4 document.body.appendChild(canvas)
   5 canvas.setAttribute('width', '300');
   6 canvas.setAttribute('height', '300');
   7 var ctx = canvas.getContext('2d');
   8 ctx.fillStyle = '#0f0';
   9 ctx.fillRect(0, 0, canvas.width, canvas.height);
  10 ctx.lineJoin = 'bevel';
  11 ctx.lineWidth = 12;
  12 ctx.beginPath();
  13 ctx.arc(200, 50, 40, Math.PI / 2, -Math.PI / 2, false);
  14 ctx.arc(100, 50, 40, Math.PI / 2, -Math.PI / 2, false);
  15 ctx.stroke();
  16
  17 var imageData = ctx.getImageData(0, 0, 1, 1);
  18 var imgdata = imageData.data;
  19 shouldBe("imgdata[0]", "0");
  20 shouldBe("imgdata[1]", "255");
  21 shouldBe("imgdata[2]", "0");
  22
  23 imageData = ctx.getImageData(125, 30, 1, 1);
  24 imgdata = imageData.data;
  25 shouldBe("imgdata[0]", "0");
  26 shouldBe("imgdata[1]", "255");
  27 shouldBe("imgdata[2]", "0");
  28
  29 imageData = ctx.getImageData(125, 70, 1, 1);
  30 imgdata = imageData.data;
  31 shouldBe("imgdata[0]", "0");
  32 shouldBe("imgdata[1]", "0");
  33 shouldBe("imgdata[2]", "0");