[webkit-changes] [221689] trunk

Wed, 06 Sep 2017 11:50:16 -0700

Title: [221689] trunk
Revision
221689
Author
[email protected]
Date
2017-09-06 11:49:47 -0700 (Wed, 06 Sep 2017)

Log Message

REGRESSION (r221598): Legacy "round" and "bevel" options can no longer be used with the legacy CanvasRenderingContext2D setLineJoin operation
https://bugs.webkit.org/show_bug.cgi?id=176461

Patch by Sam Weinig <[email protected]> on 2017-09-06
Reviewed by Alex Christensen.

Source/WebCore:

Tests: fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute.html
       fast/canvas/canvas-strokePath-cap-join-legacy.html

* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::setLineJoin):

    Fix silly typo, ifs -> else ifs.

LayoutTests:

Add tests showing that the legacy setLineJoin and setLineCap operations are correct
and match the corresponding standard attributes.

* fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute-expected.html: Added.
* fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute.html: Added.
* fast/canvas/canvas-strokePath-cap-join-legacy-expected.txt: Added.
* fast/canvas/canvas-strokePath-cap-join-legacy.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (221688 => 221689)


--- trunk/LayoutTests/ChangeLog	2017-09-06 18:45:38 UTC (rev 221688)
+++ trunk/LayoutTests/ChangeLog	2017-09-06 18:49:47 UTC (rev 221689)
@@ -1,3 +1,18 @@
+2017-09-06  Sam Weinig  <[email protected]>
+
+        REGRESSION (r221598): Legacy "round" and "bevel" options can no longer be used with the legacy CanvasRenderingContext2D setLineJoin operation
+        https://bugs.webkit.org/show_bug.cgi?id=176461
+
+        Reviewed by Alex Christensen.
+
+        Add tests showing that the legacy setLineJoin and setLineCap operations are correct
+        and match the corresponding standard attributes.
+
+        * fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute-expected.html: Added.
+        * fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute.html: Added.
+        * fast/canvas/canvas-strokePath-cap-join-legacy-expected.txt: Added.
+        * fast/canvas/canvas-strokePath-cap-join-legacy.html: Added.
+
 2017-09-06  Per Arne Vollan  <[email protected]>
 
         Rebaseline printing/width-overflow.html after r219121.

Added: trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-expected.txt (0 => 221689)


--- trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-expected.txt	2017-09-06 18:49:47 UTC (rev 221689)
@@ -0,0 +1,43 @@
+Ensure correct behavior of canvas with path stroke with legacy setLineCap and setLineJoin functions.
+
+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
+

Added: trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute-expected.html (0 => 221689)


--- trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute-expected.html	2017-09-06 18:49:47 UTC (rev 221689)
@@ -0,0 +1,119 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<body>
+<script>
+
+// Ensures that CanvasRendingContext2D's legacy setLineCap and setLineJoin operations match the behavior of the standard lineCap and lineJoin attributes.
+
+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();
+
+</script>
+</body>
+</html>

Added: trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute.html (0 => 221689)


--- trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute.html	                        (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute.html	2017-09-06 18:49:47 UTC (rev 221689)
@@ -0,0 +1,120 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<body>
+<script>
+
+// Ensures that CanvasRendingContext2D's legacy setLineCap and setLineJoin operations match the behavior of the standard lineCap and lineJoin attributes.
+
+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.setLineJoin("miter");
+ctx.setLineCap("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.setLineJoin("bevel");
+ctx.setLineCap("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.setLineJoin("round");
+ctx.setLineCap("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();
+
+</script>
+</body>
+</html>

Added: trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy.html (0 => 221689)


--- trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy.html	                        (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-strokePath-cap-join-legacy.html	2017-09-06 18:49:47 UTC (rev 221689)
@@ -0,0 +1,264 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script src=""
+</head>
+<body>
+<script>
+description("Ensure correct behavior of canvas with path stroke with legacy setLineCap and setLineJoin functions.");
+
+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.setLineJoin("miter");
+ctx.setLineCap("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.setLineJoin("bevel");
+ctx.setLineCap("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.setLineJoin("round");
+ctx.setLineCap("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 = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(30, 49, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(14, 154, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(14, 157, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(89, 22, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(89, 12, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(184, 29, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(180, 27, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(132, 152, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(130, 157, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+// Verify Join : bevel, Cap : square.
+imageData = ctx.getImageData(202, 154, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(201, 150, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(228, 52, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(225, 48, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(316, 154, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(316, 157, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(289, 52, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(289, 48, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(372, 58, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(373, 54, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(380, 159, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(383, 162, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+// Verify Join : round, Cap : butt.
+imageData = ctx.getImageData(405, 147, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(405, 151, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(429, 46, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(429, 43, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(464, 146, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(464, 150, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(489, 46, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(489, 43, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(534, 151, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(531, 153, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+imageData = ctx.getImageData(579, 52, 1, 1);
+data = ""
+shouldBe('data[0]', '0');
+
+imageData = ctx.getImageData(579, 48, 1, 1);
+data = ""
+shouldBe('data[0]', '255');
+
+</script>
+<script src=""
+</body>
+</html>

Modified: trunk/Source/WebCore/ChangeLog (221688 => 221689)


--- trunk/Source/WebCore/ChangeLog	2017-09-06 18:45:38 UTC (rev 221688)
+++ trunk/Source/WebCore/ChangeLog	2017-09-06 18:49:47 UTC (rev 221689)
@@ -1,3 +1,18 @@
+2017-09-06  Sam Weinig  <[email protected]>
+
+        REGRESSION (r221598): Legacy "round" and "bevel" options can no longer be used with the legacy CanvasRenderingContext2D setLineJoin operation
+        https://bugs.webkit.org/show_bug.cgi?id=176461
+
+        Reviewed by Alex Christensen.
+
+        Tests: fast/canvas/canvas-strokePath-cap-join-legacy-functions-match-attribute.html
+               fast/canvas/canvas-strokePath-cap-join-legacy.html
+
+        * html/canvas/CanvasRenderingContext2D.cpp:
+        (WebCore::CanvasRenderingContext2D::setLineJoin):
+        
+            Fix silly typo, ifs -> else ifs.
+
 2017-09-06  Per Arne Vollan  <[email protected]>
 
         [Win] Compile errors in Document::updateTitleElement.

Modified: trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp (221688 => 221689)


--- trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp	2017-09-06 18:45:38 UTC (rev 221688)
+++ trunk/Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp	2017-09-06 18:49:47 UTC (rev 221689)
@@ -581,9 +581,9 @@
     CanvasLineJoin join;
     if (stringValue == "round")
         join = CanvasLineJoin::Round;
-    if (stringValue == "bevel")
+    else if (stringValue == "bevel")
         join = CanvasLineJoin::Bevel;
-    if (stringValue == "miter")
+    else if (stringValue == "miter")
         join = CanvasLineJoin::Miter;
     else
         return;

_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to