Bug 251022 – Web Animation API does not update root CSS Variables

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[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.

[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 ***