<!DOCTYPE HTML> <meta charset=utf-8> <title>Element Timing: src change triggers new entry</title> <body> <style> body { margin: 0; } </style> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="resources/element-timing-helpers.js"></script> <img elementtiming='my_image' id='my_id' /> <script> const getObservedEntry = async (pathname) => { return await new Promise(resolve => { new PerformanceObserver(entryList => { if (entryList.getEntries()[0].url == pathname) { resolve(entryList.getEntries()[0]); } }).observe({ type: 'element', buffered: true }); }); } promise_test(async (t) => { assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); // Take beforeRender timestamp. let beforeRender = performance.now(); //Load image const img = document.getElementById('my_id'); const url1 = 'resources/square100.png'; await new Promise(resolve => { img.addEventListener('load', resolve); img.src = url1; }); // Get element entry. let pathname = window.location.origin + '/element-timing/' + url1; let entry = await getObservedEntry(pathname); // Check entry. checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); checkRect(entry, [0, 100, 0, 100]); checkNaturalSize(entry, 100, 100); // Take beforeRender timestamp before changing image src. beforeRender = performance.now(); // Set the src to trigger another entry. const url2 = '/images/black-rectangle.png'; //Load image with changed src. await new Promise(resolve => { img.addEventListener('load', resolve); img.src = url2; }); // Get the corresponding element entry. pathname = window.location.origin + url2; entry = await getObservedEntry(pathname); // Check entry. checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img); checkRect(entry, [0, 100, 0, 50]); checkNaturalSize(entry, 100, 50); }, 'Element Timing: changing src causes a new entry to be dispatched.') </script> </body>