1 files changed, 76 insertions, 0 deletions
diff --git a/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html b/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html
new file mode 100644
index 0000000000..69edc168c5
--- /dev/null
+++ b/testing/web-platform/tests/largest-contentful-paint/text-with-display-style.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Largest Contentful Paint: observe text with display style.</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#title {
+  display: flex;
+}
+</style>
+<h1 id='title'>I am a title!</h1>
+<script>
+  async_test(function (t) {
+    assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
+    let beforeRender;
+    /* In this test, we first observe a header with style 'display: flex'.
+     * Once observed, we remove it and add a header with style 'display: grid'.
+     * And once that is observed, we remove it and add a header with style 'display: block'.
+     * At each step, we check the values of the entries received.
+     */
+    let observedFlex = false;
+    let observedGrid = false;
+    const observer = new PerformanceObserver(
+      t.step_func(function(entryList) {
+        assert_equals(entryList.getEntries().length, 1);
+        const entry = entryList.getEntries()[0];
+        assert_equals(entry.entryType, 'largest-contentful-paint');
+        assert_greater_than_equal(entry.renderTime, beforeRender);
+        assert_greater_than_equal(performance.now(), entry.renderTime);
+        assert_approx_equals(entry.startTime, entry.renderTime, 0.001,
+        'startTime should be equal to renderTime to the precision of 1 millisecond.');
+        assert_equals(entry.duration, 0);
+        // TODO: find a good way to bound text size.
+        assert_greater_than_equal(entry.size, 500);
+        assert_equals(entry.url, '');
+        assert_equals(entry.loadTime, 0);
+        if (!observedFlex) {
+          observedFlex = true;
+          assert_equals(entry.id, 'title');
+          const title = document.getElementById('title');
+          assert_equals(entry.element, title);
+          // Remove 'display: flex' and add 'display: grid' text.
+          title.parentNode.removeChild(title);
+          const title2 = document.createElement('h1');
+          title2.id = 'title2';
+          title2.style = 'display: grid';
+          title2.innerHTML = 'I am a second title!';
+          document.body.appendChild(title2);
+          beforeRender = performance.now();
+        } else if (!observedGrid) {
+          observedGrid = true;
+          assert_equals(entry.id, 'title2');
+          const title2 = document.getElementById('title2');
+          assert_equals(entry.element, title2);
+          // Remove 'display: grid' and add 'display: block' text.
+          title2.parentNode.removeChild(title2);
+          const title3 = document.createElement('h1');
+          title3.id = 'title3';
+          title3.style = 'display: block';
+          title3.innerHTML = 'I am the third and last title!';
+          document.body.appendChild(title3);
+          beforeRender = performance.now();
+        } else {
+          assert_equals(entry.id, 'title3');
+          const title3 = document.getElementById('title3');
+          assert_equals(entry.element, title3);
+          t.done();
+        }
+      })
+    );
+    observer.observe({type: 'largest-contentful-paint', buffered: true});
+    beforeRender = performance.now();
+  }, 'Text with display style is observable.');
+</script>
+</body>