| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <canvas id="sourceCanvas" width="100" height="100"></canvas> |
| <canvas id="dataURLSynchronousCanvas" width="100" height="100"></canvas> |
| <canvas id="dataURLAsynchronousCanvas" width="100" height="100"></canvas> |
| <canvas id="sameDomainSynchronousCanvas" width="100" height="100"></canvas> |
| <canvas id="sameDomainAsynchronousCanvas" width="100" height="100"></canvas> |
| <canvas id="crossDomainSynchronousCanvas" width="100" height="100"></canvas> |
| <canvas id="crossDomainAsynchronousCanvas" width="100" height="100"></canvas> |
| <script> |
| function drawCanvasBackground(id, color) { |
| var canvas = document.getElementById(id); |
| var context = canvas.getContext("2d"); |
| context.fillStyle = color; |
| context.fillRect(0, 0, 100, 100); |
| return context; |
| } |
| |
| function incrementLoadedImagesCount() { |
| if (typeof incrementLoadedImagesCount.counter == 'undefined') |
| incrementLoadedImagesCount.counter = 0; |
| |
| if (++incrementLoadedImagesCount.counter == 4) |
| finishJSTest(); |
| } |
| |
| function drawAndGetImageDataSynchronous(id, imageSrc, shouldTaint) { |
| var context = drawCanvasBackground(id, '#f00'); // red |
| var image = new Image(); |
| image.src = imageSrc; |
| context.drawImage(image, 0, 0); |
| |
| try { |
| var pixels = new Uint32Array(context.getImageData(0, 0, 1, 1).data.buffer); |
| if (pixels[0] == 0xFF0000FF) |
| debug(shouldTaint ? "Tainting works correctly." : "Tainting works incorrectly."); |
| else |
| debug(shouldTaint ? "Tainting works incorrectly." : "Tainting works correctly."); |
| } |
| catch (error) { |
| debug(shouldTaint ? "Tainting works correctly." : "Tainting works incorrectly."); |
| } |
| |
| incrementLoadedImagesCount(); |
| } |
| |
| function drawAndGetImageDataAsynchronous(canvasId, imageSrc, shouldTaint) { |
| var context = drawCanvasBackground(canvasId, '#f00'); // red |
| var image = new Image(); |
| |
| image.onload = function() { |
| context.drawImage(image, 0, 0); |
| try { |
| var pixels = new Uint32Array(context.getImageData(0, 0, 1, 1).data.buffer); |
| debug(shouldTaint ? "Tainting works incorrectly." : "Tainting works correctly."); |
| } |
| catch (error) { |
| debug(shouldTaint ? "Tainting works correctly." : "Tainting works incorrectly."); |
| } |
| |
| incrementLoadedImagesCount(); |
| } |
| image.src = imageSrc; |
| } |
| |
| window.jsTestIsAsync = true; |
| |
| drawCanvasBackground("sourceCanvas", '#0f0'); // green |
| |
| // The dataURL and same-domain images should not be tainted. We should always be |
| // able to get the image data regardless whether it is drawn or not. But because |
| // we ask for the image data right after we load the image, we do not know the |
| // pixels values. So the synchronous case can't be tested. |
| drawAndGetImageDataAsynchronous("dataURLAsynchronousCanvas", sourceCanvas.toDataURL(), false); |
| drawAndGetImageDataAsynchronous("sameDomainAsynchronousCanvas", "http://127.0.0.1:8000/canvas/resources/100x100-lime-rect.svg", false); |
| |
| // Cross domain image load should taint the canvas. The image should not be drawn |
| // so the synchronous case can be tested since we know the canvas pixel value. |
| drawAndGetImageDataSynchronous("crossDomainSynchronousCanvas", "http://localhost:8000/canvas/resources/100x100-lime-rect.svg", true); |
| drawAndGetImageDataAsynchronous("crossDomainAsynchronousCanvas", "http://localhost:8000/canvas/resources/100x100-lime-rect.svg", true); |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
