image-TAO.sub.html (2528B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: observe cross origin images with various Timing-Allow-Origin headers</title> 4 <body> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="resources/largest-contentful-paint-helpers.js"></script> 8 <div id='my_div'></div> 9 <script> 10 setup({"hide_test_state": true}); 11 async_test(t => { 12 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 13 const remote_img = 'http://{{domains[www]}}:{{ports[http][1]}}/element-timing/resources/TAOImage.py?' 14 + 'origin=' + window.location.origin +'&tao='; 15 const valid_tao = ['wildcard', 'origin', 'multi', 'multi_wildcard', 'match_origin', 'match_wildcard']; 16 const invalid_tao = ['null', 'space', 'uppercase']; 17 const div = document.getElementById('my_div'); 18 let img_length = 20; 19 function addImage(tao) { 20 const img = document.createElement('img'); 21 img.src = remote_img + tao; 22 img.id = tao; 23 // Set increasing size so that largest-contentful-paint captures all of them. 24 img_length++; 25 img.height = img_length; 26 img.width = img_length; 27 div.appendChild(img); 28 } 29 let img_count = 0; 30 const total_images = valid_tao.length + invalid_tao.length; 31 let beforeLoad; 32 new PerformanceObserver( 33 t.step_func(entryList => { 34 assert_equals(entryList.getEntries().length, 1); 35 const entry = entryList.getEntries()[0]; 36 const tao = entry.id; 37 const url = remote_img + tao; 38 const size = img_length * img_length; 39 let options = valid_tao.includes(tao) ? [] : ['renderTimeIs0']; 40 checkImage(entry, url, tao, size, beforeLoad, options); 41 img_count++; 42 beforeLoad = performance.now(); 43 // Process valid TAO images first. 44 if (img_count < valid_tao.length) 45 addImage(valid_tao[img_count]); 46 // Then add invalid TAO images. 47 else if (img_count < total_images) 48 addImage(invalid_tao[img_count - valid_tao.length]); 49 // Once we've seen all the images, end the test. 50 else 51 t.done(); 52 }) 53 ).observe({type: 'largest-contentful-paint'}); 54 // Add first image, the rest will be added on each observer callback. 55 addImage(valid_tao[0]); 56 beforeLoad = performance.now(); 57 }, 'Cross-origin elements with valid TAO have correct renderTime, with invalid TAO have renderTime set to 0.'); 58 </script> 59 </body>