stale-image.html (1718B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tests Stale While Revalidate works for images</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/common/utils.js"></script> 7 <body> 8 <!-- 9 Use a child document to load the second stale image into because 10 an image loaded into the same document will skip cache-control headers. 11 See: https://html.spec.whatwg.org/#the-list-of-available-images 12 --> 13 <iframe id="child1" srcdoc=""></iframe> 14 <iframe id="child2" srcdoc=""></iframe> 15 <script> 16 17 var request_token = token(); 18 let image_src = "resources/stale-image.py?token=" + request_token; 19 20 let loadImage = async (document) => { 21 let img = document.createElement("img"); 22 img.src = image_src; 23 let loaded = new Promise(r => img.onload = r); 24 document.body.appendChild(img); 25 await loaded; 26 return img; 27 }; 28 29 promise_test(async t => { 30 await new Promise(r => window.onload = r); 31 32 let img1 = await loadImage(document); 33 assert_equals(img1.width, 16, "(initial version loaded)"); 34 35 let img2 = await loadImage(child1.contentDocument); 36 assert_equals(img2.width, 16, "(stale version loaded)"); 37 38 // Query the server again and again. At some point it must have received the 39 // revalidation request. We poll, because we don't know when the revalidation 40 // will occur. 41 while(true) { 42 await new Promise(r => step_timeout(r, 25)); 43 let response = await fetch(image_src + "&query"); 44 let count = response.headers.get("Count"); 45 if (count == '2') 46 break; 47 } 48 49 let img3 = await loadImage(child2.contentDocument); 50 assert_equals(img3.width, 256, "(revalidated version loaded)"); 51 52 }, 'Cache returns stale resource'); 53 54 </script> 55 </body>