1 files changed, 74 insertions, 0 deletions
diff --git a/testing/web-platform/tests/element-timing/image-src-change.html b/testing/web-platform/tests/element-timing/image-src-change.html
new file mode 100644
index 0000000000..b5d375329c
--- /dev/null
+++ b/testing/web-platform/tests/element-timing/image-src-change.html
@@ -0,0 +1,74 @@
+<!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>