Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 16:25:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1611983 [wpt PR 21474] - [ElementTiming and LargestContentfulPaint]Fix background img sizes, a=testonly

Browse Source 
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:
Nicolás Peña Moreno 2020-02-04 13:19:54 +00:00 committed by moz-wptsync-bot
parent eebf0dab95
commit 6dfe17d0c5
2 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
testing/web-platform/tests/element-timing/first-letter-background.html
View File

@ -6,6 +6,9 @@
#target::first-letter { #target::first-letter {
background-image: url('/images/black-rectangle.png'); background-image: url('/images/black-rectangle.png');
} }
#target {
font-size: 12px;
}
</style> </style>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
@ -17,12 +20,20 @@
const div = document.getElementById('target'); const div = document.getElementById('target');
let textObserved = false; let textObserved = false;
let imageObserved = false; let imageObserved = false;
function calculateSize(entry) {
const ir = entry.intersectionRect;
return (ir.right - ir.left) * (ir.bottom - ir.top);
}
const observer = new PerformanceObserver( const observer = new PerformanceObserver(
t.step_func(function(entryList) { t.step_func(function(entryList) {
entryList.getEntries().forEach(entry => { entryList.getEntries().forEach(entry => {
if (entry.name === 'text-paint') { if (entry.name === 'text-paint') {
checkTextElement(entry, 'my_div', 'target', beforeRender, div); checkTextElement(entry, 'my_div', 'target', beforeRender, div);
textObserved = true; 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 { else {
assert_equals(entry.name, 'image-paint'); assert_equals(entry.name, 'image-paint');
@ -30,6 +41,9 @@
checkElement(entry, pathname, 'my_div', 'target', beforeRender, div); checkElement(entry, pathname, 'my_div', 'target', beforeRender, div);
checkNaturalSize(entry, 100, 50); checkNaturalSize(entry, 100, 50);
imageObserved = true; 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) if (textObserved && imageObserved)
@ -39,5 +53,5 @@
observer.observe({entryTypes: ['element']}); observer.observe({entryTypes: ['element']});
}, 'Element with elementtiming attribute and background image in first-letter is observable.'); }, 'Element with elementtiming attribute and background image in first-letter is observable.');
</script> </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> </body>

56
testing/web-platform/tests/largest-contentful-paint/first-letter-background.html
View File

@ -3,9 +3,12 @@
<title>Largest Contentful Paint: observe element with background image in its first letter</title> <title>Largest Contentful Paint: observe element with background image in its first letter</title>
<body> <body>
<style> <style>
#target::first-letter { div::first-letter {
background-image: url('/images/black-rectangle.png'); background-image: url('/images/black-rectangle.png');
} }
div {
font-size: 12px;
}
</style> </style>
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
@ -13,17 +16,56 @@
<script> <script>
async_test(function (t) { async_test(function (t) {
assert_precondition(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); assert_precondition(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
const beforeLoad = performance.now(); let beforeLoad = performance.now();
let observedFirstLetter = false;
const observer = new PerformanceObserver( const observer = new PerformanceObserver(
t.step_func(function(entryList) { 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 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; return;
const url = window.location.origin + '/images/black-rectangle.png'; // The LCP must now be text.
checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']); 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(); t.done();
}) }
})); }));
observer.observe({entryTypes: ['largest-contentful-paint']}); observer.observe({entryTypes: ['largest-contentful-paint']});
}, 'Largest Contentful Paint: first-letter is observable.'); }, 'Largest Contentful Paint: first-letter is observable.');