ContainerTiming: block upwards propagation for container roots with ignore attribute

jdapena · chromium-wpt-export-bot · commit 340ed568a16e · 2025-11-18T11:10:33.000-08:00
If an element has containertiming (so it is set as a container timing root) and containertiming-ignore, it should report the paints in its tree, but not propagate to container timing root ancestors. This is practical as it allows to isolate parts of the tree, while still allowing to record its paints independently. I.e. for an overlay or a dialog. 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 Ticket for what should happen: bloomberg/container-timing#26 Bug: 382422286 Change-Id: I6f5aa521cf4fd9e13f7d638fd5b4f8183f6fb823 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7150901 Reviewed-by: Michal Mocny <mmocny@chromium.org> Commit-Queue: José Dapena Paz <jdapena@igalia.com> Cr-Commit-Position: refs/heads/main@{#1546663}
diff --git a/container-timing/tentative/nested-containertiming-with-ignore.html b/container-timing/tentative/nested-containertiming-with-ignore.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Container Timing: two nested containertiming nodes, with a child img inside of the inner, and a containertiming-ignore in the descendant 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 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');
+    document.body.appendChild(div1);
+
+    // Intermediate container timing root with containertiming-ignore blocking
+    // propagation to the parent containertiming root but still receiving paints
+    // from children
+    const div2 = document.createElement('div');
+    div2.setAttribute('containertiming', 'div2_ct');
+    div2.setAttribute('containertiming-ignore', '');
+    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 does not get paints from children containertiming roots with ignore.');
+</script>
+
+</body>
