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

Unified Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-createPattern-fillRect-shadow.html

Issue 2675763005: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests. (Closed)
Patch Set: Addressing comments Created 3 years, 10 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: third_party/WebKit/LayoutTests/fast/canvas/canvas-createPattern-fillRect-shadow.html
diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-createPattern-fillRect-shadow.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-createPattern-fillRect-shadow.html
index b309e61ff1ff096d1deaaf54c44d98b692e34a30..d9e5abf52f16fd446496f54c9de85aafc7852170 100644
--- a/third_party/WebKit/LayoutTests/fast/canvas/canvas-createPattern-fillRect-shadow.html
+++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-createPattern-fillRect-shadow.html
@@ -1,9 +1,150 @@
-<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
-<html>
-<head>
-<script src="../../resources/js-test.js"></script>
-</head>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
<body>
-<script src="script-tests/canvas-createPattern-fillRect-shadow.js"></script>
+<script>
+
+// Create auxiliary canvas to draw to and create an image from.
+// This is done instead of simply loading an image from the file system
+// because that would throw a SECURITY_ERR DOM Exception.
+var aCanvas = document.createElement('canvas');
+aCanvas.setAttribute('width', '200');
+aCanvas.setAttribute('height', '200');
+var aCtx = aCanvas.getContext('2d');
+
+// Draw a circle on the same canvas.
+aCtx.beginPath();
+aCtx.fillStyle = 'blue';
+aCtx.arc(100, 100, 100, 0, Math.PI * 2, false);
+aCtx.fill();
+
+// Create the image object to be drawn on the master canvas.
+var img = new Image();
+img.src = aCanvas.toDataURL(); // set a data URI of the base64 encoded image as the source
+
+// Create master canvas.
+var canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+canvas.setAttribute('width', '700');
+canvas.setAttribute('height', '1100');
+var ctx = canvas.getContext('2d');
+
+function drawImageToCanvasAndCheckPixels() {
+ ctx.shadowOffsetX = 250;
+ ctx.fillStyle = ctx.createPattern(img, 'repeat');
+
+ ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
+ ctx.fillRect(50, 50, 200, 200);
+
+ ctx.shadowColor = 'rgba(255, 0, 0, 0.2)';
+ ctx.fillRect(50, 300, 200, 200);
+
+ ctx.shadowBlur = 10;
+ ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
+ ctx.fillRect(50, 550, 200, 200);
+
+ ctx.shadowColor = 'rgba(255, 0, 0, 0.2)';
+ ctx.fillRect(50, 800, 200, 200);
+
+ checkPixels();
+}
+
+function checkPixels() {
+ var imageData, data;
+
+ // Verify solid shadow.
+ imageData = ctx.getImageData(300, 50, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_equals(d[3], 255);
+
+ imageData = ctx.getImageData(300, 249, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_equals(d[3], 255);
+
+ imageData = ctx.getImageData(490, 240, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_equals(d[3], 255);
+
+ // Verify solid alpha shadow.
+ imageData = ctx.getImageData(310, 350, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 51, 10);
+
+ imageData = ctx.getImageData(490, 490, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 51, 10);
+
+ imageData = ctx.getImageData(300, 499, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 51, 10);
+
+ // Verify blurry shadow.
+ imageData = ctx.getImageData(310, 550, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 141, 10);
+
+ imageData = ctx.getImageData(490, 750, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 113, 10);
+
+ imageData = ctx.getImageData(499, 499, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 51, 10);
+
+ // Verify blurry alpha shadow.
+ imageData = ctx.getImageData(300, 850, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 29, 10);
+
+ imageData = ctx.getImageData(500, 875, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 23, 10);
+
+ imageData = ctx.getImageData(300, 900, 1, 1);
+ d = imageData.data;
+ assert_equals(d[0], 255);
+ assert_equals(d[1], 0);
+ assert_equals(d[2], 0);
+ assert_approx_equals(d[3], 29, 10);
+}
+
+async_test(t => {
+ img.onload = function() {
+ t.step(drawImageToCanvasAndCheckPixels);
+ t.done();
+ }
+}, "Ensure correct behavior of canvas with createPattern + fillRect with shadow.");
+</script>
</body>
-</html>

Powered by Google App Engine
This is Rietveld 408576698