mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 08:15:31 +00:00
Bug 1611983 [wpt PR 21474] - [ElementTiming and LargestContentfulPaint]Fix background img sizes, a=testonly
Automatic update from web-platform-tests [ElementTiming and LargestContentfulPaint]Fix background img sizes Currently, we use exclusively the size of the LayoutObject to compute the background image sizes. This is incorrect, for instance when looking at CSS styles like ::first-letter. This CL fixes this by passing the image border to ImagePaintTimingDetector and ImageElementTiming. Bug: 996921 Change-Id: I94e4a2f3c8873be765b144179f7729430c885dac Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2023523 Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#737289} -- wpt-commits: 3061f228d3d8b900b3aec8c7642ff58fc04ea011 wpt-pr: 21474
This commit is contained in:
parent
eebf0dab95
commit
6dfe17d0c5
@ -6,6 +6,9 @@
|
||||
#target::first-letter {
|
||||
background-image: url('/images/black-rectangle.png');
|
||||
}
|
||||
#target {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
@ -17,12 +20,20 @@
|
||||
const div = document.getElementById('target');
|
||||
let textObserved = false;
|
||||
let imageObserved = false;
|
||||
function calculateSize(entry) {
|
||||
const ir = entry.intersectionRect;
|
||||
return (ir.right - ir.left) * (ir.bottom - ir.top);
|
||||
}
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func(function(entryList) {
|
||||
entryList.getEntries().forEach(entry => {
|
||||
if (entry.name === 'text-paint') {
|
||||
checkTextElement(entry, 'my_div', 'target', beforeRender, div);
|
||||
textObserved = true;
|
||||
const size = calculateSize(entry);
|
||||
// Assume average width is between 4px and 15px.
|
||||
// Therefore, text size must be between 12 * (35*4) and 12 * (35*15).
|
||||
assert_between_inclusive(size, 1680, 6300);
|
||||
}
|
||||
else {
|
||||
assert_equals(entry.name, 'image-paint');
|
||||
@ -30,6 +41,9 @@
|
||||
checkElement(entry, pathname, 'my_div', 'target', beforeRender, div);
|
||||
checkNaturalSize(entry, 100, 50);
|
||||
imageObserved = true;
|
||||
const size = calculateSize(entry);
|
||||
// Background image size should only be approximately the size of a single letter.
|
||||
assert_between_inclusive(size, 48, 180);
|
||||
}
|
||||
});
|
||||
if (textObserved && imageObserved)
|
||||
@ -39,5 +53,5 @@
|
||||
observer.observe({entryTypes: ['element']});
|
||||
}, 'Element with elementtiming attribute and background image in first-letter is observable.');
|
||||
</script>
|
||||
<div id='target' elementtiming='my_div'>A</div>
|
||||
<div id='target' elementtiming='my_div'>This is some text that I care about</div>
|
||||
</body>
|
||||
|
@ -3,9 +3,12 @@
|
||||
<title>Largest Contentful Paint: observe element with background image in its first letter</title>
|
||||
<body>
|
||||
<style>
|
||||
#target::first-letter {
|
||||
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>
|
||||
@ -13,17 +16,56 @@
|
||||
<script>
|
||||
async_test(function (t) {
|
||||
assert_precondition(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
|
||||
const beforeLoad = performance.now();
|
||||
let beforeLoad = performance.now();
|
||||
let observedFirstLetter = false;
|
||||
const observer = new PerformanceObserver(
|
||||
t.step_func(function(entryList) {
|
||||
entryList.getEntries().forEach(entry => {
|
||||
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 === '')
|
||||
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_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
|
||||
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;
|
||||
const url = window.location.origin + '/images/black-rectangle.png';
|
||||
checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']);
|
||||
// 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_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime');
|
||||
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.');
|
||||
|
Loading…
Reference in New Issue
Block a user