Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(69)

Unified Diff: LayoutTests/fast/canvas/canvas-arc-circumference.html

Issue 18286007: Fix edge case bugs of canvas arc. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@ellipse
Patch Set: Update layout tests Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: LayoutTests/fast/canvas/canvas-arc-circumference.html
diff --git a/LayoutTests/fast/canvas/canvas-arc-circumference.html b/LayoutTests/fast/canvas/canvas-arc-circumference.html
new file mode 100644
index 0000000000000000000000000000000000000000..b462a98024991797bc459acd30e3cd31c8b39709
--- /dev/null
+++ b/LayoutTests/fast/canvas/canvas-arc-circumference.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+<canvas id="mycanvas" width="400" height="200"></canvas>
+<script src="../js/resources/js-test-pre.js"></script>
+<script>
+description("This tests checks that arc can draw correct circumferences with lineTo.");
+var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 7;
+ctx.fillStyle = 'rgb(255, 255, 255)';
+ctx.strokeStyle = 'rgb(0, 0, 0)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+var imageData = ctx.getImageData(1, 1, 1, 1);
+shouldBe("imageData.data[1]", "255");
+
+debug("Check clockwise circumference.");
+debug(" 1. sweepAngle == 2PI");
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, -Math.PI, Math.PI, false);
alph 2013/07/10 13:06:29 How about drawing e.g. 100 arcs in a loop to form
dshwang 2013/07/10 13:36:42 good idea! I'll do it. I hope that making bitmaps
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(14, 29, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(16, 68, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(40, 26, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(80, 28, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(80, 72, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(40, 74, 1, 1);
+shouldBe("imageData.data[1]", "0");
+
+debug(" 2. sweepAngle == PI");
+ctx.translate(100, 0);
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, -Math.PI, 0, false);
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(114, 29, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(174, 56, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(140, 26, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(180, 28, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(180, 72, 1, 1);
+shouldBe("imageData.data[1]", "255");
+imageData = ctx.getImageData(152, 79, 1, 1);
+shouldBe("imageData.data[1]", "255");
+
+debug(" 3. sweepAngle > 2PI");
+ctx.translate(100, 0);
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, -Math.PI, Math.PI * 2.5, false);
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(214, 29, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(240, 83, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(240, 26, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(280, 28, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(280, 72, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(240, 74, 1, 1);
+shouldBe("imageData.data[1]", "0");
+
+debug(" 4. sweepAngle < 0");
+ctx.translate(100, 0);
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, Math.PI * 1.5, -Math.PI, false);
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(336, 16, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(316, 68, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(340, 26, 1, 1);
+shouldBe("imageData.data[1]", "255");
+imageData = ctx.getImageData(380, 28, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(380, 72, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(340, 74, 1, 1);
+shouldBe("imageData.data[1]", "0");
+
+debug("Check anticlockwise circumference.");
+debug(" 1. sweepAngle == 2PI");
+ctx.translate(-300, 100);
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, Math.PI, -Math.PI, true);
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(14, 129, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(16, 168, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(40, 126, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(80, 128, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(80, 172, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(40, 174, 1, 1);
+shouldBe("imageData.data[1]", "0");
+
+debug(" 2. sweepAngle == PI");
+ctx.translate(100, 0);
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, Math.PI, 0, true);
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(14, 129, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(158, 164, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(140, 126, 1, 1);
+shouldBe("imageData.data[1]", "255");
+imageData = ctx.getImageData(180, 128, 1, 1);
+shouldBe("imageData.data[1]", "255");
+imageData = ctx.getImageData(180, 172, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(140, 174, 1, 1);
+shouldBe("imageData.data[1]", "0");
+
+debug(" 3. sweepAngle > 2PI");
+ctx.translate(100, 0);
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, Math.PI, Math.PI * -1.5, true);
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(214, 129, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(240, 183, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(240, 126, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(280, 128, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(280, 172, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(240, 174, 1, 1);
+shouldBe("imageData.data[1]", "0");
+
+debug(" 4. sweepAngle < 0");
+ctx.translate(100, 0);
+ctx.save();
+ctx.beginPath();
+ctx.moveTo(0, 10);
+ctx.arc(60, 50, 30, Math.PI * -1.5, Math.PI, true);
+ctx.lineTo(0, 90);
+ctx.stroke();
+ctx.restore();
+
+imageData = ctx.getImageData(314, 129, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(316, 168, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(340, 126, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(380, 128, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(380, 172, 1, 1);
+shouldBe("imageData.data[1]", "0");
+imageData = ctx.getImageData(340, 174, 1, 1);
+shouldBe("imageData.data[1]", "255");
+
+</script>
+<script src="../js/resources/js-test-post.js"></script>
+</body>
+</html>
+

Powered by Google App Engine
This is Rietveld 408576698