| Summary: | Web Animation API does not update root CSS Variables | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Carlos Lopez <clshortfuse> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | graouts, karlcow, koivisto, webkit-bug-importer |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 16 | ||
| Hardware: | All | ||
| OS: | All | ||
From https://codepen.io/shortfuse/pen/JjBpeQX Background-Color = Root Foreground-Color = Child Feature Result 1. Root CSS Property 2. Child CSS Property 3 Root CSS Variable 4. Child CSS Variable 5. Commited Root CSS Variable 6. Commited Child CSS Variable 1 2 3 4 5 6 Safari P P X P P P Firefox P P X X X X Chrome P P P P P P P PASS X FAIL Probably part of Bug 235138 This is already fixed on ToT, specifically this progressed with 258514@main. Dupe of bug 210963. *** This bug has been marked as a duplicate of bug 210963 *** |
When using Web Animation API to update CSS Variables, root CSS variables are not updated. Child elements do reflect updated variables. commitStyles() works (but would violate inline-style csp). eg: box3 .animate([{ '--background-color': 'gray', '--color': 'blue', }], { duration: 0, fill: 'forwards', }); See codepen: https://codepen.io/shortfuse/pen/JjBpeQX For comparison, all tests pass on Chrome and no CSS Variable related tests pass on Firefox.