Skip to content

Add new examples, fix overlays and add a landing page#46

Merged
jasonwilliams merged 4 commits into
WICG:mainfrom
jdapena:jdapena/examples
Apr 2, 2026
Merged

Add new examples, fix overlays and add a landing page#46
jasonwilliams merged 4 commits into
WICG:mainfrom
jdapena:jdapena/examples

Conversation

@jdapena
Copy link
Copy Markdown
Contributor

@jdapena jdapena commented Mar 30, 2026

No description provided.

jdapena added 4 commits March 30, 2026 14:22
Cover more examples of possible candidates for Container Timing.
This is mostly for allowing to try what works and what does not work.

Not supported in Chromium:
- canvas-2d
- webgl
- video/no-poster (video element without preview).

Supported in Chromium:
- video/with-poster (video element with preview).
- svg-as-image: an SVG image added as the src of an image.
- svg-with-images: inline SVG with images inside.
- svg-with-text: inline SvG with text inside.
- svg-with-image: inline SVG with image deep inside paths.
New build step added that compiles demo-overlays and copies both
examples/ and the overlay into a public/ folder, so the relative paths
to demo-overlays resolve correctly when serving locally.

The start script now always rebuilds before serving.
Lists all examples with a short description and whether they work in
Chromium with --enable-blink-features=ContainerTiming, shown via a
hover tooltip for the flag name.
containertiming-nesting is not part of the proposal anymore.
@jasonwilliams jasonwilliams merged commit 5dd28f0 into WICG:main Apr 2, 2026
1 check passed
github-actions Bot added a commit that referenced this pull request Apr 2, 2026
SHA: 5dd28f0
Reason: push, by jasonwilliams

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Comment thread package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "http-server ./examples -c-1 -a 127.0.0.1 -p 8080 -o"
"build": "rm -rf public && mkdir -p public/demo-overlays && cd demo-overlays && npm run build && cd .. && cp -r examples public/examples && cp demo-overlays/demo-overlays.js demo-overlays/demo-overlays.js.map demo-overlays/demo-overlays.css public/demo-overlays/",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 comments:

  1. How can npm run build call npm run build?
  2. demo-overlays/demo-overlays.js is not checked in and there's no instructions on how to build from the checked in tsc files. Should we add tsc -p demo-overlays/tsconfig.json to this?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ignore me. I missed the cd demo-overlays before that.

OK thanks to this PR the demos are working. Took me a few bits of hacking to get them working but much cleaner now!

Copy link
Copy Markdown
Collaborator

@jasonwilliams jasonwilliams Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my goal is to come back to this build section and clean it up, so i merged for now with the intention of simplifiyng this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants