test_partialbg.html (2045B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1231622 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1231622: Draw partial frames of downloading css background images</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/WindowSnapshot.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 </head> 13 <body onload="SimpleTest.waitForFocus(runTest)"> 14 15 <style> 16 div { 17 width: 200px; 18 height: 200px; 19 background-size: 200px 200px; background-image: url(sendimagenevercomplete.sjs) 20 } 21 </style> 22 <script> 23 /* sendimagenevercomplete.sjs sends us a partial png file and keeps the 24 * connection open but sends no more data. This is enough data to draw at last 25 * a partial frame. We do this so that we can distinguish from drawing a 26 * partial frame after we've been told all data has arrived, from drawing 27 * a partial frame while data is still arriving. 28 */ 29 30 SimpleTest.waitForExplicitFinish(); 31 const gUtils = SpecialPowers.getDOMWindowUtils(window); 32 33 function checkPixel(r, x, y, red, green, blue, alpha) { 34 let canvas = snapshotRect(window, r); 35 let context = canvas.getContext('2d'); 36 37 let image = context.getImageData(x, y, 1, 1); 38 if (image.data[0] == red && 39 image.data[1] == green && 40 image.data[2] == blue && 41 image.data[3] == alpha) { 42 return true; 43 } 44 return false; 45 } 46 47 async function runTest() { 48 let theDiv = document.createElement("div"); 49 document.body.appendChild(theDiv); 50 51 let r = theDiv.getBoundingClientRect(); 52 53 // Give that some time to partially load. 54 for (let i = 0; i < 10; i++) { 55 await new Promise(resolve => requestAnimationFrame(resolve)); 56 } 57 58 let correct = false; 59 while (!correct) { 60 // Check the middle pixel part way down the partial frame. 61 correct = checkPixel(r, 100, 25, 0, 0, 255, 255); 62 63 await new Promise(resolve => requestAnimationFrame(resolve)); 64 } 65 66 ok(correct, "correct pixel value"); 67 68 SimpleTest.finish(); 69 } 70 </script> 71 </pre> 72 </body> 73 </html>