| Nicolás Peña Moreno | 84bcab6 | 2019-03-06 17:00:47 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| 2 | <meta charset=utf-8> |
| 3 | <title>Element Timing: observe elements with the same resource</title> |
| 4 | <body> |
| 5 | <style> |
| 6 | body { |
| 7 | margin: 0; |
| 8 | } |
| 9 | </style> |
| 10 | <script src="/resources/testharness.js"></script> |
| 11 | <script src="/resources/testharnessreport.js"></script> |
| 12 | <script src="resources/element-timing-helpers.js"></script> |
| 13 | <script> |
| 14 | let beforeRender; |
| 15 | let numEntries = 0; |
| 16 | let responseEnd1; |
| 17 | let responseEnd2; |
| 18 | const index = window.location.href.lastIndexOf('/'); |
| 19 | const pathname = window.location.href.substring(0, index) + |
| 20 | '/resources/square100.png'; |
| 21 | async_test(function (t) { |
| 22 | const observer = new PerformanceObserver( |
| 23 | t.step_func(function(entryList) { |
| 24 | entryList.getEntries().forEach(entry => { |
| 25 | checkElement(entry, pathname, entry.identifier, beforeRender); |
| Nicolás Peña Moreno | cf8e881 | 2019-04-01 17:12:02 | [diff] [blame^] | 26 | checkNaturalSize(entry, 100, 100); |
| Nicolás Peña Moreno | 84bcab6 | 2019-03-06 17:00:47 | [diff] [blame] | 27 | if (entry.identifier === 'my_image') { |
| 28 | ++numEntries; |
| 29 | responseEnd1 = entry.responseEnd; |
| 30 | } |
| 31 | else if (entry.identifier === 'my_image2') { |
| 32 | ++numEntries; |
| 33 | responseEnd2 = entry.responseEnd; |
| 34 | } |
| 35 | }); |
| 36 | if (numEntries == 2) { |
| 37 | assert_equals(responseEnd1, responseEnd2); |
| 38 | t.done(); |
| 39 | } |
| 40 | }) |
| 41 | ); |
| 42 | observer.observe({entryTypes: ['element']}); |
| 43 | // We add the images during onload to be sure that the observer is registered |
| 44 | // in time for it to observe the element timing. |
| 45 | window.onload = () => { |
| 46 | // Add image of width and height equal to 100. |
| 47 | const img = document.createElement('img'); |
| 48 | img.src = 'resources/square100.png'; |
| 49 | img.setAttribute('elementtiming', 'my_image'); |
| 50 | document.body.appendChild(img); |
| 51 | |
| 52 | const img2 = document.createElement('img'); |
| 53 | img2.src = 'resources/square100.png'; |
| 54 | img2.setAttribute('elementtiming', 'my_image2'); |
| 55 | document.body.appendChild(img2); |
| 56 | |
| 57 | beforeRender = performance.now(); |
| 58 | }; |
| 59 | }, 'Element with elementtiming attribute is observable.'); |
| 60 | </script> |
| 61 | |
| 62 | </body> |
