Bug 1808961 [wpt PR 37780] - De-flake element-timing/image-src-change…

….html, a=testonly

Automatic update from web-platform-tests
De-flake element-timing/image-src-change.html

The test was flaky for 2 reasons.
1, By the time the beforeRender timestamp is taken, the image may
already be rendered. The assertion that renderTime >= beforeRender
therefore could fail.

A previous CL crrev.com/c/4118623 fixes this. But the 2nd flakiness
cause is found.

2, There was an assertion in the original test that the entryList of the
performance observer callback should be of size 1. This assertion is
carried over to the fix and is found to be causing flakiness as well.
It is because the performance observer has buffered option.  At the
invocation of observer.observe(..}), the observer picks up the previous
entries and fires the observer callback. Then, if the callback is
actually executed after the 2nd element timing entry is added, the
entryList size would be 2. The assertion then fails.

This CL fixes it by removing the buffered option.

Bug: 1394227,1403318
Change-Id: I58a9da6832bccd4377696c7d7f50508ef1254011
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4139461
Reviewed-by: Ian Clelland <[email protected]>
Commit-Queue: Hao Liu <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1090458}

--

wpt-commits: e3a59ab3ab1dde51fedda63f468f77d0b9cca0fb
wpt-pr: 37780

testing/web-platform/tests/element-timing/image-src-change.html

@@ -14,60 +14,70 @@
   <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 => {
+    const performanceEntryPromise = (pathname) => {
+      return new Promise(resolve => {
+        new PerformanceObserver((entryList, observer) => {
+          assert_equals(entryList.getEntries().length, 1);
           if (entryList.getEntries()[0].url == pathname) {
+            observer.disconnect();
             resolve(entryList.getEntries()[0]);
           }
-        }).observe({ type: 'element', buffered: true });
+        }).observe({ type: 'element' });
       });
     }
 
     promise_test(async (t) => {
       assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented");
 
       // Take beforeRender timestamp.
-      let beforeRender = performance.now();
+      const beforeRender1 = performance.now();
 
-      //Load image
       const img = document.getElementById('my_id');
 
       const url1 = 'resources/square100.png';
+
+      const pathname1 = (new URL(url1, document.location)).href
+
+      // Register performance observer.
+      const promise1 = performanceEntryPromise(pathname1);
+
+      //Load image
       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);
+      const entry1 = await promise1;
 
       // Check entry.
-      checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
-      checkRect(entry, [0, 100, 0, 100]);
-      checkNaturalSize(entry, 100, 100);
+      checkElement(entry1, pathname1, 'my_image', 'my_id', beforeRender1, img);
+      checkRect(entry1, [0, 100, 0, 100]);
+      checkNaturalSize(entry1, 100, 100);
 
       // Take beforeRender timestamp before changing image src.
-      beforeRender = performance.now();
+      const beforeRender2 = performance.now();
 
       // Set the src to trigger another entry.
       const url2 = '/images/black-rectangle.png';
 
+      const pathname2 = (new URL(url2, document.location)).href;
+
+      const promise2 = performanceEntryPromise(pathname2);
+
       //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);
+      const entry2 = await promise2;
 
       // Check entry.
-      checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
-      checkRect(entry, [0, 100, 0, 50]);
-      checkNaturalSize(entry, 100, 50);
+      checkElement(entry2, pathname2, 'my_image', 'my_id', beforeRender2, img);
+      checkRect(entry2, [0, 100, 0, 50]);
+      checkNaturalSize(entry2, 100, 50);
     }, 'Element Timing: changing src causes a new entry to be dispatched.')
   </script>
 

testing/web-platform/tests/element-timing/resources/element-timing-helpers.js

@@ -31,9 +31,9 @@ function checkElement(entry, expectedUrl, expectedIdentifier, expectedID, before
     expectedElement) {
   checkElementInternal(entry, expectedUrl, expectedIdentifier, expectedID, beforeRender,
       expectedElement);
-  assert_equals(entry.name, 'image-paint');
+  assert_equals(entry.name, 'image-paint', 'The entry name should be image-paint.');
   const rt_entries = performance.getEntriesByName(expectedUrl, 'resource');
-  assert_equals(rt_entries.length, 1);
+  assert_equals(rt_entries.length, 1, 'There should be only 1 resource entry.');
   assert_greater_than_equal(entry.loadTime, rt_entries[0].responseEnd,
     'Image loadTime is after the resource responseEnd');
 }
@@ -44,7 +44,7 @@ function checkElementWithoutResourceTiming(entry, expectedUrl, expectedIdentifie
       expectedElement);
   assert_equals(entry.name, 'image-paint');
   // No associated resource from ResourceTiming, so not much to compare loadTime with.
-  assert_greater_than(entry.loadTime, 0);
+  assert_greater_than(entry.loadTime, 0, 'The entry loadTime should be greater than 0.');
 }
 
 // Checks that the rect matches the desired values [left right top bottom].
@@ -61,14 +61,14 @@ function checkRect(entry, expected, description="") {
 
 // Checks that the intrinsic size matches the desired values.
 function checkNaturalSize(entry, width, height) {
-  assert_equals(entry.naturalWidth, width);
-  assert_equals(entry.naturalHeight, height);
+  assert_equals(entry.naturalWidth, width, 'The entry naturalWidth is not as expected.');
+  assert_equals(entry.naturalHeight, height, 'The entry naturalHeight is not as expected.');
 }
 
 function checkTextElement(entry, expectedIdentifier, expectedID, beforeRender,
     expectedElement) {
   checkElementInternal(entry, '', expectedIdentifier, expectedID, beforeRender,
       expectedElement);
-  assert_equals(entry.name, 'text-paint');
-  assert_equals(entry.loadTime, 0);
+  assert_equals(entry.name, 'text-paint', 'The entry name should be text-paint.');
+  assert_equals(entry.loadTime, 0, 'The entry loadTime should be 0.');
 }