wrapper.html (2480B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 <title>Image reftest wrapper</title> 5 <style type="text/css"> 6 #image1 { background-color: rgb(10, 100, 250); } 7 </style> 8 <script> 9 var gImg; 10 11 function runAfterAsyncEvents(aCallback) { 12 function handlePostMessage(aEvent) { 13 if (aEvent.data == 'next') { 14 window.removeEventListener('message', handlePostMessage); 15 aCallback(); 16 } 17 } 18 19 window.addEventListener('message', handlePostMessage); 20 21 // We'll receive the 'message' event after everything else that's currently in 22 // the event queue (which is a stronger guarantee than setTimeout, because 23 // setTimeout events may be coalesced). This lets us ensure that we run 24 // aCallback *after* any asynchronous events are delivered. 25 window.postMessage('next', '*'); 26 } 27 28 // The image is loaded async after the page loads 29 // wait for it to finish loading 30 function onImageLoad() { 31 // Use a canvas to force the image to get sync decoded. 32 var canvas = document.createElement('canvas'); 33 var ctx = canvas.getContext('2d'); 34 35 try { 36 ctx.drawImage(gImg, 0, 0); 37 } catch (e) { 38 } 39 40 // Continue after pumping the event loop. 41 runAfterAsyncEvents(step2); 42 } 43 44 function step2() { 45 // Only now, once the image has already been sync decoded, do we load it in 46 // the <img> element we're going to snapshot. That's because for some of the 47 // tests that use wrapper.html, an error is only detected when decoding the 48 // actual image data - i.e., the error isn't detected in the header. The 49 // precise time when we detect the error, unfortunately, affects how we draw 50 // the image. This will be fixed in bug 1182531, and then we can simplify this 51 // code. 52 53 var finalImg = document.getElementById('image1'); 54 finalImg.onload = finalImg.onerror = step3; 55 finalImg.src = gImg.src; 56 } 57 58 function step3() { 59 // We're ready to take the snapshot, but pump the event loop first just to 60 // be sure that everything has settled down. 61 runAfterAsyncEvents(takeSnapshot); 62 } 63 64 function takeSnapshot() { 65 document.documentElement.removeAttribute("class"); 66 } 67 </script> 68 </head> 69 <body> 70 <!-- non-empty alt to avoid the broken image icon --> 71 <img id="image1" alt=" "> 72 <script> 73 // Use as "wrapper.html?image.png 74 gImg = document.createElement('img'); 75 gImg.onload = gImg.onerror = onImageLoad; 76 gImg.src = document.location.search.substr(1); 77 </script> 78 </body> 79 </html>