Bug 251022
| 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 | ||
Carlos Lopez
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Karl Dubost
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
Radar WebKit Bug Importer
<rdar://problem/104584506>
Antoine Quint
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 ***