Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-shadow.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-shadow.html b/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-shadow.html |
| index 10f2cad4dfdf80afa7f48191fb27668ab395fb1e..b85e62e9088104aab016704c250624d3219a2e93 100644 |
| --- a/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-shadow.html |
| +++ b/third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-shadow.html |
| @@ -1,9 +1,79 @@ |
| -<!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-drawImage-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 = 'green'; |
| +aCtx.arc(100, 100, 150, 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 enconded image as the source |
| + |
| +// Create master canvas. |
| +var canvas = document.createElement('canvas'); |
| +document.body.appendChild(canvas); |
| +canvas.setAttribute('width', '600'); |
| +canvas.setAttribute('height', '600'); |
| +var ctx = canvas.getContext('2d'); |
| + |
| +var testScenarios = [ |
| + ['Test solid shadow 1', 260, 300, [0, 0, 0, 0]], |
| + ['Test solid shadow 2', 350, 100, [240, 50, 50, 255]], |
| + ['Test solid shadow 3', 400, 200, [240, 50, 50, 255]], |
| + ['Test solid shadow 4', 490, 65, [0, 0, 0, 0]], |
| + ['Test solid shadow 5', 485, 65, [0, 0, 0, 0]], |
| + |
| + ['Test blurry shadow 1', 260, 400, [0, 0, 0, 0]], |
| + ['Test blurry shadow 2', 350, 300, [0, 0, 255, 'neq', 255]], |
| + ['Test blurry shadow 3', 300, 400, [0, 0, 255, 'neq', 255]], |
| + ['Test blurry shadow 4', 300, 500, [0, 0, 255, 'neq', 255]], |
| + ['Test blurry shadow 5', 400, 500, [0, 0, 255, 'neq', 255]], |
| + ['Test blurry shadow 6', 400, 400, [0, 0, 255]], |
| + ['Test blurry shadow 7', 490, 315, [0, 0, 0, 0]], |
| + ['Test blurry shadow 8', 485, 320, [0, 0, 0, 0]], |
| +]; |
| + |
| +function runTestScenario(x, y, expectedColor) |
| +{ |
| + imageData = ctx.getImageData(x, y, 1, 1).data; |
| + if (expectedColor.length == 5) { |
| + assert_array_equals(imageData.slice(0,3), expectedColor.slice(0,3)); |
| + assert_not_equals(imageData[3], expectedColor[4]); |
| + } else { |
| + assert_array_equals(imageData.slice(0, expectedColor.length), expectedColor); |
| + } |
| +} |
| + |
| +function drawImageToCanvasAndCheckPixels() { |
| + ctx.shadowOffsetX = 250; |
| + ctx.shadowColor = 'rgba(240, 50, 50, 1.0)'; |
| + ctx.drawImage(img, 50, 50); |
| + |
| + ctx.shadowOffsetX = 250; |
| + ctx.shadowBlur = 6; |
| + ctx.shadowColor = 'rgba(50, 50, 200, 0.9)'; |
| + ctx.shadowColor = 'rgba(0, 0, 255, 1.0)'; |
| + ctx.drawImage(img, 50, 300); |
| + |
| + generate_tests(runTestScenario, testScenarios); |
| +} |
| + |
| +async_test(t => { |
| + img.onload = function() { |
| + t.step(drawImageToCanvasAndCheckPixels); |
|
Justin Novosad
2017/02/16 15:59:28
Are you sure this works correctly?
zakerinasab
2017/02/16 20:11:28
generate_tests replaced with a loop.
|
| + t.done(); |
| + } |
| +}, "Ensure correct behavior of canvas with image shadow. A square with a cut-out top-right corner should be displayed with solid shadow (top) and blur shadow (bottom)."); |
| +</script> |
| </body> |
| -</html> |