image-TAO.sub.html (2072B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: 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/element-timing-helpers.js"></script> 8 <script> 9 async_test(t => { 10 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 11 const beforeRender = performance.now(); 12 const remote_img = 'http://{{domains[www]}}:{{ports[http][1]}}/element-timing/resources/TAOImage.py?' 13 + 'origin=' + window.location.origin +'&tao='; 14 const valid_tao = ['wildcard', 'origin', 'multi', 'multi_wildcard', 'match_origin', 'match_wildcard']; 15 function addImage(tao) { 16 const img = document.createElement('img'); 17 img.src = remote_img + tao; 18 img.setAttribute('elementtiming', tao); 19 img.id = 'id_' + tao; 20 document.body.appendChild(img); 21 } 22 valid_tao.forEach(tao => { 23 addImage(tao); 24 }); 25 const invalid_tao = ['null', 'space', 'uppercase']; 26 invalid_tao.forEach(tao => { 27 addImage(tao); 28 }); 29 let img_count = 0; 30 const total_images = valid_tao.length + invalid_tao.length; 31 new PerformanceObserver( 32 t.step_func(entryList => { 33 entryList.getEntries().forEach(entry => { 34 img_count++; 35 const tao = entry.identifier; 36 const img = document.getElementById('id_' + tao); 37 if (valid_tao.includes(tao) || invalid_tao.includes(tao)) { 38 checkElement(entry, remote_img + tao, tao, 'id_' + tao, beforeRender, img); 39 } 40 else { 41 assert_unreached('Should be in one of valid_tao OR invalid_tao'); 42 } 43 checkNaturalSize(entry, 100, 100); 44 if (img_count == total_images) 45 t.done(); 46 }); 47 }) 48 ).observe({type: 'element', buffered: true}); 49 }, 'Cross-origin elements with valid TAO have correct renderTime, with invalid TAO have renderTime set to 0.'); 50 </script> 51 </body>