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}
diff --git a/largest-contentful-paint/observe-image.html b/largest-contentful-paint/observe-image.html
new file mode 100644
index 0000000..f989120
--- /dev/null
+++ 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
new file mode 100644
index 0000000..77ed06e
--- /dev/null
+++ 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>
