Update context2d.arc to take optional anticlockwise parameter

tests/html/canvasrenderingcontext2d_test.dart

Index: tests/html/canvasrenderingcontext2d_test.dart
diff --git a/tests/html/canvasrenderingcontext2d_test.dart b/tests/html/canvasrenderingcontext2d_test.dart
index 495e5e4130d658ba08c2f618023e075d8e1ea66a..8c1b9c685ff8f8d77f13472b5fad8d66a05f1b67 100644
--- a/tests/html/canvasrenderingcontext2d_test.dart
+++ b/tests/html/canvasrenderingcontext2d_test.dart
@@ -6,113 +6,253 @@ library url_test;
 import '../../pkg/unittest/lib/unittest.dart';
 import '../../pkg/unittest/lib/html_config.dart';
 import 'dart:html';
+import 'dart:math';
 
 // Some rounding errors in the browsers.
-checkPixel(List<int> pixel, List<int> expected) {
+checkPixel(List<int> pixel, List<int> expected, {ignoreAlpha: false}) {

[blois, 2013/03/08 01:54:50]

I don't see ignoreAlpha being used anywhere.

[Andrei Mouravski, 2013/03/08 08:11:25]

Done.

   expect(pixel[0], closeTo(expected[0], 2));
   expect(pixel[1], closeTo(expected[1], 2));
   expect(pixel[2], closeTo(expected[2], 2));
-  expect(pixel[3], closeTo(expected[3], 2));
+  // We might not care about the exact alpha value (because of aliasing.)

[blois, 2013/03/08 01:54:50]

Alpha will impact the other channels as well. We should test far enough away
from edges to avoid aliasing issues (use wide strokes).

[Andrei Mouravski, 2013/03/08 08:11:25]

Done.

+  if (!ignoreAlpha) {
+    expect(pixel[3], closeTo(expected[3], 2));
+  }
 }
 
 main() {
   useHtmlConfiguration();
-  var canvas = new CanvasElement();
-  canvas.width = 100;
-  canvas.height = 100;
 
-  var context = canvas.context2d;
+  group('canvasRenderingContext2d', () {
+    var canvas;
+    var context;
 
-  List<int> readPixel() {
-    var imageData = context.getImageData(2, 2, 1, 1);
-    return imageData.data;
-  }
+    setUp(() {
+      canvas = new CanvasElement();
+      canvas.width = 100;
+      canvas.height = 100;
 
-  test('setFillColorRgb', () {
-    context.setFillColorRgb(255, 0, 255, 1);
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    expect(readPixel(), [255, 0, 255, 255]);
-  });
+      context = canvas.context2d;
+    });
 
-  test('setFillColorHsl hue', () {
-    context.setFillColorHsl(0, 100, 50);
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    checkPixel(readPixel(), [255, 0, 0, 255]);
-  });
+    tearDown(() {
+      canvas = null;
+      context = null;
+    });
 
-  test('setFillColorHsl hue 2', () {
-    context.setFillColorHsl(240, 100, 50);
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    checkPixel(readPixel(), [0, 0, 255, 255]);
-  });
+    List<int> readPixel(int x, int y) {
+      var imageData = context.getImageData(x, y, 1, 1);
+      return imageData.data;
+    }
 
-  test('setFillColorHsl sat', () {
-    context.setFillColorHsl(0, 0, 50);
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    checkPixel(readPixel(), [127, 127, 127, 255]);
-  });
+    /// Returns true if the pixel has some data in it, false otherwise.
+    bool isPixelFilled(int x, int y) {
+      var data = readPixel(x, y);
+      for (int d in data) {
+        if (d != 0) {
+          return true;
+        }
+      }
+      return false;
+    }
 
-  test('setStrokeColorRgb', () {
-    context.setStrokeColorRgb(255, 0, 255, 1);
-    context.lineWidth = 10;
-    context.strokeRect(0, 0, canvas.width, canvas.height);
-    expect(readPixel(), [255, 0, 255, 255]);
-  });
+    String pixelDataToString(int x, int y) {
+      var data = readPixel(x, y);
 
-  test('setStrokeColorHsl hue', () {
-    context.setStrokeColorHsl(0, 100, 50);
-    context.lineWidth = 10;
-    context.strokeRect(0, 0, canvas.width, canvas.height);
-    expect(readPixel(), [255, 0, 0, 255]);
-  });
+      StringBuffer sb = new StringBuffer('[');
+      for (int i = 0; i < data.length; i++) {

[blois, 2013/03/08 01:54:50]

data.join(', ')?

[Andrei Mouravski, 2013/03/08 08:11:25]

Done.

+        sb.write(data[i]);
+        if (i != data.length - 1) sb.write(', ');
+      }
+      sb.write(']');
+      return sb.toString();
+    }
 
-  test('setStrokeColorHsl hue 2', () {
-    context.setStrokeColorHsl(240, 100, 50);
-    context.lineWidth = 10;
-    context.strokeRect(0, 0, canvas.width, canvas.height);
-    expect(readPixel(), [0, 0, 255, 255]);
-  });
+    String _filled(bool v) => v ? "filled" : "unfilled";
 
-  test('setStrokeColorHsl sat', () {
-    context.setStrokeColorHsl(0, 0, 50);
-    context.lineWidth = 10;
-    context.strokeRect(0, 0, canvas.width, canvas.height);
-    checkPixel(readPixel(), [127, 127, 127, 255]);
-  });
+    void expectPixelFilled(int x, int y, [bool filled = true]) {
+      expect(isPixelFilled(x, y), filled, reason:
+          'Pixel at ($x, $y) was expected to'
+          ' be: <${_filled(filled)}> but was: <${_filled(!filled)}> with data: '
+          '${pixelDataToString(x,y)}');
+    }
 
-  test('fillStyle', () {
-    context.fillStyle = "red";
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    checkPixel(readPixel(), [255, 0, 0, 255]);
-  });
+    void expectPixelUnfilled(int x, int y) {
+      expectPixelFilled(x, y, false);
+    }
 
-  test('strokeStyle', () {
-    context.strokeStyle = "blue";
-    context.lineWidth = 10;
-    context.strokeRect(0, 0, canvas.width, canvas.height);
-    expect(readPixel(), [0, 0, 255, 255]);
-  });
 
-  test('fillStyle linearGradient', () {
-    var gradient = context.createLinearGradient(0,0,20,20);
-    gradient.addColorStop(0,'red');
-    gradient.addColorStop(1,'blue');
-    context.fillStyle = gradient;
-    context.fillRect(0, 0, canvas.width, canvas.height);
-    expect(context.fillStyle is CanvasGradient, isTrue);
-  });
+    test('setFillColorRgb', () {
+      context.setFillColorRgb(255, 0, 255, 1);
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      expect(readPixel(2, 2), [255, 0, 255, 255]);
+    });
+
+    test('setFillColorHsl hue', () {
+      context.setFillColorHsl(0, 100, 50);
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      checkPixel(readPixel(2, 2), [255, 0, 0, 255]);
+    });
+
+    test('setFillColorHsl hue 2', () {
+      context.setFillColorHsl(240, 100, 50);
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      checkPixel(readPixel(2, 2), [0, 0, 255, 255]);
+    });
+
+    test('setFillColorHsl sat', () {
+      context.setFillColorHsl(0, 0, 50);
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      checkPixel(readPixel(2, 2), [127, 127, 127, 255]);
+    });
+
+    test('setStrokeColorRgb', () {
+      context.setStrokeColorRgb(255, 0, 255, 1);
+      context.lineWidth = 10;
+      context.strokeRect(0, 0, canvas.width, canvas.height);
+      expect(readPixel(2, 2), [255, 0, 255, 255]);
+    });
+
+    test('setStrokeColorHsl hue', () {
+      context.setStrokeColorHsl(0, 100, 50);
+      context.lineWidth = 10;
+      context.strokeRect(0, 0, canvas.width, canvas.height);
+      expect(readPixel(2, 2), [255, 0, 0, 255]);
+    });
+
+    test('setStrokeColorHsl hue 2', () {
+      context.setStrokeColorHsl(240, 100, 50);
+      context.lineWidth = 10;
+      context.strokeRect(0, 0, canvas.width, canvas.height);
+      expect(readPixel(2, 2), [0, 0, 255, 255]);
+    });
+
+    test('setStrokeColorHsl sat', () {
+      context.setStrokeColorHsl(0, 0, 50);
+      context.lineWidth = 10;
+      context.strokeRect(0, 0, canvas.width, canvas.height);
+      checkPixel(readPixel(2, 2), [127, 127, 127, 255]);
+    });
+
+    test('fillStyle', () {
+      context.fillStyle = "red";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      checkPixel(readPixel(2, 2), [255, 0, 0, 255]);
+    });
+
+    test('strokeStyle', () {
+      context.strokeStyle = "blue";
+      context.lineWidth = 10;
+      context.strokeRect(0, 0, canvas.width, canvas.height);
+      expect(readPixel(2, 2), [0, 0, 255, 255]);
+    });
+
+    test('fillStyle linearGradient', () {
+      var gradient = context.createLinearGradient(0,0,20,20);
+      gradient.addColorStop(0,'red');
+      gradient.addColorStop(1,'blue');
+      context.fillStyle = gradient;
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      expect(context.fillStyle is CanvasGradient, isTrue);
+    });
+
+    test('putImageData', () {
+      ImageData expectedData = context.getImageData(0, 0, 10, 10);
+      expectedData.data[0] = 25;
+      expectedData.data[1] = 65;
+      expectedData.data[2] = 255;
+      // Set alpha to 255 to make the pixels show up.
+      expectedData.data[3] = 255;
+      context.fillStyle = 'green';
+      context.fillRect(0, 0, canvas.width, canvas.height);
+
+      context.putImageData(expectedData, 0, 0);
+
+      var resultingData = context.getImageData(0, 0, 10, 10);
+      // Make sure that we read back what we wrote.
+      expect(resultingData.data, expectedData.data);
+    });
+
+    test('default arc should be clockwise', () {
+      context.beginPath();
+      final r = 10;
+
+      // Center of arc.
+      final cx = 20;
+      final cy = 20;
+      // Arc centered at (20, 20) with radius 10 will go clockwise
+      // from (20 + r, 20) to (20, 20 + r), which is 1/4 of a circle.
+      context.arc(cx, cy, r, 0, PI/2);
+
+      context.strokeStyle = 'green';
+      context.lineWidth = 2;
+      context.stroke();
+
+      // Center should not be filled.
+      expectPixelUnfilled(cx, cy);
+
+      // (cx + r, cy) should be filled.
+      expectPixelFilled(cx + r, cy, true);
+      // (cx, cy + r) should be filled.
+      expectPixelFilled(cx, cy + r, true);
+      // (cx - r, cy) should be empty.
+      expectPixelFilled(cx - r, cy, false);
+      // (cx, cy - r) should be empty.
+      expectPixelFilled(cx, cy - r, false);
+
+      // (cx + r/SQRT2, cy + r/SQRT2) should be filled.
+      expectPixelFilled(cx + r/SQRT2, cy + r/SQRT2, true);
+
+      // (cx - r/SQRT2, cy - r/SQRT2) should be empty.
+      expectPixelFilled(cx - r/SQRT2, cy + r/SQRT2, false);
+
+      // (cx + r/SQRT2, cy + r/SQRT2) should be empty.
+      expectPixelFilled(cx - r/SQRT2, cy - r/SQRT2, false);
+
+      // (cx - r/SQRT2, cy - r/SQRT2) should be empty.
+      expectPixelFilled(cx + r/SQRT2, cy - r/SQRT2, false);
+    });
+
+    test('arc anticlockwise', () {
+      context.beginPath();
+      final r = 10;
+
+      // Center of arc.
+      final cx = 20;
+      final cy = 20;
+      // Arc centered at (20, 20) with radius 10 will go anticlockwise
+      // from (20 + r, 20) to (20, 20 + r), which is 3/4 of a circle.
+      // Because of the way arc work, when going anti-clockwise, the end points
+      // are not included, so small values are added to radius to make a little
+      // more than a 3/4 circle.
+      context.arc(cx, cy, r, .1, PI/2 - .1, true);
+
+      context.strokeStyle = 'green';
+      context.lineWidth = 2;
+      context.stroke();
+
+      // Center should not be filled.
+      expectPixelUnfilled(cx, cy);
+
+      // (cx + r, cy) should be filled.
+      expectPixelFilled(cx + r, cy, true);
+      // (cx, cy + r) should be filled.
+      expectPixelFilled(cx, cy + r, true);
+      // (cx - r, cy) should be filled.
+      expectPixelFilled(cx - r, cy, true);
+      // (cx, cy - r) should be filled.
+      expectPixelFilled(cx, cy - r, true);
+
+      // (cx + r/SQRT2, cy + r/SQRT2) should be empty.
+      expectPixelFilled(cx + r/SQRT2, cy + r/SQRT2, false);
 
-  test('putImageData', () {
-    ImageData expectedData = context.getImageData(0, 0, 10, 10);
-    expectedData.data[0] = 25;
-    expectedData.data[2] = 255;
-    context.fillStyle = 'green';
-    context.fillRect(0, 0, canvas.width, canvas.height);
+      // (cx - r/SQRT2, cy - r/SQRT2) should be filled.
+      expectPixelFilled(cx - r/SQRT2, cy + r/SQRT2, true);
 
-    context.putImageData(expectedData, 0, 0);
+      // (cx + r/SQRT2, cy + r/SQRT2) should be filled.
+      expectPixelFilled(cx - r/SQRT2, cy - r/SQRT2, true);
 
-    var resultingData = context.getImageData(0, 0, 10, 10);
-    // Make sure that we read back what we wrote.
-    expect(resultingData.data, expectedData.data);
+      // (cx - r/SQRT2, cy - r/SQRT2) should be filled.
+      expectPixelFilled(cx + r/SQRT2, cy - r/SQRT2, true);
+    });
   });
 }