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
zakerinasab
2017/02/16 20:11:28
generate_tests replaced with loops in an async_tes
| |
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 |