1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Largest Contentful Paint: observe element with background image in its first letter</title>
<body>
<style>
div::first-letter {
background-image: url('/images/black-rectangle.png');
}
div {
font-size: 12px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/largest-contentful-paint-helpers.js"></script>
<script>
setup({"hide_test_state": true});
async_test(function (t) {
assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
let beforeLoad = performance.now();
let observedFirstLetter = false;
const observer = new PerformanceObserver(
t.step_func(function(entryList) {
const entry = entryList.getEntries()[entryList.getEntries().length -1];
if (!observedFirstLetter) {
// When we haven't observed first-letter as LCP...
// If we happen to get a text entry due to text happening before the image, return.
if (entry.url === '') {
assert_equals(entry.entryType, 'largest-contentful-paint');
assert_greater_than_equal(entry.renderTime, beforeLoad);
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);
assert_equals(entry.loadTime, 0);
assert_equals(entry.id, 'target');
assert_equals(entry.element, document.getElementById('target'));
} else {
const url = window.location.origin + '/images/black-rectangle.png';
checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']);
}
// Now change the div content to proceed to the second part of the test.
beforeLoad = performance.now();
const div = document.createElement('div');
div.id = 'target2';
div.innerHTML = 'long text will now be LCP';
document.body.appendChild(div);
observedFirstLetter = true;
} else {
// Ignore entries that are caused by the initial 'target'.
if (entry.id === 'target')
return;
// The LCP must now be text.
if (entry.url !== '')
assert_unreached('First-letter background should not be LCP!');
assert_equals(entry.entryType, 'largest-contentful-paint');
assert_greater_than_equal(entry.renderTime, beforeLoad, 'blaaa');
assert_greater_than_equal(performance.now(), entry.renderTime, 'bleee');
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);
assert_equals(entry.id, 'target2');
const div = document.getElementById('target2');
// Estimate the text size: 12 * 100
assert_greater_than_equal(entry.size, 1200);
assert_equals(entry.loadTime, 0);
assert_equals(entry.element, div);
t.done();
}
}));
observer.observe({entryTypes: ['largest-contentful-paint']});
}, 'Largest Contentful Paint: first-letter is observable.');
</script>
<div id='target'>A</div>
</body>
|
