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
78
79
80
81
82
83
84
85
86
87
|
<!doctype html>
<meta charset=utf-8>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#css-generated-text::before {
content: 'This is some text generated via css';
font-size: 12px;
}
#css-generated-text-attr::before {
content: attr(data-text);
font-size: 12px;
}
#css-generated-text-inline-elem::before {
content: 'This is some more text generated via css that should be displayed via a span tag';
font-size: 12px;
}
</style>
<body>
<script>
const checkText = (entry, expectedSize, expectedID, beforeRender) => {
assert_equals(entry.entryType, 'largest-contentful-paint',
'Entry should be of type largest-contentful-paint');
assert_greater_than_equal(entry.renderTime, beforeRender,
'Render time should be greater than time just before rendering');
assert_greater_than_equal(performance.now(), entry.renderTime,
'renderTime should be less than current time');
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, 'duration should be 0');
assert_greater_than_equal(entry.size, expectedSize,
'Size should match expected size');
assert_equals(entry.loadTime, 0, 'loadTime should be zero');
assert_equals(entry.id, expectedID, 'ID should match expected ID');
assert_equals(entry.url, '', 'URL should be empty');
assert_equals(entry.element, document.getElementById(expectedID),
'Entry element is expected element');
}
const runTest = (element, testName) => {
const elementId = element.id;
// The element should be atleast 12px in width
// and 100px across based on font size and text length.
const elemSizeLowerBound = 1200;
promise_test(t => {
return new Promise((resolve, reject) => {
assert_implements(window.LargestContentfulPaint,
"LargestContentfulPaint is not implemented");
const observer = new PerformanceObserver(resolve);
observer.observe({ type: 'largest-contentful-paint' });
beforeRender = performance.now();
document.body.appendChild(element);
step_timeout(() => {
reject(new Error('timeout, LCP candidate not detected'));
}, 1000)
}).then(entryList => {
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
checkText(entry, elemSizeLowerBound, elementId, beforeRender);
});
}, testName);
}
const cssGeneratedTextElem = document.createElement('p');
cssGeneratedTextElem.id = 'css-generated-text';
runTest(cssGeneratedTextElem,
"CSS generated text is observable as a LargestContentfulPaint candidate");
const cssGeneratedTextAttrElem = document.createElement('p');
cssGeneratedTextAttrElem.id = 'css-generated-text-attr';
cssGeneratedTextAttrElem.setAttribute('data-text',
'This is some text generated using content:attr() via css');
runTest(cssGeneratedTextAttrElem,
"Text generated with CSS using content:attr() is observable as a LargestContentfulPaint candidate");
const cssGeneratedTextAttrInlineElemBlockWrapper = document.createElement('div');
cssGeneratedTextAttrInlineElemBlockWrapper.id = 'css-generated-text-inline-elem-block-wrapper';
const cssGeneratedTextInlineElem = document.createElement('span');
cssGeneratedTextInlineElem.id = 'css-generated-text-inline-elem';
cssGeneratedTextAttrInlineElemBlockWrapper.appendChild(cssGeneratedTextInlineElem);
runTest(cssGeneratedTextAttrInlineElemBlockWrapper,
"CSS generated text on a inline element is observable as a LargestContentfulPaint candidate");
</script>
</body>
|
