CSS Transitions vs. SMIL Animations race condition. Testcase: <svg xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: teal; -webkit-transition-property: fill; -webkit-transition-duration: 0.5s; } </style> <rect width="100" height="100"> <animate attributeName="fill" from="black" to="purple" fill="freeze" dur="3s" begin="3s"/> </rect> </svg> You'll see no animation at all in trunk, it stays teal, and switches to purple at 3s, using a transition from teal to purple! If you inspect what's going on you'll find that each SMIL induced CSS property change, triggers a CSS transitions from the lastAnimatedValue to the nextAnimatedValue. It gets racy eg. for -webkit-transition-duration: 0.025s, which is the same time as the SMIL/CSS animation timers. I'll flag this as major bug. Long description: Each time SMIL changes a CSS property in the separated SMIL properties ruleset, we'll trigger a SyntheticStyleChange. This in turn causes the RenderStyle of the target RenderObject to be updated, via setAnimatableStyle. The RenderStyle contains the new 'fill' value from the SMIL animation. So far so good. Now setStyle(AnimationController::updateAnimations(renderer, style)) is called, which detects that 'fill' changed, and a CSS transition is associated with that, so it starts/queues a CSS transitions from lastAnimatedVAlue to nextAnimatedValue, and so on. Mozilla used to suffer from the same problem, they've solved it by never executing any transition for a CSS property change due to SMIL animations. We need to work out how we can see this information in AnimationController / RenderObject / ... Suggestions?
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.