Bug 1518999 - Add a WPT test to make sure FCP works for iframes r=mst…

…ange Differential Revision: https://phabricator.services.mozilla.com/D86260
jld · Aug 27, 2020 · abc7936 · abc7936
1 parent 2fbb819
commit abc7936
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 22 deletions.
diff --git a/testing/web-platform/tests/paint-timing/child-painting-first-image.html b/testing/web-platform/tests/paint-timing/child-painting-first-image.html
@@ -4,19 +4,37 @@
 <script src="/resources/testharnessreport.js"></script>
 
 <script>
+var entriesExpectToReceive = [
+    {
+        'entryType': 'paint',
+        'name': 'first-paint'
+    },
+    {
+        'entryType': 'paint',
+        'name': 'first-contentful-paint'
+    }
+];
+
 setup({"hide_test_state": true});
 async_test(function (t) {
     assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported.");
     window.addEventListener('message', t.step_func(e => {
-        assert_equals(e.data, '2 paint first-paint paint first-contentful-paint');
         // When only child frame paints, expect only first-paint.
-        t.step_timeout( function() {
+        for (let i = 0; i < entriesExpectToReceive.length; i++) {
+            if (entriesExpectToReceive[i].entryType == e.data.entryType &&
+                entriesExpectToReceive[i].name == e.data.name) {
+                entriesExpectToReceive.splice(i, 1);
+                break;
+            }
+        }
+
+        if (entriesExpectToReceive.length == 0) {
             const bufferedEntries = performance.getEntriesByType('paint');
             assert_equals(bufferedEntries.length, 1);
             assert_equals(bufferedEntries[0].entryType, 'paint');
             assert_equals(bufferedEntries[0].name, 'first-paint');
             t.done();
-        }, 50);
+        }
     }));
     const iframe = document.createElement('iframe');
     iframe.id = 'child-iframe';

diff --git a/testing/web-platform/tests/paint-timing/fcp-only/fcp-iframe.html b/testing/web-platform/tests/paint-timing/fcp-only/fcp-iframe.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<head>
+    <title>
+        Performance Paint Timing Test: Not only the top level document, paints
+        in the iframe should also generate the entry
+    </title>
+</head>
+<body>
+<script src="../resources/utils.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+setup({"hide_test_state": true});
+async_test(function (t) {
+    assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported.");
+    window.addEventListener('message', t.step_func(e => {
+        if (e.data.entryType == "paint" && e.data.name == "first-contentful-paint") {
+            t.done();
+        }
+    }));
+    const iframe = document.createElement('iframe');
+    iframe.src = '../resources/subframe-painting.html';
+    document.body.appendChild(iframe);
+}, 'Parent frame ignores paint-timing events fired from child image rendering.');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/paint-timing/resources/subframe-painting.html b/testing/web-platform/tests/paint-timing/resources/subframe-painting.html
@@ -4,22 +4,20 @@
 <script>
   const img = document.createElement('IMG');
   img.src = 'circles.png';
-  img.onload = function() {
-    function sendPaintEntries() {
-      const paintEntries = performance.getEntriesByType('paint');
-      if (paintEntries.length < 2) {
-        setTimeout(sendPaintEntries, 20);
-        return;
-      }
-      let entryContents = paintEntries.length + '';
+
+  var observer = new PerformanceObserver(function(list, obj) {
+    var paintEntries = list.getEntries();
       for (let i = 0; i < paintEntries.length; i++) {
-        const entry = paintEntries[i];
-        entryContents += ' ' + entry.entryType + ' '  + entry.name;
+          // postMessage doesn't allow sending the entry object over directly
+          var dataToSend = {
+              "entryType": paintEntries[i]["entryType"],
+              "name": paintEntries[i]["name"]
+          };
+          parent.postMessage(dataToSend, '*');
       }
-      parent.postMessage(entryContents, '*');
-    };
-    sendPaintEntries();
-  };
+  });
+
+  observer.observe({"type": "paint"});
   document.getElementById('image').appendChild(img);
 </script>
 </body>

diff --git a/testing/web-platform/tests/paint-timing/sibling-painting-first-image.html b/testing/web-platform/tests/paint-timing/sibling-painting-first-image.html
@@ -6,17 +6,35 @@
 <iframe id="listening-iframe" src="resources/subframe-sending-paint.html"></iframe>
 <script>
 setup({"hide_test_state": true});
+var entriesExpectToReceive = [
+    {
+        'entryType': 'paint',
+        'name': 'first-paint'
+    },
+    {
+        'entryType': 'paint',
+        'name': 'first-contentful-paint'
+    }
+];
 async_test(function (t) {
     assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported.");
     let paintingIframeHasDispatchedEntries = false;
     window.addEventListener('message', t.step_func(e => {
         if (!paintingIframeHasDispatchedEntries) {
             // Check paint-timing entries from the painting iframe.
-            assert_equals(e.data, '2 paint first-paint paint first-contentful-paint');
-            paintingIframeHasDispatchedEntries = true;
-            // Ask the listening iframe to send its paint-timing entries.
-            document.getElementById('listening-iframe').
-                contentWindow.postMessage('', '*');
+            for (let i = 0; i < entriesExpectToReceive.length; i++) {
+                if (entriesExpectToReceive[i].entryType == e.data.entryType &&
+                    entriesExpectToReceive[i].name == e.data.name) {
+                    entriesExpectToReceive.splice(i, 1);
+                    break;
+                }
+            }
+            if (entriesExpectToReceive.length == 0) {
+                paintingIframeHasDispatchedEntries = true;
+                // Ask the listening iframe to send its paint-timing entries.
+                document.getElementById('listening-iframe').
+                    contentWindow.postMessage('', '*');
+            }
             return;
         }
         // Check the paint-timing entries from the listening iframe.