Jose Dapena Paz
d14446d8fe
Automatic update from web-platform-tests ElementTiming/ContainerTiming: report paints of images in pseudo element contents Added support for reporting the paints of images that are declared in the content property of pseudo elements. To implement it, we modify LayoutObject::GeneratingNode(): - First, for anonymous nodes, we find the enclosing node that is not anonymous. - Then, if it is a pseudo element, then we fetch the ultimate originating element. This is the element that is reported as the lastPaintedElement in container timing and as the element in element timing. This changeset modifies the LayoutObject::GeneratingNode implementation that is used in other places. It includes a kill switch just in case the change introduces an unnoticed regression. Additional tests are added for ElementTiming and ContainerTiming with the pseudo cases. The LayoutObjectTest for GeneratingNode was contributed in the review stage by Philip Rogers. Ticket for the discussion of what should happen with pseudo elements: https://github.com/w3c/element-timing/issues/74 Bug: 382422286 Change-Id: I8f810ac5fb118f2d66c78f29d371348d13c45375 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6656960 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: José Dapena Paz <jdapena@igalia.com> Cr-Commit-Position: refs/heads/main@{#1572468} -- wpt-commits: a8fbcd0e854ff5b7bb0eb6da8ebad811dab1ae56 wpt-pr: 57282
45 lines
1.6 KiB
HTML
45 lines
1.6 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>Element Timing: observe an object containing an image</title>
|
|
<style>
|
|
body {
|
|
margin: 20px;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/element-timing-helpers.js"></script>
|
|
<script>
|
|
async_test(function (t) {
|
|
let beforeRender;
|
|
let object;
|
|
assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented");
|
|
const observer = new PerformanceObserver(
|
|
t.step_func_done(function(entryList) {
|
|
assert_equals(entryList.getEntries().length, 1);
|
|
const entry = entryList.getEntries()[0];
|
|
const pathname = window.location.origin + '/images/green-100x50.png';
|
|
checkElement(entry, pathname, 'my_object', 'rectangle', beforeRender, object);
|
|
checkRect(entry, [20, 120, 20, 70]);
|
|
checkNaturalSize(entry, 100, 50);
|
|
})
|
|
);
|
|
observer.observe({entryTypes: ['element']});
|
|
// We add the object during onload to be sure that the observer is
|
|
// registered in time for it to observe the element timing.
|
|
window.onload = () => {
|
|
// Add object of width equal to 100 and height equal to 50.
|
|
object = document.createElement('object');
|
|
object.type = 'image/png';
|
|
object.id = 'rectangle';
|
|
object.data = '/images/green-100x50.png';
|
|
object.setAttribute('elementtiming', 'my_object');
|
|
|
|
document.body.appendChild(object);
|
|
beforeRender = performance.now();
|
|
};
|
|
}, 'Element with an object containing an image.');
|
|
</script>
|
|
</head>
|