mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
53 lines
2.1 KiB
HTML
53 lines
2.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<meta charset=utf-8>
|
|
<title>Largest Contentful Paint: largest text is reported.</title>
|
|
<body>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style type="text/css">
|
|
#text2 {
|
|
position: absolute;
|
|
width: auto;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
<!-- There is some text and some tiny images. We care about the largest text. -->
|
|
<img src='/images/green-1x1.png'/>
|
|
<div id='text1'>This is some text.</div>
|
|
<div id='text2'>This is more text so it will be the Largest Contentful Paint!</div>
|
|
<img src='/images/green-2x2.png'/>
|
|
<script>
|
|
async_test(function (t) {
|
|
if (!window.LargestContentfulPaint) {
|
|
assert_unreached("LargestContentfulPaint is not implemented");
|
|
}
|
|
let beforeRender;
|
|
const observer = new PerformanceObserver(
|
|
t.step_func(entryList => {
|
|
entryList.getEntries().forEach(entry => {
|
|
// The tiny images or text1 could be reported as LCP if it is rendered before text2.
|
|
if (entry.id !== 'text2')
|
|
return;
|
|
|
|
assert_equals(entry.entryType, 'largest-contentful-paint');
|
|
assert_greater_than_equal(entry.renderTime, beforeRender);
|
|
assert_greater_than_equal(performance.now(), entry.renderTime);
|
|
assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
|
|
assert_equals(entry.duration, 0);
|
|
const div = document.getElementById('text2');
|
|
// The div styling makes it approximate the text size.
|
|
assert_greater_than_equal(entry.size, (div.clientHeight - 5) * (div.clientWidth - 5));
|
|
assert_less_than_equal(entry.size, (div.clientHeight + 1) * (div.clientWidth + 1));
|
|
assert_equals(entry.loadTime, 0);
|
|
assert_equals(entry.id, 'text2');
|
|
assert_equals(entry.url, '');
|
|
assert_equals(entry.element, div);
|
|
t.done();
|
|
})
|
|
})
|
|
);
|
|
observer.observe({type: 'largest-contentful-paint', buffered: true});
|
|
beforeRender = performance.now();
|
|
}, 'Largest Contentful Paint: largest text is reported.');
|
|
</script>
|
|
</body>
|