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> |