Skip to content

ContainerTiming: tests for pre-paint attribution tracker #61423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chromium-wpt-export-bot merged 1 commit into from
Jul 21, 2026
Merged

ContainerTiming: tests for pre-paint attribution tracker #61423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions container-timing/tentative/containertiming-and-ignore-on-img-itself.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Container Timing: observe an image with both containertiming and containertiming-ignore</title>
<body>
<style>
body {
margin: 0;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/container-timing/resources/container-timing-helpers.js"></script>
<script>
let beforeRender;
async_test(function (t) {
assert_implements(window.PerformanceContainerTiming, "PerformanceContainerTiming is not implemented");
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
checkContainerEntry(entry, 'image_ct', 'my_id', beforeRender);
checkContainerIntersectionRect(entry, [0, 100, 0, 100])
checkContainerSize(entry, 10000);
})
);
observer.observe({entryTypes: ['container']});

// Add an image that is itself a container timing root AND has
// containertiming-ignore set. containertiming-ignore only blocks upward
// propagation to ancestor roots; the element's own paint still reports
// under its own root.
const img = document.createElement('img');
img.src = '/container-timing/resources/square100.png';
img.setAttribute('containertiming', 'image_ct');
img.setAttribute('containertiming-ignore', '');
img.setAttribute('id', 'my_id');
document.body.appendChild(img);

beforeRender = performance.now();
}, 'Image with both containertiming and containertiming-ignore reports its own paint.');
</script>

</body>
51 changes: 51 additions & 0 deletions container-timing/tentative/containertiming-and-ignore-on-text-itself.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Container Timing: observe a paragraph with both containertiming and containertiming-ignore</title>
<body>
<style>
body {
margin: 0;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/container-timing/resources/container-timing-helpers.js"></script>
<script>
let beforeRender;
async_test(function (t) {
assert_implements(window.PerformanceContainerTiming, "PerformanceContainerTiming is not implemented");
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
checkContainerEntry(entry, 'p_ct', 'my_id', beforeRender);
// The exact text size depends on font metrics, so unlike the image
// version we only assert the painted area and intersection rect are
// non-zero (symmetry with containertiming-and-ignore-on-img-itself).
assert_greater_than(entry.size, 0, 'container size should be non-zero');
assert_greater_than(
entry.intersectionRect.right - entry.intersectionRect.left, 0,
'intersection rect width should be non-zero');
assert_greater_than(
entry.intersectionRect.bottom - entry.intersectionRect.top, 0,
'intersection rect height should be non-zero');
})
);
observer.observe({entryTypes: ['container']});

// Add a paragraph that is itself a container timing root AND has
// containertiming-ignore set. containertiming-ignore only blocks upward
// propagation to ancestor roots; the element's own text paint still
// reports under its own root.
const p = document.createElement('p');
p.setAttribute('containertiming', 'p_ct');
p.setAttribute('containertiming-ignore', '');
p.id = 'my_id';
p.innerText = "This is a text";
document.body.appendChild(p);

beforeRender = performance.now();
}, 'Text element with both containertiming and containertiming-ignore reports its own paint.');
</script>

</body>
52 changes: 52 additions & 0 deletions container-timing/tentative/nested-containertiming-and-ignore-on-img.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Container Timing: an image with both containertiming and containertiming-ignore inside an outer containertiming root</title>
<body>
<style>
body {
margin: 0;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/container-timing/resources/container-timing-helpers.js"></script>
<script>
let beforeRender;
async_test(function (t) {
assert_implements(window.PerformanceContainerTiming, "PerformanceContainerTiming is not implemented");
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
// Only one entry: the inner image root. The outer containertiming
// root must NOT receive the paint because the image carries
// containertiming-ignore which blocks upward propagation.
assert_equals(entryList.getEntries().length, 1,
'one entry expected for the image root, none for the outer root');
const entry = entryList.getEntries()[0];
checkContainerEntry(entry, 'image_ct', 'my_id', beforeRender);
checkContainerIntersectionRect(entry, [0, 100, 0, 100])
checkContainerSize(entry, 10000);
})
);
observer.observe({entryTypes: ['container']});

// Outer containertiming root.
const outer = document.createElement('div');
outer.setAttribute('containertiming', 'outer_ct');
document.body.appendChild(outer);

// Image that is itself a container timing root and has
// containertiming-ignore set. The ignore must prevent the image's paint
// from propagating to the outer containertiming root, but the image
// itself must still report under its own root.
const img = document.createElement('img');
img.src = '/container-timing/resources/square100.png';
img.setAttribute('containertiming', 'image_ct');
img.setAttribute('containertiming-ignore', '');
img.setAttribute('id', 'my_id');
outer.appendChild(img);

beforeRender = performance.now();
}, 'Image with containertiming + containertiming-ignore inside outer containertiming reports under itself only.');
</script>

</body>
50 changes: 50 additions & 0 deletions container-timing/tentative/nested-containertiming-and-ignore-on-text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Container Timing: a paragraph with both containertiming and containertiming-ignore inside an outer containertiming root</title>
<body>
<style>
body {
margin: 0;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/container-timing/resources/container-timing-helpers.js"></script>
<script>
let beforeRender;
async_test(function (t) {
assert_implements(window.PerformanceContainerTiming, "PerformanceContainerTiming is not implemented");
const observer = new PerformanceObserver(
t.step_func_done(function(entryList) {
// Only one entry: the inner text root. The outer containertiming
// root must NOT receive the paint because the paragraph carries
// containertiming-ignore which blocks upward propagation.
assert_equals(entryList.getEntries().length, 1,
'one entry expected for the text root, none for the outer root');
const entry = entryList.getEntries()[0];
checkContainerEntry(entry, 'p_ct', 'my_id', beforeRender);
})
);
observer.observe({entryTypes: ['container']});

// Outer containertiming root.
const outer = document.createElement('div');
outer.setAttribute('containertiming', 'outer_ct');
document.body.appendChild(outer);

// Paragraph that is itself a container timing root and has
// containertiming-ignore set. The ignore must prevent the text paint
// from propagating to the outer containertiming root, but the paragraph
// itself must still report its own text paint.
const p = document.createElement('p');
p.setAttribute('containertiming', 'p_ct');
p.setAttribute('containertiming-ignore', '');
p.id = 'my_id';
p.innerText = "This is a text";
outer.appendChild(p);

beforeRender = performance.now();
}, 'Text element with containertiming + containertiming-ignore inside outer containertiming reports under itself only.');
</script>

</body>
Loading