61 lines
1.6 KiB
HTML
61 lines
1.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
description("This tests canvas full arc fill with nonzero winding rule. Eight green concentric thick circumferences should be displayed.");
|
|
|
|
var canvas = document.createElement('canvas');
|
|
document.body.appendChild(canvas)
|
|
canvas.setAttribute('width', '300');
|
|
canvas.setAttribute('height', '150');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
var r;
|
|
var anticlockwise = true;
|
|
ctx.beginPath();
|
|
for (r = 200; r >= 10; r -= 10) {
|
|
ctx.moveTo(150 + r, 75);
|
|
// Test that anticlockwise is both optional and defaults to false.
|
|
if (anticlockwise) {
|
|
ctx.ellipse(150, 75, r, r * 1.2, 0, 0, Math.PI * 2, anticlockwise);
|
|
} else {
|
|
ctx.ellipse(150, 75, r, r * 1.2, 0, 0, Math.PI * 2);
|
|
}
|
|
ctx.closePath();
|
|
anticlockwise = !anticlockwise;
|
|
}
|
|
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
|
|
ctx.strokeStyle = 'rgba(0, 255, 0, 1)';
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
var imageData = ctx.getImageData(297, 75, 1, 1);
|
|
var data = imageData.data;
|
|
shouldBe("data[1]", "0");
|
|
|
|
imageData = ctx.getImageData(295, 144, 1, 1);
|
|
data = imageData.data;
|
|
shouldBe("data[1]", "255");
|
|
|
|
imageData = ctx.getImageData(272, 144, 1, 1);
|
|
data = imageData.data;
|
|
shouldBe("data[1]", "255");
|
|
|
|
imageData = ctx.getImageData(262, 144, 1, 1);
|
|
data = imageData.data;
|
|
shouldBe("data[1]", "0");
|
|
|
|
imageData = ctx.getImageData(239, 144, 1, 1);
|
|
data = imageData.data;
|
|
shouldBe("data[1]", "0");
|
|
|
|
imageData = ctx.getImageData(228, 144, 1, 1);
|
|
data = imageData.data;
|
|
shouldBe("data[1]", "255");
|
|
</script>
|
|
</body>
|
|
</html>
|