Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<meta charset=utf-8>
<title>Largest Contentful Paint: observe text with display style.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
#title {
display: flex;
<h1 id='title'>I am a title!</h1>
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(, 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(, 'title');
const title = document.getElementById('title');
assert_equals(entry.element, title);
// Remove 'display: flex' and add 'display: grid' text.
const title2 = document.createElement('h1'); = 'title2'; = 'display: grid';
title2.innerHTML = 'I am a second title!';
beforeRender =;
} else if (!observedGrid) {
observedGrid = true;
assert_equals(, 'title2');
const title2 = document.getElementById('title2');
assert_equals(entry.element, title2);
// Remove 'display: grid' and add 'display: block' text.
const title3 = document.createElement('h1'); = 'title3'; = 'display: block';
title3.innerHTML = 'I am the third and last title!';
beforeRender =;
} else {
assert_equals(, 'title3');
const title3 = document.getElementById('title3');
assert_equals(entry.element, title3);
observer.observe({type: 'largest-contentful-paint', buffered: true});
beforeRender =;
}, 'Text with display style is observable.');