file_img_picture_preload.html (7648B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 Helper for test_img_picture_preload.htm. Can be merged in to the test file 5 when dom.image.{picture,srcset} are removed and we don't need to do pref 6 flipping before the load. 7 8 https://bugzilla.mozilla.org/show_bug.cgi?id=1067345 9 --> 10 <head> 11 <title>Test for Bug 1067345</title> 12 </head> 13 <body onload="afterLoad();"> 14 <script> 15 var is = window.parent.is; 16 var ok = window.parent.ok; 17 var SimpleTest = window.parent.SimpleTest; 18 // Called with number of requests made 19 var notifyTestFinished = window.parent.childTestFinished; 20 var currentDPI = window.parent.currentDPI; 21 22 // This script is intentionally blocking the images below from 23 // loading. It issues sync XHRs to the sjs to wait for the files 24 // to be requested before unblocking DOM creation, then asserts 25 // that the same sources were selected by the preloader and the 26 // real DOM. 27 28 // Number of images to wait for before unblocking load 29 const EXPECTED_PRELOADS = 11; 30 31 function busyWait(waitms) { 32 var start = Date.now(); 33 while (Date.now() < start + waitms); 34 } 35 36 // Send sync XHRs asking the sjs what images it's seen until we 37 // see EXPECTED_PRELOADS images. (If this test is timing out, you broke 38 // the preloader) 39 var preloadedImages = []; 40 while (preloadedImages.length < EXPECTED_PRELOADS) { 41 var request = new XMLHttpRequest(); 42 request.open("GET", "./file_img_picture_preload.sjs?status", false); 43 request.send(null); 44 is(request.status, 200, "Getting status from sjs helper should succeed"); 45 if (request.status === 200) { 46 preloadedImages = JSON.parse(request.responseText); 47 } 48 } 49 50 // Ensure the DOM is still blocked on us before proceeding 51 is(document.querySelector("img"), null, "No <img> elements should exist yet"); 52 </script> 53 54 <!-- All images below will be checked, use sources of the format 55 ./file_img_picture_preload.sjs?imgName:sourceName 56 Update numImages when adding or removing images below --> 57 58 <!-- Basic src --> 59 <img id="img1" 60 src="./file_img_picture_preload.sjs?img1:source1"> 61 <!-- Basic srcset, no src --> 62 <img id="img2" 63 srcset="./file_img_picture_preload.sjs?img2:source1, ./file_img_picture_preload.sjs?img2:source2 2x, ./file_img_picture_preload.sjs?img2:source3 0.5x"> 64 <!-- srcset + src, srcset should shadow entirley --> 65 <img id="img3" 66 srcset="./file_img_picture_preload.sjs?img3:source1, ./file_img_picture_preload.sjs?img3:source2 2x, ./file_img_picture_preload.sjs?img3:source3 0.5x"> 67 <!-- Ditto with sizes selector --> 68 <img id="img4" 69 sizes="50vw" 70 srcset="./file_img_picture_preload.sjs?img4:source1 500w, ./file_img_picture_preload.sjs?img4:source2 200w, ./file_img_picture_preload.sjs?img4:source3 5w"> 71 <!-- Default source shouldn't be selected --> 72 <img id="img5" 73 srcset="./file_img_picture_preload.sjs?img5:source1, ./file_img_picture_preload.sjs?img5:source2 2x" 74 src="./file_img_picture_preload.sjs?img5:source3"> 75 <!-- Default source should be the 1x source, but srcset for others --> 76 <img id="img6" 77 srcset="./file_img_picture_preload.sjs?img6:source1 0.5x, ./file_img_picture_preload.sjs?img6:source2 2x" 78 src="./file_img_picture_preload.sjs?img6:source3"> 79 80 <!-- Ensure we skip various invalid sources --> 81 <picture> 82 <source type="image/png"> 83 <source type="image/png" srcset=""> 84 <source media="(min-width: 1px)"> 85 <source media="(min-width: 1px)" srcset=" "> 86 <source type="invalid/x-bogus-type" srcset="./file_img_picture_preload.sjs?img7:source1"> 87 <source media="(unknown-query-value-thing: 1000something)" srcset="./file_img_picture_preload.sjs?img7:source2"> 88 <source media="(unknown-query-value-thing: 1000something)" srcset="bogus ./file_img_picture_preload.sjs?img7:source3 ./file_img_picture_preload.sjs?img7:source4"> 89 <img id="img7" src="./file_img_picture_preload.sjs?img7:source5"> 90 </picture> 91 92 <!-- Should select matching sources with known type, and shouldn't select later sources that have closer densities--> 93 <picture> 94 <source type="invalid/x-unsupported-image-type" srcset="./file_img_picture_preload.sjs?img8:source1"> 95 <source type="image/png" srcset="./file_img_picture_preload.sjs?img8:source2 2x"> 96 <source type="image/png" srcset="./file_img_picture_preload.sjs?img8:source3 1x"> 97 <img id="img8" src="./file_img_picture_preload.sjs?img8:source4" srcset="./file_img_picture_preload.sjs?img8:source5 2x"> 98 </picture> 99 100 <!-- Should select matching sources by media, and shouldn't select later sources that have closer densities --> 101 <picture> 102 <source media="(bogusxx)" srcset="./file_img_picture_preload.sjs?img9:source1"> 103 <source media="(minimum-width: 1px)" srcset="./file_img_picture_preload.sjs?img9:source2 2x"> 104 <source media="(max-resolution: 0.5dppx)" srcset="./file_img_picture_preload.sjs?img9:source3 1x"> 105 <source media="(min-resolution: 2dppx)" srcset="./file_img_picture_preload.sjs?img9:source4 1x"> 106 <source media="(min-resolution: 1dppx)" srcset="./file_img_picture_preload.sjs?img9:source5 1x"> 107 <source media="(min-resolution: 1dppx)" srcset="./file_img_picture_preload.sjs?img9:source6 2x"> 108 <img id="img9" src="./file_img_picture_preload.sjs?img9:source7" srcset="./file_img_picture_preload.sjs?img9:source8 2x"> 109 </picture> 110 111 <!-- Make sure we consider sizes properly in sources --> 112 <picture> 113 <source type="image/png" 114 sizes="10px" 115 srcset="./file_img_picture_preload.sjs?img10:source1 10w, ./file_img_picture_preload.sjs?img10:source2 20w"> 116 <img id="img10" src="./file_img_picture_preload.sjs?img10:source3"> 117 </picture> 118 119 <!-- Make sure we consider sizes properly --> 120 <img id="img11" sizes="10px" 121 srcset="./file_img_picture_preload.sjs?img11:source1 10w, ./file_img_picture_preload.sjs?img11:source2 20w" 122 src="./file_img_picture_preload.sjs?img11:source3"> 123 124 <script> 125 function afterLoad() { 126 // All images should have picked a source of the format 127 // imgName:sourceName, ensure we have one source per image and 128 // that it was preloaded. 129 130 is(preloadedImages.length, EXPECTED_PRELOADS, 131 "Should have exactly " + EXPECTED_PRELOADS + " preloaded URLs"); 132 133 // Split "imgName:source" sources we saw preload by img name 134 var preloadByName = {}; 135 for (var preload of preloadedImages) { 136 var split = preload.split(":"); 137 // Ensure we didn't preload two sources for the same image 138 ok(preloadByName[split[0]] === undefined, 139 "Should not have queried multiple sources for " + split[0] + 140 " (got " + split[1] + ", already had " + preloadByName[split[0]] + ")"); 141 preloadByName[split[0]] = split[1]; 142 } 143 144 // Check all images, ensure each one had a preload 145 var images = document.querySelectorAll("img"); 146 for (var img of images) { 147 var imgName = img.id; 148 if (img.currentSrc) { 149 split = img.currentSrc.split("?")[1].split(":"); 150 is(split[0], imgName, 151 "image " + imgName + " source matches element id"); 152 is(split[1], preloadByName[imgName], 153 "image " + imgName + " source should match preloaded source"); 154 // Remove from array 155 delete preloadByName[imgName]; 156 } else { 157 // img loaded nothing 158 is(preloadByName[imgName], null, 159 "Should not have preloaded anything for image " + imgName); 160 } 161 } 162 163 notifyTestFinished(preloadedImages.length); 164 } 165 </script> 166 </body> 167 </html>