Canvas more precisely makes the bounding rect for stroke rendering.
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Apr 2012 22:07:51 +0000 (22:07 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 19 Apr 2012 22:07:51 +0000 (22:07 +0000)
https://bugs.webkit.org/show_bug.cgi?id=75792

Patch by Huang Dongsung <luxtella@company100.net> on 2012-04-19
Reviewed by Simon Fraser.

* fast/canvas/canvas-strokePath-cap-join-expected.txt: Added.
* fast/canvas/canvas-strokePath-cap-join.html: Added.
* fast/canvas/script-tests/canvas-strokePath-cap-join.js: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@114680 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/canvas/canvas-strokePath-cap-join-expected.txt [new file with mode: 0644]
LayoutTests/fast/canvas/canvas-strokePath-cap-join.html [new file with mode: 0644]
LayoutTests/fast/canvas/script-tests/canvas-strokePath-cap-join.js [new file with mode: 0644]

index e1b1e8fd9200d2dec6735b92663c93168e5633f8..c6c0c0fdb5bf38d36f40dec2a68f85559496cb2d 100644 (file)
@@ -1,3 +1,14 @@
+2012-04-19  Huang Dongsung  <luxtella@company100.net>
+
+        Canvas more precisely makes the bounding rect for stroke rendering.
+        https://bugs.webkit.org/show_bug.cgi?id=75792
+
+        Reviewed by Simon Fraser.
+
+        * fast/canvas/canvas-strokePath-cap-join-expected.txt: Added.
+        * fast/canvas/canvas-strokePath-cap-join.html: Added.
+        * fast/canvas/script-tests/canvas-strokePath-cap-join.js: Added.
+
 2012-04-19  Luke Macpherson  <macpherson@chromium.org>
 
         Fix null-pointer dereference in ApplyPropertyZoom::applyValue().
diff --git a/LayoutTests/fast/canvas/canvas-strokePath-cap-join-expected.txt b/LayoutTests/fast/canvas/canvas-strokePath-cap-join-expected.txt
new file mode 100644 (file)
index 0000000..9db0ce3
--- /dev/null
@@ -0,0 +1,43 @@
+Ensure correct behavior of canvas with path stroke with cap and join
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS data[0] is 0
+PASS data[0] is 255
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/canvas/canvas-strokePath-cap-join.html b/LayoutTests/fast/canvas/canvas-strokePath-cap-join.html
new file mode 100644 (file)
index 0000000..1e6bba5
--- /dev/null
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script src="../js/resources/js-test-pre.js"></script>
+</head>
+<body>
+<script src="script-tests/canvas-strokePath-cap-join.js"></script>
+<script src="../js/resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/LayoutTests/fast/canvas/script-tests/canvas-strokePath-cap-join.js b/LayoutTests/fast/canvas/script-tests/canvas-strokePath-cap-join.js
new file mode 100644 (file)
index 0000000..ff6c609
--- /dev/null
@@ -0,0 +1,252 @@
+description("Ensure correct behavior of canvas with path stroke with cap and join");
+
+var canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+canvas.setAttribute('width', '700');
+canvas.setAttribute('height', '200');
+var ctx = canvas.getContext('2d');
+
+ctx.miterLimit = 5;
+ctx.lineWidth = 15;
+
+ctx.fillStyle="rgba(255, 255, 255, 1.0)";
+ctx.fillRect(0, 0, 700, 200);
+
+ctx.strokeStyle="rgba(0, 0, 0, 1.0)";
+ctx.lineJoin = "miter";
+ctx.lineCap = "round";
+
+ctx.translate(0, 50);
+ctx.save();
+
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 2);
+ctx.lineTo(50, 100);
+ctx.stroke();
+
+ctx.translate(60 ,0);
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 3);
+ctx.lineTo(50, 100);
+ctx.stroke();
+
+ctx.translate(90 ,0);
+ctx.save();
+ctx.rotate(0.2);
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 3);
+ctx.lineTo(50, 100);
+ctx.closePath();
+ctx.stroke();
+ctx.restore();
+
+ctx.restore();
+
+ctx.lineJoin = "bevel";
+ctx.lineCap = "square";
+
+ctx.translate(200, 0);
+ctx.save();
+
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 2);
+ctx.lineTo(50, 100);
+ctx.stroke();
+
+ctx.translate(60 ,0);
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 3);
+ctx.lineTo(50, 100);
+ctx.stroke();
+
+ctx.translate(90 ,0);
+ctx.save();
+ctx.rotate(0.2);
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 3);
+ctx.lineTo(50, 100);
+ctx.closePath();
+ctx.stroke();
+ctx.restore();
+
+ctx.restore();
+
+ctx.lineJoin = "round";
+ctx.lineCap = "butt";
+
+ctx.translate(200, 0);
+ctx.save();
+
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 2);
+ctx.lineTo(50, 100);
+ctx.stroke();
+
+ctx.translate(60 ,0);
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 3);
+ctx.lineTo(50, 100);
+ctx.stroke();
+
+ctx.translate(90 ,0);
+ctx.save();
+ctx.rotate(0.2);
+ctx.beginPath();
+ctx.moveTo(10, 100);
+ctx.lineTo(30, 3);
+ctx.lineTo(50, 100);
+ctx.closePath();
+ctx.stroke();
+ctx.restore();
+
+ctx.restore();
+
+var imageData, data;
+
+// Verify Join : miter, Cap : round.
+imageData = ctx.getImageData(30, 51, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(30, 49, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(14, 154, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(14, 157, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(89, 22, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(89, 12, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(184, 29, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(180, 27, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(132, 152, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(130, 157, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+// Verify Join : bevel, Cap : square.
+imageData = ctx.getImageData(202, 154, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(201, 150, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(228, 52, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(225, 48, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(316, 154, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(316, 157, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(289, 52, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(289, 48, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(372, 58, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(373, 54, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(380, 159, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(383, 162, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+// Verify Join : round, Cap : butt.
+imageData = ctx.getImageData(405, 147, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(405, 151, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(429, 46, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(429, 43, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(464, 146, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(464, 150, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(489, 46, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(489, 43, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(534, 151, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(531, 153, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(579, 52, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(579, 48, 1, 1);
+data = imageData.data;
+shouldBe('data[0]', '255');
+