Implement basic LargestContentfulPaint API

This CL adds a basic implementation of the LargestContentfulPaint API. The implementation is done behind a flag, and is missing attribution information and special handling for images. Explainer: https://github.com/WICG/LargestContentfulPaint Intent to Implement: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/WVqgYtyaGJk Bug: 965505 Change-Id: Ic29604349dc60de2808bdef3df4684e81e1845d7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1646634 Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#670911}
web-platform-tests · Jun 20, 2019 · 93ba864 · 93ba864
1 parent 81c649c
commit 93ba864
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/largest-contentful-paint/observe-image.html b/largest-contentful-paint/observe-image.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Largest Contentful Paint: observe image.</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  let beforeRender;
+  function computeTimestamp() {
+    beforeRender = performance.now();
+  }
+  async_test(function (t) {
+    if (!window.LargestContentfulPaint) {
+      assert_unreached("LargestContentfulPaint is not implemented");
+    }
+    const observer = new PerformanceObserver(
+      t.step_func_done(function(entryList) {
+        assert_equals(entryList.getEntries().length, 1);
+        const entry = entryList.getEntries()[0];
+        assert_equals(entry.entryType, 'largestContentfulPaint');
+        assert_greater_than_equal(entry.startTime, beforeRender);
+        assert_greater_than_equal(performance.now(), entry.startTime);
+        assert_equals(entry.duration, 0);
+        // blue.png is 133 x 106.
+        assert_equals(entry.size, 14098);
+      })
+    );
+    observer.observe({type: 'largestContentfulPaint', buffered: true});
+  }, 'Element with elementtiming attribute is observable.');
+</script>
+
+<img src='/images/blue.png' onload='computeTimestamp()'/>
+</body>
diff --git a/largest-contentful-paint/observe-text.html b/largest-contentful-paint/observe-text.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Largest Contentful Paint: observe text.</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+p {
+  font-size: 12px;
+}
+</style>
+<script>
+  let beforeRender;
+  async_test(function (t) {
+    if (!window.LargestContentfulPaint) {
+      assert_unreached("LargestContentfulPaint is not implemented");
+    }
+    const observer = new PerformanceObserver(
+      t.step_func_done(function(entryList) {
+        assert_equals(entryList.getEntries().length, 1);
+        const entry = entryList.getEntries()[0];
+        assert_equals(entry.entryType, 'largestContentfulPaint');
+        assert_greater_than_equal(entry.startTime, beforeRender);
+        assert_greater_than_equal(performance.now(), entry.startTime);
+        assert_equals(entry.duration, 0);
+        // Some lower bound: height of at least 12 px.
+        // Width of at least 100 px.
+        // TODO: find a good way to bound text width.
+        assert_greater_than_equal(entry.size, 1200);
+      })
+    );
+    observer.observe({type: 'largestContentfulPaint', buffered: true});
+    beforeRender = performance.now();
+  }, 'Element with elementtiming attribute is observable.');
+</script>
+
+<p>This is important text! :)</p>
+</body>