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
62 lines
2.2 KiB
HTML
62 lines
2.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>Element Timing: observe an image rendering an alternate picture source</title>
|
|
<style>
|
|
body {
|
|
margin: 20px;
|
|
}
|
|
#square20 {
|
|
width: 80px;
|
|
height: 40px;
|
|
}
|
|
</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 img;
|
|
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];
|
|
// The reported element is the image node, but the image is the
|
|
// alternate source.
|
|
const pathname = window.location.origin + '/images/green-100x50.png';
|
|
checkElement(entry, pathname, 'my_image', 'square20', beforeRender, img);
|
|
// As we use a smaller viewport, the intersection size is smaller
|
|
checkRect(entry, [20, 100, 20, 60]);
|
|
checkNaturalSize(entry, 100, 50);
|
|
})
|
|
);
|
|
observer.observe({entryTypes: ['element']});
|
|
// We add the image during onload to be sure that the observer is registered
|
|
// in time for it to observe the element timing.
|
|
window.onload = () => {
|
|
// Add image of width equal to 100 and height equal to 50. Use a different
|
|
// color to verify the painted image is the alternate one.
|
|
picture = document.createElement('picture');
|
|
picture.id = 'rectangle';
|
|
picture.setAttribute('elementtiming', 'my_picture');
|
|
|
|
source = document.createElement('source');
|
|
source.srcset = '/images/green-100x50.png'
|
|
source.type = 'image/png';
|
|
picture.appendChild(source);
|
|
|
|
img = document.createElement('img');
|
|
img.setAttribute('elementtiming', 'my_image');
|
|
img.src = 'resources/square20.jpg'
|
|
img.id = 'square20';
|
|
picture.appendChild(img);
|
|
|
|
document.body.appendChild(picture);
|
|
beforeRender = performance.now();
|
|
};
|
|
}, 'Element with a rectangular image and an alternate picture image with precedence reports the correct image.');
|
|
</script>
|
|
</head>
|