third_party/WebKit/LayoutTests/fast/canvas/canvas-scale-drawImage-shadow.html - Issue 2696023002: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests.

Side by Side Diff: third_party/WebKit/LayoutTests/fast/canvas/canvas-scale-drawImage-shadow.html

Issue 2696023002: Use testharness.js instead of js-test.js in LayoutTests/fast/canvas tests. (Closed)

Patch Set: 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:

« third_party/WebKit/LayoutTests/fast/canvas/canvas-drawImage-shadow.html ('K') | « third_party/WebKit/LayoutTests/fast/canvas/canvas-save-restore-with-path-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/canvas/canvas-scale-drawImage-shadow-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">	1 <script src="../../resources/testharness.js"></script>

2 <html>	2 <script src="../../resources/testharnessreport.js"></script>

3 <head>

4 <script src="../../resources/js-test.js"></script>

5 </head>

6 <body>	3 <body>

7 <script src="script-tests/canvas-scale-drawImage-shadow.js"></script>	4 <script>

	5 // Ensure correct behavior of canvas with drawImage+shadow after scaling. A blue and red checkered pattern should be displayed.

	6

	7 // Create auxiliary canvas to draw to and create an image from.

	8 // This is done instead of simply loading an image from the file system

	9 // because that would throw a SECURITY_ERR DOM Exception.

	10 var aCanvas = document.createElement('canvas');

	11 aCanvas.width = aCanvas.height = 10;

	12 var aCtx = aCanvas.getContext('2d');

	13 aCtx.fillStyle = 'rgba(0, 0, 255, 1)';

	14 aCtx.fillRect(0, 0, 50, 50);

	15

	16 // Create the image object to be drawn on the master canvas.

	17 var img = new Image();

	18 img.onload = drawImageToCanvasAndCheckPixels;

	19 img.src = aCanvas.toDataURL(); // set a data URI of the base64 encoded image as the source

	20

	21 aCanvas.width = 10;

	22 aCtx.fillStyle = 'rgba(0, 0, 255, 0.5)';

	23 aCtx.fillRect(0, 0, 50, 50);

	24 // Create the image object to be drawn on the master canvas.

	25 var transparentImg = new Image();

	26 transparentImg.onload = drawImageToCanvasAndCheckPixels;

	27 transparentImg.src = aCanvas.toDataURL(); // set a data URI of the base64 encode d image as the source

	28

	29 // Create master canvas.

	30 var canvas = document.createElement('canvas');

	31 document.body.appendChild(canvas);

	32 canvas.width = 150;

	33 canvas.height = 110;

	34 var ctx = canvas.getContext('2d');

	35

	36 function testPixelShadow(x, y, color)

	37 {

	38 assert_array_equals(ctx.getImageData(x, y, 1, 1).data, color);

	39 }

	40

	41 function testPixelShadowAlpha(x, y, color)

	42 {

	43 var data = ctx.getImageData(x, y, 1, 1).data;

	44 assert_array_equals(data.slice(0,3), color.slice(0,3));

	45 assert_approx_equals(data[3], color[3], 10);

	46 }

	47

	48 var testPixelShadowScenarios = [

	49 ['Verify solid shadow 1', 40, 40, [255, 0, 0, 255]],

	50 ['Verify solid shadow 2', 59, 59, [255, 0, 0, 255]],

	51 ];

	52

	53 var testPixelShadowAlphaScenarios = [

	54 ['Verify solid alpha shadow 1', 41, 81, [255, 0, 0, 76]],

	55 ['Verify solid alpha shadow 2', 59, 99, [255, 0, 0, 76]],

	56

	57 ['Verify blurry shadow 1', 90, 39, [255, 0, 0, 114]],

	58 ['Verify blurry shadow 2', 90, 60, [255, 0, 0, 114]],

	59 ['Verify blurry shadow 3', 79, 50, [255, 0, 0, 114]],

	60 ['Verify blurry shadow 4', 100, 50, [255, 0, 0, 114]],

	61

	62 ['Verify blurry alpha shadow 1', 90, 79, [255, 0, 0, 34]],

	63 ['Verify blurry alpha shadow 2', 90, 100, [255, 0, 0, 34]],

	64 ['Verify blurry alpha shadow 3', 79, 90, [255, 0, 0, 34]],

	65 ['Verify blurry alpha shadow 4', 100, 90, [255, 0, 0, 34]],

	66

	67 ['Verify blurry shadow of image with alpha 1', 130, 39, [255, 0, 0, 57]],

	68 ['Verify blurry shadow of image with alpha 2', 130, 60, [255, 0, 0, 57]],

	69 ['Verify blurry shadow of image with alpha 3', 119, 50, [255, 0, 0, 57]],

	70 ['Verify blurry shadow of image with alpha 4', 140, 50, [255, 0, 0, 57]],

	71

	72 ['Verify blurry alpha shadow of image with alpha 1', 130, 79, [255, 0, 0, 17 ]],

	73 ['Verify blurry alpha shadow of image with alpha 2', 130, 100, [255, 0, 0, 1 7]],

	74 ['Verify blurry alpha shadow of image with alpha 3', 119, 90, [255, 0, 0, 17 ]],

	75 ['Verify blurry alpha shadow of image with alpha 4', 140, 90, [255, 0, 0, 17 ]],

	76 ];

	77

	78 var imagesLoaded = 0;

	79 function drawImageToCanvasAndCheckPixels() {
	Justin Novosad 2017/02/16 15:59:28 it is a bit weird that you have to onload handlers it is a bit weird that you have to onload handlers that call this, meaning it will get called twice. This is likely to be flaky IMHO. Use HTML image tags instead of "new Image()" And then you can just rely on window.onload, which fires once all the document's resources are loaded. You could do the same thing for canvas-drawImage-shadow.html to avoid using async_test there. zakerinasab 2017/02/16 20:11:28 generate_tests replaced with loops in an async_tes Show quoted text On 2017/02/16 15:59:28, Justin Novosad wrote: > it is a bit weird that you have to onload handlers that call this, meaning it > will get called twice. This is likely to be flaky IMHO. Use HTML image tags > instead of "new Image()" And then you can just rely on window.onload, which > fires once all the document's resources are loaded. You could do the same thing > for canvas-drawImage-shadow.html to avoid using async_test there. generate_tests replaced with loops in an async_test.
	80 imagesLoaded = imagesLoaded + 1;

	81 if (imagesLoaded == 2) {

	82 ctx.scale(2, 2);

	83 ctx.shadowOffsetX = 20;

	84 ctx.shadowOffsetY = 20;

	85 ctx.fillStyle = 'rgba(0, 0, 255, 1)';

	86

	87 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';

	88 ctx.drawImage(img, 10, 10);

	89

	90 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';

	91 ctx.drawImage(img, 10, 30);

	92

	93 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';

	94 ctx.shadowBlur = 10;

	95 ctx.drawImage(img, 30, 10);

	96

	97 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';

	98 ctx.drawImage(img, 30, 30);

	99

	100 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';

	101 ctx.drawImage(transparentImg, 50, 10);

	102

	103 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';

	104 ctx.drawImage(transparentImg, 50, 30);

	105

	106 generate_tests(testPixelShadow, testPixelShadowScenarios);

	107 generate_tests(testPixelShadowAlpha, testPixelShadowAlphaScenarios);

	108

	109 }

	110 }

	111

	112 </script>

8 </body>	113 </body>

9 </html>

OLD	NEW