third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-ellipse-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     // Test that anticlockwise is both optional and defaults to false.
  15     if (anticlockwise) {
  16       ctx.ellipse(150, 75, r, r * 1.2, 0, 0, Math.PI * 2, anticlockwise);
  17     } else {
  18       ctx.ellipse(150, 75, r, r * 1.2, 0, 0, Math.PI * 2);
  19     }
  20     ctx.closePath();
  21     anticlockwise = !anticlockwise;
  22 }
  23 ctx.fillStyle = 'rgba(0, 255, 0, 1)';
  24 ctx.strokeStyle = 'rgba(0, 255, 0, 1)';
  25 ctx.fill();
  26 ctx.stroke();
  27
  28 var imageData = ctx.getImageData(297, 75, 1, 1);
  29 var data = imageData.data;
  30 shouldBe("data[1]", "0");
  31
  32 imageData = ctx.getImageData(295, 144, 1, 1);
  33 data = imageData.data;
  34 shouldBe("data[1]", "255");
  35
  36 imageData = ctx.getImageData(272, 144, 1, 1);
  37 data = imageData.data;
  38 shouldBe("data[1]", "255");
  39
  40 imageData = ctx.getImageData(262, 144, 1, 1);
  41 data = imageData.data;
  42 shouldBe("data[1]", "0");
  43
  44 imageData = ctx.getImageData(239, 144, 1, 1);
  45 data = imageData.data;
  46 shouldBe("data[1]", "0");
  47
  48 imageData = ctx.getImageData(228, 144, 1, 1);
  49 data = imageData.data;
  50 shouldBe("data[1]", "255");