commit 9c9a814b1bb458c2a90878891e2eb841243bf005 parent 9d5bd4c545f89c516333698c060073d3b7601885 Author: Jose Dapena Paz <jdapena@igalia.com> Date: Wed, 19 Nov 2025 04:56:56 +0000 Bug 2000897 [wpt PR 56094] - ContainerTiming: drop containertiming-nesting and behave always as transparent, a=testonly Automatic update from web-platform-tests ContainerTiming: drop containertiming-nesting and behave always as transparent After further discussion of how propagation should work, and how different observers could get unexpected behavior from descendants, move to always behave with the transparent propagation: a container timing root will get the paint information from the container timing root descendants. This simplifies the model: the only way to block the propagation is with containertiming-ignore. The shadow DOM cases are not covered (they are not implemented for elementtiming either) and will be implemented at a later stage. Explainer: https://github.com/bloomberg/container-timing/blob/main/README.md Chromestatus: https://chromestatus.com/feature/5110962817073152 I2P: https://groups.google.com/a/chromium.org/g/blink-dev/c/J-WxY0w7bNk/m/VkqnomK-CAAJ Tickets for the discussion covering this: https://github.com/bloomberg/container-timing/issues/3 https://github.com/bloomberg/container-timing/issues/22 Bug: 382422286 Change-Id: I19e3b0c75d86c08f869ca6ef2367385ae5a84873 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7150900 Commit-Queue: José Dapena Paz <jdapena@igalia.com> Reviewed-by: Michal Mocny <mmocny@chromium.org> Reviewed-by: Dominic Farolino <dom@chromium.org> Cr-Commit-Position: refs/heads/main@{#1546612} -- wpt-commits: 8d6f5b94dd203a251f243a5728568d1301bae841 wpt-pr: 56094 Diffstat:
10 files changed, 12 insertions(+), 459 deletions(-)
diff --git a/testing/web-platform/tests/container-timing/tentative/nested-containertiming-child-img-with-ignore.html b/testing/web-platform/tests/container-timing/tentative/nested-containertiming-child-img-with-ignore.html @@ -29,7 +29,6 @@ body { // Add a div that is the container timing root const div1 = document.createElement('div'); div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'transparent'); document.body.appendChild(div1); // Intermediate div with containertiming-ignore blocking propagation to diff --git a/testing/web-platform/tests/container-timing/tentative/nested-containertiming-child-img-with-intermediate-nesting-transparent.html b/testing/web-platform/tests/container-timing/tentative/nested-containertiming-child-img-with-intermediate-nesting-transparent.html @@ -1,55 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, with a child img inside of the inner, and an intermediate nesting policy that is not used</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 src="/element-timing/resources/element-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, 'one entry expected for the image, for the inner containertiming'); - const entry = entryList.getEntries()[0]; - checkContainerEntry(entry, 'div3_ct', 'img_id', beforeRender) - checkRect(entry, [0, 100, 0, 100]) - checkContainerSize(entry, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - document.body.appendChild(div1); - - // Add an intermediate div between container timing roots, that sets a - // nesting policy. This should be ignored. - const div2 = document.createElement('div'); - div2.setAttribute('containertiming-nesting', 'transparent'); - div1.appendChild(div2); - - // Add another div, child of the first, that is also a container root - const div3 = document.createElement('div'); - div3.setAttribute('containertiming', 'div3_ct'); - div2.appendChild(div3); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div3.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root with default nesting policy does not get paints from children containertiming roots, even if an intermediate node could set a different nesting policy.'); -</script> - -</body> diff --git a/testing/web-platform/tests/container-timing/tentative/nested-containertiming-child-img.html b/testing/web-platform/tests/container-timing/tentative/nested-containertiming-child-img.html @@ -17,11 +17,18 @@ body { assert_implements(window.PerformanceContainerTiming, "PerformanceContainerTiming is not implemented"); const observer = new PerformanceObserver( t.step_func_done(function(entryList) { - assert_equals(entryList.getEntries().length, 1, 'one entry expected for the image, for the inner containertiming'); - const entry = entryList.getEntries()[0]; - checkContainerEntry(entry, 'div2_ct', 'img_id', beforeRender) - checkRect(entry, [0, 100, 0, 100]) - checkContainerSize(entry, 10000); + assert_equals(entryList.getEntries().length, 2, 'two entries expected for the image, one for each containertiming'); + const entries = entryList.getEntries(); + + const entry_div1 = entries.find(e => e.identifier == 'div1_ct'); + checkContainerEntry(entry_div1, 'div1_ct', 'img_id', beforeRender) + checkRect(entry_div1, [0, 100, 0, 100]) + checkContainerSize(entry_div1, 10000); + + const entry_div2 = entries.find(e => e.identifier == 'div2_ct'); + checkContainerEntry(entry_div2, 'div2_ct', 'img_id', beforeRender) + checkRect(entry_div2, [0, 100, 0, 100]) + checkContainerSize(entry_div2, 10000); }) ); observer.observe({entryTypes: ['container']}); diff --git a/testing/web-platform/tests/container-timing/tentative/nested-containertiming-nesting-change-from-invalid.html b/testing/web-platform/tests/container-timing/tentative/nested-containertiming-nesting-change-from-invalid.html @@ -1,59 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, parent gets invalid, then transparent nesting policy, with a child img inside of the inner</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 src="/element-timing/resources/element-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, 2, 'one entry expected for each of the containertiming roots'); - const entries = entryList.getEntries(); - - const entry_div1 = entries.find(e => e.identifier == 'div1_ct'); - checkContainerEntry(entry_div1, 'div1_ct', 'img_id', beforeRender) - checkRect(entry_div1, [0, 100, 0, 100]) - checkContainerSize(entry_div1, 10000); - - const entry_div2 = entries.find(e => e.identifier == 'div2_ct'); - checkContainerEntry(entry_div2, 'div2_ct', 'img_id', beforeRender) - checkRect(entry_div2, [0, 100, 0, 100]) - checkContainerSize(entry_div2, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root, set invalid nesting, then - // transparent - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'invalid'); - document.body.appendChild(div1); - div1.setAttribute('containertiming-nesting', 'transparent'); - - // Add another div, child of the first, that is also a container root - const div2 = document.createElement('div'); - div2.setAttribute('containertiming', 'div2_ct'); - div1.appendChild(div2); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div2.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root switches from invalid nesting policy to transparent, generating one painting from each container timing root.'); -</script> - -</body> diff --git a/testing/web-platform/tests/container-timing/tentative/nested-containertiming-nesting-change-to-invalid.html b/testing/web-platform/tests/container-timing/tentative/nested-containertiming-nesting-change-to-invalid.html @@ -1,51 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, parent switching from transparent to invalid nesting policy, with a child img inside of the inner</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 src="/element-timing/resources/element-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, 'one entry expected for the image, for the inner containertiming'); - const entry = entryList.getEntries()[0]; - checkContainerEntry(entry, 'div2_ct', 'img_id', beforeRender) - checkRect(entry, [0, 100, 0, 100]) - checkContainerSize(entry, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'transparent'); - document.body.appendChild(div1); - div1.setAttribute('containertiming-nesting', 'invalid'); - - // Add another div, child of the first, that is also a container root - const div2 = document.createElement('div'); - div2.setAttribute('containertiming', 'div2_ct'); - div1.appendChild(div2); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div2.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root switches from transparent nesting policy to invalid, generating only a paint for the inner container timing.'); -</script> - -</body> diff --git a/testing/web-platform/tests/container-timing/tentative/nested-shadowed-containertiming-child-img.html b/testing/web-platform/tests/container-timing/tentative/nested-shadowed-containertiming-child-img.html @@ -1,58 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, parent with shadowed mode, with a child img inside of the inner</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 src="/element-timing/resources/element-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, 2, 'for the image, one entry expected for each container timing'); - const entries = entryList.getEntries(); - - const entry_div1 = entries.find(e => e.identifier == 'div1_ct'); - checkContainerEntry(entry_div1, 'div1_ct', 'div2_id', beforeRender) - checkRect(entry_div1, [0, 100, 0, 100]) - checkContainerSize(entry_div1, 10000); - - const entry_div2 = entries.find(e => e.identifier == 'div2_ct'); - checkContainerEntry(entry_div2, 'div2_ct', 'img_id', beforeRender) - checkRect(entry_div2, [0, 100, 0, 100]) - checkContainerSize(entry_div2, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'shadowed'); - document.body.appendChild(div1); - - // Add another div, child of the first, that is also a container root - const div2 = document.createElement('div'); - div2.setAttribute('id', 'div2_id'); - div2.setAttribute('containertiming', 'div2_ct'); - div1.appendChild(div2); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div2.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root with shadowed nesting policy gets only child containertiming paints without element data.'); -</script> - -</body> diff --git a/testing/web-platform/tests/container-timing/tentative/nested-shadowed-to-transparent-containertiming-child-img.html b/testing/web-platform/tests/container-timing/tentative/nested-shadowed-to-transparent-containertiming-child-img.html @@ -1,59 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, parent with shadowed mode changed to transparent mode, with a child img inside of the inner</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 src="/element-timing/resources/element-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, 2, 'for the image, one entry expected for each containertiming'); - const entries = entryList.getEntries(); - - const entry_div1 = entries.find(e => e.identifier == 'div1_ct'); - checkContainerEntry(entry_div1, 'div1_ct', 'img_id', beforeRender) - checkRect(entry_div1, [0, 100, 0, 100]) - checkContainerSize(entry_div1, 10000); - - const entry_div2 = entries.find(e => e.identifier == 'div2_ct'); - checkContainerEntry(entry_div2, 'div2_ct', 'img_id', beforeRender) - checkRect(entry_div2, [0, 100, 0, 100]) - checkContainerSize(entry_div2, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'shadowed'); - document.body.appendChild(div1); - - // Add another div, child of the first, that is also a container root - const div2 = document.createElement('div'); - div2.setAttribute('containertiming', 'div2_ct'); - div1.appendChild(div2); - - div1.setAttribute('containertiming-nesting', 'transparent'); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div2.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root with shadowed then transparent nesting policy gets child containertiming paints with element data.'); -</script> - -</body> diff --git a/testing/web-platform/tests/container-timing/tentative/nested-transparent-containertiming-child-img-with-intermediate-ignore.html b/testing/web-platform/tests/container-timing/tentative/nested-transparent-containertiming-child-img-with-intermediate-ignore.html @@ -1,54 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, parent with transparent mode, with a child img inside of the inner, and an intermediate ignore node</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 src="/element-timing/resources/element-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, 'only inner containertiming gets events, ignore breaks propagation to parent even if nesting is set to transparent'); - const entry = entryList.getEntries()[0]; - checkContainerEntry(entry, 'div3_ct', 'img_id', beforeRender) - checkRect(entry, [0, 100, 0, 100]) - checkContainerSize(entry, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'transparent'); - document.body.appendChild(div1); - - const div2 = document.createElement('div'); - div2.setAttribute('containertiming-ignore', ''); - div1.appendChild(div2); - - // Add another div, child of the first, that is also a container root - const div3 = document.createElement('div'); - div3.setAttribute('containertiming', 'div3_ct'); - div2.appendChild(div3); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div3.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root with transparent nesting policy and child containertiming including image, an intermediate ignore blocks paints to parent root.'); -</script> - -</body> diff --git a/testing/web-platform/tests/container-timing/tentative/nested-transparent-containertiming-child-img.html b/testing/web-platform/tests/container-timing/tentative/nested-transparent-containertiming-child-img.html @@ -1,57 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, parent with transparent mode, with a child img inside of the inner</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 src="/element-timing/resources/element-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, 2, 'for the image, one entry expected for each containertiming'); - const entries = entryList.getEntries(); - - const entry_div1 = entries.find(e => e.identifier == 'div1_ct'); - checkContainerEntry(entry_div1, 'div1_ct', 'img_id', beforeRender) - checkRect(entry_div1, [0, 100, 0, 100]) - checkContainerSize(entry_div1, 10000); - - const entry_div2 = entries.find(e => e.identifier == 'div2_ct'); - checkContainerEntry(entry_div2, 'div2_ct', 'img_id', beforeRender) - checkRect(entry_div2, [0, 100, 0, 100]) - checkContainerSize(entry_div2, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'transparent'); - document.body.appendChild(div1); - - // Add another div, child of the first, that is also a container root - const div2 = document.createElement('div'); - div2.setAttribute('containertiming', 'div2_ct'); - div1.appendChild(div2); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div2.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root with transparent nesting policy gets child containertiming paints with element data.'); -</script> - -</body> diff --git a/testing/web-platform/tests/container-timing/tentative/nested-transparent-to-shadowed-containertiming-child-img.html b/testing/web-platform/tests/container-timing/tentative/nested-transparent-to-shadowed-containertiming-child-img.html @@ -1,60 +0,0 @@ -<!DOCTYPE HTML> -<meta charset=utf-8> -<title>Container Timing: two nested containertiming nodes, parent with transparent mode, changed to shadowed mode, with a child img inside of the inner</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 src="/element-timing/resources/element-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, 2, 'for the image, one entry expected for each container timing'); - const entries = entryList.getEntries(); - - const entry_div1 = entries.find(e => e.identifier == 'div1_ct'); - checkContainerEntry(entry_div1, 'div1_ct', 'div2_id', beforeRender) - checkRect(entry_div1, [0, 100, 0, 100]) - checkContainerSize(entry_div1, 10000); - - const entry_div2 = entries.find(e => e.identifier == 'div2_ct'); - checkContainerEntry(entry_div2, 'div2_ct', 'img_id', beforeRender) - checkRect(entry_div2, [0, 100, 0, 100]) - checkContainerSize(entry_div2, 10000); - }) - ); - observer.observe({entryTypes: ['container']}); - - // Add a div that is the container timing root - const div1 = document.createElement('div'); - div1.setAttribute('containertiming', 'div1_ct'); - div1.setAttribute('containertiming-nesting', 'transparent'); - document.body.appendChild(div1); - - // Add another div, child of the first, that is also a container root - const div2 = document.createElement('div'); - div2.setAttribute('id', 'div2_id'); - div2.setAttribute('containertiming', 'div2_ct'); - div1.appendChild(div2); - - div1.setAttribute('containertiming-nesting', 'shadowed'); - - // Add image of width equal to 100 and height equal to 100. - img = document.createElement('img'); - img.src = '/container-timing/resources/square100.png'; - img.setAttribute('id', 'img_id'); - div2.appendChild(img); - - beforeRender = performance.now(); - }, 'A parent containertiming root with transparent then shadowed nesting policy gets child containertiming paints without element data.'); -</script> - -</body>