test_bug496292.html (3854B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=496292 5 --> 6 <head> 7 <title>Test for Bug 496292</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=496292">Mozilla Bug 496292</a> 13 <p id="display"></p> 14 <div id="content" style="display: none"> 15 <canvas id="canvas" width="100" height="100"> </canvas> 16 </div> 17 <pre id="test"> 18 <script type="application/javascript"> 19 20 SimpleTest.waitForExplicitFinish(); 21 22 var canvas = document.getElementById('canvas'); 23 var first, second, third, ref; 24 25 var RemoteCanvas = function(url) { 26 this.url = url; 27 }; 28 29 RemoteCanvas.CANVAS_WIDTH = 100; 30 RemoteCanvas.CANVAS_HEIGHT = 100; 31 32 RemoteCanvas.prototype.load = function(cb) { 33 this.cb = cb; 34 35 var windowWidth = window.innerWidth - 25; 36 var iframe; 37 iframe = document.createElement("iframe"); 38 iframe.id = "test-iframe-" + this.url; 39 iframe.height = "10px"; 40 iframe.width = windowWidth + "px"; 41 iframe.style.visibility = "hidden"; 42 iframe.src = this.url; 43 // Here is where the magic happens... add a listener to the 44 // frame's onload event - it will call handleEvent 45 iframe.addEventListener("load", this, true); 46 // append to the end of the page 47 window.document.body.appendChild(iframe); 48 }; 49 50 RemoteCanvas.prototype.reload = function(cb, force) { 51 this.cb = cb; 52 window.frames[0].location.reload(force); 53 } 54 55 RemoteCanvas.prototype.handleEvent = function() { 56 // Look back up the iframe by id 57 var ldrFrame = document.getElementById("test-iframe-" + this.url); 58 // Get a reference to the window object you need for the canvas 59 // SpecialPowers.snapshotRect method 60 var remoteWindow = ldrFrame.contentWindow; 61 62 // Draw canvas 63 canvas.style.width = RemoteCanvas.CANVAS_WIDTH + "px"; 64 canvas.style.height = RemoteCanvas.CANVAS_HEIGHT + "px"; 65 canvas.width = RemoteCanvas.CANVAS_WIDTH; 66 canvas.height = RemoteCanvas.CANVAS_HEIGHT; 67 var windowWidth = window.innerWidth - 25; 68 var windowHeight = window.innerHeight; 69 70 var rect = { left: 0, top: 0, width: windowWidth, height: windowHeight }; 71 var snapshot = SpecialPowers.snapshotRect(remoteWindow, rect, "rgb(0,0,0)"); 72 73 var ctx = canvas.getContext("2d"); 74 ctx.clearRect(0, 0, 75 RemoteCanvas.CANVAS_WIDTH, 76 RemoteCanvas.CANVAS_HEIGHT); 77 ctx.save(); 78 ctx.scale(RemoteCanvas.CANVAS_WIDTH / windowWidth, 79 RemoteCanvas.CANVAS_HEIGHT / windowHeight); 80 ctx.drawImage(snapshot, 0, 0); 81 ctx.restore(); 82 this.cb(); 83 }; 84 85 function loadFirst() 86 { 87 ref = canvas.toDataURL(); 88 89 var remoteCanvas = new RemoteCanvas("bug496292-iframe-1.html"); 90 remoteCanvas.load(checkFirst); 91 } 92 93 function checkFirst() 94 { 95 first = canvas.toDataURL(); 96 is(first, ref, "The default Accept header used by image loader is correct"); 97 98 SpecialPowers.setCharPref("image.http.accept", "image/png"); 99 SpecialPowers.pushPrefEnv({"set": [["image.http.accept", "image/png"]]}, function() { 100 var remoteCanvas = new RemoteCanvas("bug496292-iframe-2.html"); 101 remoteCanvas.load(checkSecond); 102 }); 103 } 104 105 function checkSecond() 106 { 107 second = canvas.toDataURL(); 108 is(second, ref, "The modified Accept header used by image loader is correct"); 109 110 SpecialPowers.pushPrefEnv({"clear": [["image.http.accept"]]}, function() { 111 var remoteCanvas = new RemoteCanvas("bug496292-iframe-1.html"); 112 remoteCanvas.load(checkThird); 113 }); 114 } 115 116 function checkThird() { 117 third = canvas.toDataURL(); 118 is(third, ref, "The Accept header used by image loader should be correctly reset"); 119 120 SimpleTest.finish(); 121 } 122 123 var refCanvas = new RemoteCanvas("bug496292-iframe-ref.html"); 124 refCanvas.load(loadFirst); 125 126 </script> 127 </pre> 128 </body> 129 </html>