image-data-uri.html (1764B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: observe inline image</title> 4 <body> 5 <style> 6 body { 7 margin: 0; 8 } 9 #inline_wee { 10 display: block; 11 } 12 </style> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="resources/element-timing-helpers.js"></script> 16 <script> 17 let beforeRender = performance.now(); 18 async_test(function (t) { 19 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 20 const observer = new PerformanceObserver( 21 t.step_func_done(function(entryList) { 22 assert_equals(entryList.getEntries().length, 1); 23 const entry = entryList.getEntries()[0]; 24 // Only the first characters of the data URI are included in the entry. 25 const uriPrefix = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAA'; 26 checkElementWithoutResourceTiming(entry, uriPrefix, 'my_img', 'inline_wee', 27 beforeRender, document.getElementById('inline_wee')); 28 // The image is a red square of length 10. 29 checkRect(entry, [0, 10, 0, 10]); 30 checkNaturalSize(entry, 10, 10); 31 }) 32 ); 33 observer.observe({entryTypes: ['element']}); 34 }, 'Inline image is observable via Element Timing.'); 35 </script> 36 <img elementtiming='my_img' id='inline_wee' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX/AAD///9BHTQRAAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYMAHAAAeAAFuhUcyAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTA0LTA1VDIwOjA4OjQxKzAyOjAwPa6EZwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wNC0wNVQyMDowODo0MSswMjowMEzzPNsAAAAASUVORK5CYII="/> 37 </body>