WICG · dependabot · Apr 2, 2026 · Apr 2, 2026 · Apr 2, 2026 · Apr 15, 2026
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ polyfill.js
 polyfill.js.map
 demo-overlays.js
 demo-overlays.js.map
+public
diff --git a/ORIGIN_TRIAL.md b/ORIGIN_TRIAL.md
@@ -10,9 +10,9 @@ This document describes the Chrome experimental feature enabling developers to m
 - **Issue Tracker**: [GitHub Issues](https://github.com/WICG/container-timing/issues)
 - **Blog Post**: [Container Timing: Measuring Web Components Performance](https://blogs.igalia.com/dape/2026/02/10/container-timing-measuring-web-components-performance/)
 
-## Implementation in Chrome v147+
+## Origin Trial available from m148 - m153
 
-Chrome v147 introduced support for the Container Timing API behind the experimental web platform features flag. The API allows developers to mark sections of the DOM with the `containertiming` attribute and receive performance entries when those sections are painted.
+The Chrome Origin Trial introduces support for the Container Timing API behind the experimental web platform features flag. The API allows developers to mark sections of the DOM with the `containertiming` attribute and receive performance entries when those sections are painted.
 
 ### Basic Usage
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Container Timing: Explainer
 
-_Note: This API plans to go to [Origin Trial](./ORIGIN_TRIAL.md) during Chrome v147-152, please try it out!_
+_Note: This API plans to go to [Origin Trial](./ORIGIN_TRIAL.md) during Chrome m148-153, please try it out!_
 
 ## Authors
 

diff --git a/examples/adding-content/index.shadowed.html b/examples/adding-content/index.shadowed.html
diff --git a/examples/adding-content/index.transparent.html b/examples/adding-content/index.transparent.html
diff --git a/examples/canvas-2d/index.html b/examples/canvas-2d/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Canvas 2D - Container Timing</title>
+  </head>
+  <body>
+    <div style="width: 400px" containertiming>
+      <canvas id="canvas" width="400" height="300" containertiming></canvas>
+    </div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/canvas-2d/index.js b/examples/canvas-2d/index.js
@@ -0,0 +1,35 @@
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+// Gradient background
+const gradient = ctx.createLinearGradient(0, 0, 400, 300);
+gradient.addColorStop(0, "#1a1a2e");
+gradient.addColorStop(1, "#16213e");
+ctx.fillStyle = gradient;
+ctx.fillRect(0, 0, 400, 300);
+
+// Colored circles
+const colors = ["#e94560", "#0f3460", "#533483", "#e94560", "#0f3460"];
+for (let i = 0; i < 5; i++) {
+  ctx.beginPath();
+  ctx.arc(50 + i * 75, 150, 40, 0, Math.PI * 2);
+  ctx.fillStyle = colors[i];
+  ctx.fill();
+}
+
+// Label
+ctx.fillStyle = "#ffffff";
+ctx.font = "bold 18px Arial";
+ctx.textAlign = "center";
+ctx.fillText("2D Canvas", 200, 270);
+
+const observer = new PerformanceObserver((list) => {
+  list.getEntries().forEach((entry) => {
+    console.log(entry);
+  });
+});
+
+observer.observe({ type: ["element"], buffered: true });
+observer.observe({ type: ["paint"], buffered: true });
+observer.observe({ type: ["largest-contentful-paint"], buffered: true });
+observer.observe({ type: ["container"], buffered: true });
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Container Timing Examples</title>
+  <style>
+    body {
+      font-family: sans-serif;
+      max-width: 800px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+      color: #222;
+    }
+    h1 { margin-bottom: 0.25rem; }
+    .subtitle {
+      color: #555;
+      margin-bottom: 2rem;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    th {
+      text-align: left;
+      border-bottom: 2px solid #ccc;
+      padding: 0.5rem 0.75rem;
+    }
+    td {
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid #eee;
+      vertical-align: top;
+    }
+    td a {
+      font-weight: bold;
+      text-decoration: none;
+      color: #0057b8;
+    }
+    td a:hover { text-decoration: underline; }
+    .desc { color: #444; font-size: 0.9rem; }
+    .todo { color: #999; font-size: 0.85rem; font-style: italic; }
+    .supported { color: #2a7a2a; font-size: 0.85rem; }
+    .unsupported { color: #999; font-size: 0.85rem; }
+    .footnote { margin-top: 1rem; font-size: 0.8rem; color: #555; }
+    .tip {
+      position: relative;
+      cursor: help;
+      color: #888;
+      text-decoration: underline dotted;
+    }
+    .tip::after {
+      content: attr(data-tip);
+      display: none;
+      position: absolute;
+      bottom: 125%;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #333;
+      color: #fff;
+      font-size: 0.75rem;
+      font-weight: normal;
+      white-space: nowrap;
+      padding: 0.3rem 0.6rem;
+      border-radius: 4px;
+      pointer-events: none;
+      z-index: 10;
+    }
+    .tip:hover::after { display: block; }
+  </style>
+</head>
+<body>
+  <h1>Container Timing Examples</h1>
+  <p class="subtitle">Demos for the <a href="https://wicg.github.io/container-timing/">Container Timing API</a>.</p>
+
+  <table>
+    <thead>
+      <tr>
+        <th>Example</th>
+        <th>Description</th>
+        <th>Chromium support</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><a href="adding-content/">Adding content</a></td>
+        <td class="desc">Dynamically adds elements inside a <code>containertiming</code> container and observes the resulting timing entries, including <code>intersectionRect</code> and <code>damagedRects</code>.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="canvas-2d/">Canvas 2D</a></td>
+        <td class="desc">Tracks container timing for a <code>&lt;canvas&gt;</code> element painted with the 2D API.</td>
+        <td class="unsupported">Not supported</td>
+      </tr>
+      <tr>
+        <td><a href="shadow-dom/">Shadow DOM</a></td>
+        <td class="desc">Shows container timing behaviour with a declarative shadow root (<code>shadowrootmode="open"</code>) containing observed elements.</td>
+        <td class="unsupported">Not supported</td>
+      </tr>
+      <tr>
+        <td><a href="skeleton-layout/">Skeleton layout</a></td>
+        <td class="desc">Replaces a shimmer skeleton with real content after a delay. Tests that the low-entropy filter correctly ignores solid-colour placeholder blocks.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="svg/">SVG</a></td>
+        <td class="desc">Measures container timing for an inline SVG with nested groups, gradients, and decorative paths.</td>
+        <td class="unsupported">Not supported</td>
+      </tr>
+      <tr>
+        <td><a href="svg-as-image/">SVG as image</a></td>
+        <td class="desc">Tracks timing when an SVG file is loaded via an <code>&lt;img src="…svg"&gt;</code> tag rather than inlined.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="svg-with-image/">SVG with image</a></td>
+        <td class="desc">Measures timing for an SVG that embeds a raster image deep within its group hierarchy.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="svg-with-images/">SVG with multiple images</a></td>
+        <td class="desc">Like the above, but with multiple raster images embedded inside the SVG via <code>&lt;image&gt;</code> elements.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="svg-with-text/">SVG with text</a></td>
+        <td class="desc">Measures timing for an SVG containing text elements at multiple nesting levels.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="table/table.html">Table</a></td>
+        <td class="desc">Container timing for a complex flexbox-based virtualized table layout with transform-positioned rows and columns.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="video/no-poster/">Video (no poster)</a></td>
+        <td class="desc">Tracks container timing for a <code>&lt;video&gt;</code> element without a poster image.</td>
+        <td class="unsupported">Not supported</td>
+      </tr>
+      <tr>
+        <td><a href="video/with-poster/">Video (with poster)</a></td>
+        <td class="desc">Like the above, but with a <code>poster</code> attribute to test timing when an initial poster frame is displayed.</td>
+        <td class="supported">Yes (with flag) <sup class="tip" data-tip="--enable-blink-features=ContainerTiming">?</sup></td>
+      </tr>
+      <tr>
+        <td><a href="webgl/">WebGL</a></td>
+        <td class="desc">Tracks container timing for a <code>&lt;canvas&gt;</code> element rendered with WebGL.</td>
+        <td class="unsupported">Not supported</td>
+      </tr>
+    </tbody>
+  </table>
+
+</body>
+</html>
diff --git a/examples/svg-as-image/image.svg b/examples/svg-as-image/image.svg
diff --git a/examples/svg-as-image/index.html b/examples/svg-as-image/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SVG as image src - Container Timing</title>
+  </head>
+  <body>
+    <div style="width: 200px" containertiming>
+      <img src="./image.svg" width="200" height="150" containertiming />
+    </div>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/svg-as-image/index.js b/examples/svg-as-image/index.js
@@ -0,0 +1,10 @@
+const observer = new PerformanceObserver((list) => {
+  list.getEntries().forEach((entry) => {
+    console.log(entry);
+  });
+});
+
+observer.observe({ type: ["element"], buffered: true });
+observer.observe({ type: ["paint"], buffered: true });
+observer.observe({ type: ["largest-contentful-paint"], buffered: true });
+observer.observe({ type: ["container"], buffered: true });