Web Inspector: Change `InspectorAnimationAgent->startTracking` to not error on repeat...
[WebKit-https.git] / LayoutTests / fast / canvas / canvas-drawImage-shadow.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <script src="../../resources/js-test-pre.js"></script>
5 </head>
6 <body>
7 <script>
8 description("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).");
9
10 function print(message, color)
11 {
12     var paragraph = document.createElement("div");
13     paragraph.appendChild(document.createTextNode(message));
14     paragraph.style.fontFamily = "monospace";
15     if (color)
16         paragraph.style.color = color;
17     document.getElementById("console").appendChild(paragraph);
18 }
19
20 function shouldNotBe(a, b)
21 {
22     var evalA;
23     try {
24         evalA = eval(a);
25     } catch(e) {
26         evalA = e;
27     }
28
29     if (evalA != b)
30         print("PASS " + a + " should not be " + b + " and it's not.", "green")
31     else
32         print("FAIL " + a + " should not be " + b + " but it is.", "red");
33 }
34
35 // Create auxiliary canvas to draw to and create an image from.
36 // This is done instead of simply loading an image from the file system
37 // because that would throw a SECURITY_ERR DOM Exception.
38 var aCanvas = document.createElement('canvas');
39 aCanvas.setAttribute('width', '200');
40 aCanvas.setAttribute('height', '200');
41 var aCtx = aCanvas.getContext('2d');
42
43 // Draw a circle on the same canvas.
44 aCtx.beginPath();
45 aCtx.fillStyle = 'green';
46 aCtx.arc(100, 100, 150, 0, -Math.PI/2, false);
47 aCtx.fill();
48
49 // Create the image object to be drawn on the master canvas.
50 var img = new Image();
51 img.onload = drawImageToCanvasAndCheckPixels;
52 img.src = aCanvas.toDataURL(); // set a data URI of the base64 enconded image as the source
53
54 // Create master canvas.
55 var canvas = document.createElement('canvas');
56 document.body.appendChild(canvas);
57 canvas.setAttribute('width', '600');
58 canvas.setAttribute('height', '600');
59 var ctx = canvas.getContext('2d');
60
61 function drawImageToCanvasAndCheckPixels() {
62     ctx.shadowOffsetX = 250;
63     ctx.shadowColor = 'rgba(240, 50, 50, 1.0)';
64     ctx.drawImage(img, 50, 50);
65
66     ctx.shadowOffsetX = 250;
67     ctx.shadowBlur = 6;
68     ctx.shadowColor = 'rgba(50, 50, 200, 0.9)';
69     ctx.shadowColor = 'rgba(0, 0, 255, 1.0)';
70     ctx.drawImage(img, 50, 300);
71
72     checkPixels();
73 }
74
75 function checkPixels() {
76     var imageData, data;
77
78     // Verify solid shadow.
79     imageData = ctx.getImageData(260, 300, 1, 1);
80     d = imageData.data;
81     shouldBe('d[0]', '0');
82     shouldBe('d[1]', '0');
83     shouldBe('d[2]', '0');
84     shouldBe('d[3]', '0');
85
86     imageData = ctx.getImageData(350, 100, 1, 1);
87     d = imageData.data;
88     shouldBe('d[0]', '240');
89     shouldBe('d[1]', '50');
90     shouldBe('d[2]', '50');
91     shouldBe('d[3]', '255');
92
93     imageData = ctx.getImageData(400, 200, 1, 1);
94     d = imageData.data;
95     shouldBe('d[0]', '240');
96     shouldBe('d[1]', '50');
97     shouldBe('d[2]', '50');
98     shouldBe('d[3]', '255');
99
100     imageData = ctx.getImageData(490, 65, 1, 1);
101     d = imageData.data;
102     shouldBe('d[0]', '0');
103     shouldBe('d[1]', '0');
104     shouldBe('d[2]', '0');
105     shouldBe('d[3]', '0');
106
107     imageData = ctx.getImageData(485, 65, 1, 1);
108     d = imageData.data;
109     shouldBe('d[0]', '0');
110     shouldBe('d[1]', '0');
111     shouldBe('d[2]', '0');
112     shouldBe('d[3]', '0');
113
114     // Verify blurry shadow.
115     imageData = ctx.getImageData(260, 400, 1, 1);
116     d = imageData.data;
117     shouldBe('d[0]', '0');
118     shouldBe('d[1]', '0');
119     shouldBe('d[2]', '0');
120     shouldBe('d[3]', '0');
121
122     imageData = ctx.getImageData(350, 300, 1, 1);
123     d = imageData.data;
124     shouldBe('d[0]', '0');
125     shouldBe('d[1]', '0');
126     shouldBe('d[2]', '255');
127     shouldNotBe('d[3]', '255');
128
129     imageData = ctx.getImageData(300, 400, 1, 1);
130     d = imageData.data;
131     shouldBe('d[0]', '0');
132     shouldBe('d[1]', '0');
133     shouldBe('d[2]', '255');
134     shouldNotBe('d[3]', '255');
135
136     imageData = ctx.getImageData(300, 500, 1, 1);
137     d = imageData.data;
138     shouldBe('d[0]', '0');
139     shouldBe('d[1]', '0');
140     shouldBe('d[2]', '255');
141     shouldNotBe('d[3]', '255');
142
143     imageData = ctx.getImageData(400, 500, 1, 1);
144     d = imageData.data;
145     shouldBe('d[0]', '0');
146     shouldBe('d[1]', '0');
147     shouldBe('d[2]', '255');
148     shouldNotBe('d[3]', '255');
149
150     imageData = ctx.getImageData(400, 400, 1, 1);
151     d = imageData.data;
152     shouldBe('d[0]', '0');
153     shouldBe('d[1]', '0');
154     shouldBe('d[2]', '255');
155
156     imageData = ctx.getImageData(490, 315, 1, 1);
157     d = imageData.data;
158     shouldBe('d[0]', '0');
159     shouldBe('d[1]', '0');
160     shouldBe('d[2]', '0');
161     shouldBe('d[3]', '0');
162
163     imageData = ctx.getImageData(485, 320, 1, 1);
164     d = imageData.data;
165     shouldBe('d[0]', '0');
166     shouldBe('d[1]', '0');
167     shouldBe('d[2]', '0');
168     shouldBe('d[3]', '0');
169 }
170 </script>
171 <script src="../../resources/js-test-post.js"></script>
172 </body>
173 </html>