testing/web-platform/tests/element-timing/image-data-uri.html

   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_precondition(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>