зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1574337 [wpt PR 18472] - [LargestContentfulPaint] Add larger content tests, a=testonly
Automatic update from web-platform-tests [LargestContentfulPaint] Add larger content tests This CL adds tests where there is a bunch of content and LCP must observe the largest (one for when image is largest, one for text). Bug: 994414 Change-Id: I9330f238e1f8a2a8227dce7a04fd741d2dc666d7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1757165 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#688087} -- wpt-commits: 93e7ae091f09497c548ce60ca5026ef07c03b3bc wpt-pr: 18472
This commit is contained in:
Nicolás Peña Moreno
moz-wptsync-bot
Родитель
8cf10edbcc
Коммит
0b744d7a5e
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=utf-8>
|
||||
<title>Largest Contentful Paint: largest image is reported.</title>
|
||||
<body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<!-- There is some text and some images. We care about blue.png being reported, as it is the largest. -->
|
||||
<p>This is some text! :)</p>
|
||||
<img src='/images/red.png' id='red'/>
|
||||
<img src='/images/blue.png' id='blue'/>
|
||||
<img src='/images/black-rectangle.png' id='black'/>
|
||||
<p>More text!</p>
|
||||
<script>
|
||||
async_test(function (t) {
|
||||
if (!window.LargestContentfulPaint) {
|
||||
assert_unreached("LargestContentfulPaint is not implemented");
|
||||
}
|
||||
const beforeRender = performance.now();
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func(entryList => {
|
||||
entryList.getEntries().forEach(entry => {
|
||||
// The text or other image could be reported as LCP if it is rendered before the blue image.
|
||||
if (entry.id !== 'blue')
|
||||
return;
|
||||
|
||||
assert_equals(entry.entryType, 'largest-contentful-paint');
|
||||
assert_greater_than_equal(entry.renderTime, beforeRender,
|
||||
'The rendering timestamp should occur after script starts running.');
|
||||
assert_greater_than_equal(performance.now(), entry.renderTime,
|
||||
'The rendering timestamp should occur before the entry is dispatched to the observer.');
|
||||
assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
|
||||
assert_equals(entry.duration, 0);
|
||||
// blue.png is 133 x 106.
|
||||
assert_equals(entry.size, 133 * 106);
|
||||
assert_equals(entry.id, 'blue');
|
||||
assert_equals(entry.url, window.location.origin + '/images/blue.png');
|
||||
assert_greater_than(entry.loadTime, beforeRender,
|
||||
'The load timestamp should occur after script starts running.');
|
||||
assert_less_than(entry.loadTime, entry.renderTime,
|
||||
'The load timestamp should occur before the render timestamp.')
|
||||
assert_equals(entry.element, document.getElementById('blue'));
|
||||
t.done();
|
||||
})
|
||||
})
|
||||
);
|
||||
observer.observe({type: 'largest-contentful-paint', buffered: true});
|
||||
}, 'Largest Contentful Paint: largest image is reported.');
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!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>
|
||||
Загрузка…
Ссылка в новой задаче