third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-arc-360-winding.js

   1 description("This tests canvas full arc fill with nonzero winding rule. Eight green concentric thick circumferences should be displayed.");
   2
   3 var canvas = document.createElement('canvas');
   4 document.body.appendChild(canvas)
   5 canvas.setAttribute('width', '300');
   6 canvas.setAttribute('height', '150');
   7 var ctx = canvas.getContext('2d');
   8
   9 var r;
  10 var anticlockwise = true;
  11 ctx.beginPath();
  12 for (r = 200; r >= 10; r -= 10) {
  13     ctx.moveTo(150 + r, 75);
  14     ctx.arc(150, 75, r, 0, Math.PI*2, anticlockwise);
  15     ctx.closePath();
  16     anticlockwise = !anticlockwise;
  17 }
  18 ctx.fillStyle = 'rgba(0, 255, 0, 1)';
  19 ctx.strokeStyle = 'rgba(0, 255, 0, 1)';
  20 ctx.fill();
  21 ctx.stroke();
  22
  23 var imageData = ctx.getImageData(297, 75, 1, 1);
  24 var data = imageData.data;
  25 shouldBe("data[0]", "0");
  26 shouldBe("data[1]", "0");
  27 shouldBe("data[2]", "0");
  28
  29 imageData = ctx.getImageData(285, 5, 1, 1);
  30 data = imageData.data;
  31 shouldBe("data[0]", "0");
  32 shouldBe("data[1]", "255");
  33 shouldBe("data[2]", "0");
  34
  35 imageData = ctx.getImageData(277, 75, 1, 1);
  36 data = imageData.data;
  37 shouldBe("data[0]", "0");
  38 shouldBe("data[1]", "0");
  39 shouldBe("data[2]", "0");