img.complete.html (7510B)
1 <!DOCTYPE HTML> 2 <title>DOM img complete Test</title> 3 <meta charset=UTF-8> 4 <link rel="author" title="Anselm Hannemann" href="http://anselm-hannemann.com/" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <img id="imgTestTag"> 9 <img src="" id="imgTestTag2"> 10 <img id="imgTestTag3" style="width: 80px; height:auto;"> 11 <img id="imgTestTag4"> 12 <img id="imgTestTag5"> 13 <div id="image-container"></div> 14 15 <script> 16 var imageInstance = document.createElement('img'); 17 imageInstance.style.display = 'none'; 18 19 document.body.appendChild(imageInstance); 20 </script> 21 22 <div id="log"></div> 23 <script> 24 test(function() { 25 assert_true(document.getElementById("imgTestTag").complete); 26 }, "img src and srcset omitted"); 27 28 test(function() { 29 var img = document.createElement("img"); 30 assert_true(img.complete); 31 }, "img src and srcset omitted on newly-created image"); 32 33 test(function() { 34 var cont = document.getElementById("image-container"); 35 this.add_cleanup(() => { cont.innerHTML = "" }); 36 var img = document.createElement("img"); 37 cont.appendChild(img); 38 assert_true(img.complete); 39 }, "img src and srcset omitted on newly-created-and-inserted image"); 40 41 test(function() { 42 var cont = document.getElementById("image-container"); 43 this.add_cleanup(() => { cont.innerHTML = "" }); 44 cont.innerHTML = "<img>"; 45 assert_true(cont.querySelector("img").complete); 46 }, "img src and srcset omitted on newly-created-via-innerHTML image"); 47 48 test(function() { 49 assert_true(document.getElementById("imgTestTag2").complete); 50 }, "img src empty and srcset omitted"); 51 52 test(function() { 53 var img = document.createElement("img"); 54 img.setAttribute("src", ""); 55 assert_true(img.complete); 56 }, "img src empty and srcset omitted on newly-created image"); 57 58 test(function() { 59 var cont = document.getElementById("image-container"); 60 this.add_cleanup(() => { cont.innerHTML = "" }); 61 var img = document.createElement("img"); 62 img.setAttribute("src", ""); 63 cont.appendChild(img); 64 assert_true(img.complete); 65 }, "img src empty and srcset omitted on newly-created-and-inserted image"); 66 67 test(function() { 68 var cont = document.getElementById("image-container"); 69 this.add_cleanup(() => { cont.innerHTML = "" }); 70 cont.innerHTML = "<img src=''>"; 71 assert_true(cont.querySelector("img").complete); 72 }, "img src empty and srcset omitted on newly-created-via-innerHTML image"); 73 74 test(function() { 75 var img = document.createElement("img"); 76 img.src = location.href; 77 assert_false(img.complete, "Should have a load going"); 78 img.removeAttribute("src"); 79 assert_true(img.complete); 80 }, "img src and srcset omitted on image after it started a load"); 81 82 // test if set to true after img is completely available 83 async_test(t => { 84 var loaded = false; 85 const img = document.getElementById("imgTestTag3"); 86 img.onload = t.step_func_done(function(){ 87 assert_false(loaded); 88 loaded = true; 89 assert_true(img.complete); 90 var currentSrc = img.currentSrc; 91 var expectedUrl = new URL("3.jpg", window.location); 92 assert_equals(new URL(currentSrc).pathname, expectedUrl.pathname); 93 }, "Only one onload, despite setting the src twice"); 94 95 img.src = 'test' + Math.random(); 96 //test if img.complete is set to false if src is changed 97 assert_false(img.complete, "src changed, should be set to false") 98 //change src again, should make only one request as per 'await stable state' 99 img.src = '3.jpg?nocache=' + Math.random(); 100 }, "async src complete test"); 101 102 async_test(t => { 103 var loaded = false; 104 const img = document.getElementById("imgTestTag5") 105 img.onload = t.step_func_done(function(){ 106 assert_false(loaded); 107 loaded = true; 108 assert_true(img.complete); 109 }, "Only one onload, despite setting the srcset twice"); 110 //Test if src, srcset is omitted 111 assert_true(img.complete) 112 img.srcset = "/images/green-256x256.png 1x"; 113 //test if img.complete is set to false if srcset is present 114 assert_false(img.complete, "srcset present, should be set to false"); 115 //change src again, should make only one request as per 'await stable state' 116 img.srcset="/images/green-256x256.png 1.6x" 117 }, "async srcset complete test"); 118 119 // https://html.spec.whatwg.org/multipage/multipage/embedded-content-1.html#update-the-image-data 120 // says to "await a stable state" before fetching so we use a separate <script> 121 imageInstance.src = 'image-1.jpg?pipe=trickle(d1)&nocache=' + Math.random(); // make sure the image isn't in cache 122 </script> 123 <script> 124 // test: The final task that is queued by the networking task source once the resource has been fetched has been queued, but has not yet been run, and the img element is not in the broken state 125 test(function() { 126 assert_false(imageInstance.complete, "imageInstance.complete should be false"); 127 var startTime = Date.now(); 128 while (true) { 129 if (Date.now() - startTime > 2000) { 130 assert_false(imageInstance.complete, "imageInstance.complete should remain false"); 131 break; 132 } 133 if (imageInstance.complete === true) { 134 assert_unreached(".complete should not change within a task"); 135 } 136 } 137 }, 138 'IDL attribute complete cannot "randomly" change during a task'); 139 140 // test if broken img does not pass 141 async_test(t => { 142 const img = document.getElementById("imgTestTag4"); 143 144 img.src = 'brokenimg.jpg'; 145 146 //test if img.complete is set to false if src is changed 147 assert_false(img.complete, "src changed to broken img, should be set to false"); 148 149 img.onload = img.onerror = t.step_func_done(function(event){ 150 assert_equals(event.type, "error"); 151 assert_true(img.complete); 152 }); 153 }, "async src broken test"); 154 155 async_test(t => { 156 var img = document.createElement("img"); 157 assert_true(img.complete); 158 img.src = `3.jpg?nocache=${Math.random()}`; 159 assert_false(img.complete); 160 img.onload = t.step_func_done(() => { 161 assert_true(img.complete); 162 img.removeAttribute("src"); 163 assert_true(img.complete, "Should be complete, since we removed the src"); 164 }); 165 }, "async src removal test"); 166 167 async_test(t => { 168 var img = document.createElement("img"); 169 assert_true(img.complete); 170 img.srcset = `3.jpg?nocache=${Math.random()} 1x`; 171 assert_false(img.complete); 172 img.onload = t.step_func_done(() => { 173 assert_true(img.complete); 174 img.removeAttribute("srcset"); 175 assert_true(img.complete, "Should be complete, since we removed the srcset"); 176 }); 177 }, "async srcset removal test"); 178 179 async_test(t => { 180 var preload = document.createElement("img"); 181 var url = `3.jpg?nocache=${Math.random()}`; 182 preload.src = url; 183 preload.onload = t.step_func_done(function() { 184 var img = document.createElement("img"); 185 assert_true(img.complete); 186 img.src = url; 187 assert_true(img.complete, "Should be complete because we should hit the available image cache"); 188 }); 189 }, "async src available image lookup test"); 190 191 async_test(t => { 192 var img = document.createElement("img"); 193 img.src = `3.jpg?nocache=${Math.random()}`; 194 img.onload = t.step_func_done(function() { 195 assert_true(img.complete); 196 img.src = `3.jpg?nocache=${Math.random()}`; 197 assert_false(img.complete, "Should not be complete because we have started a new load"); 198 }); 199 }, "async pending request test"); 200 </script>