211922 2020-05-14 14:31:21 -0700 SVGs containing inline animation CSS don't play within an <img> tag 2020-05-18 20:12:09 -0700 1 1 1 Unclassified WebKit SVG Safari 13 Unspecified Unspecified RESOLVED DUPLICATE 209370 https://bugs.webkit.org/show_bug.cgi?id=134896 InRadar P2 Normal --- 1 josh webkit-unassigned sabouhallawa webkit-bug-importer zimmermann oldest_to_newest 1652794 0 399410 josh 2020-05-14 14:31:21 -0700 Created attachment 399410 Test case for SVG animation with multiple keyframes ## Overview If an SVG is referenced in an <img> tag and contains inline styles with keyframes, the animation doesn't play. ### Steps to Reproduce - Create an SVG with inline keyframes. - Open the SVG in Safari. The animation plays. - Reference it within a webpage's <img> tag, and visit the page. ### Expected results The SVG animation should play. ### Actual results The SVG is stuck on the first frame. I've attached a simple test case. 1653250 1 webkit-bug-importer 2020-05-15 17:40:45 -0700 <rdar://problem/63295917> 1653879 2 sabouhallawa 2020-05-18 20:12:09 -0700 *** This bug has been marked as a duplicate of bug 209370 *** 399410 2020-05-14 14:31:21 -0700 2020-05-14 14:31:21 -0700 Test case for SVG animation with multiple keyframes svg-animation-test-case.zip application/zip 1390 josh UEsDBBQACAAIAFxzrlAAAAAAAAAAAAAAAAAKABAAY2lyY2xlLnN2Z1VYDAB9uL1eoLe9XvUBFACN kW1rgzAQx1/rpzhuFDZwzdlRqFZlXyVzUUNjLElmlLHvPp9g3eiLBXKXh/8vl7vLbF/D0Cptc2yc u6aMee/3/mXfmZodiIhNClwl6aCkvtwTxkmSsOUWwct31+QYEyE0QtaN2za9FP6tG3IkIJhO5olF GGTWjUoUIUDwehFjZXgrLLRdL+BzPgxot3oAZ7i2VWfadFkp7sQjRUBP50Xwtdgj7VYQbgH4IY50 HaLTZH5hp3thbqgZiA5/qSmHLdr/vgeQsS3fALJSmlIJKBW3UwNKBDPXCqEcNj+uvpJK5fhAy0BY HsiRa9lyJzudrtWKLQhuxXP34UDqSmrpxBmLjK1hijCbm1mE31BLBwiJhS/nCgEAAPUBAABQSwME CgAAAAAA13OuUAAAAAAAAAAAAAAAAAkAEABfX01BQ09TWC9VWAwAhri9Xoa4vV71ARQAUEsDBBQA CAAIAFxzrlAAAAAAAAAAAAAAAAAVABAAX19NQUNPU1gvLl9jaXJjbGUuc3ZnVVgMAH24vV6gt71e 9QEUAGNgFWNnYGJg8E1MVvAPVohQgAKQGAMnEBsB8Q0gBvIZuRiIAo4hIUEQFljHBSC2QlPCBBUX YGCQSs7P1UssKMhJ1ctJLC4pLU5NSUksSVUOCIaqfQDEWgwMKgh1uakliUA1iVbx2b4uniWpuaHF qUUhienFDAye2/bGgTTJ3d8iAKKTCnIyi0sMDBZwQF3ECDWVkQEVcAIAUEsHCIsnBh6YAAAACgEA AFBLAwQUAAgACABrc65QAAAAAAAAAAAAAAAACQAQAHRlc3QuaHRtbFVYDADHt71eure9XvUBFAAl jrEKAjEQBWvzFev2mtZik+bUVotYWMbckgvkTkgWwb/XJdWDYQYe7c+3KTzvF1hkrd6QDtS4ZYe8 oQKOszc7WlkipCW2zuLwEa6HEyqXIpV94C4wxc5kBzBkR0mv9/xVsawZeksOU2mp8rF/MoJVcRj/ QC/8AFBLBwgVEHYRdwAAAJIAAABQSwMEFAAIAAgAa3OuUAAAAAAAAAAAAAAAABQAEABfX01BQ09T WC8uX3Rlc3QuaHRtbFVYDADHt71eure9XvUBFABjYBVjZ2BiYPBNTFbwD1aIUIACkBgDJxAbAfEC IAbxLzEQBRxDQoKgTJCOFUCshaaEESGukpyfq5dYUJCTqpebWpKYkliSaBWf7eviWZKaG1qcWhSS mF7MwJBUkJNZXGJgsIADagAjkknIgBMAUEsHCJbeAqhtAAAA0gAAAFBLAQIVAxQACAAIAFxzrlCJ hS/nCgEAAPUBAAAKAAwAAAAAAAAAAECkgQAAAABjaXJjbGUuc3ZnVVgIAH24vV6gt71eUEsBAhUD CgAAAAAA13OuUAAAAAAAAAAAAAAAAAkADAAAAAAAAAAAQP1BUgEAAF9fTUFDT1NYL1VYCACGuL1e hri9XlBLAQIVAxQACAAIAFxzrlCLJwYemAAAAAoBAAAVAAwAAAAAAAAAAECkgYkBAABfX01BQ09T WC8uX2NpcmNsZS5zdmdVWAgAfbi9XqC3vV5QSwECFQMUAAgACABrc65QFRB2EXcAAACSAAAACQAM AAAAAAAAAABApIF0AgAAdGVzdC5odG1sVVgIAMe3vV66t71eUEsBAhUDFAAIAAgAa3OuUJbeAqht AAAA0gAAABQADAAAAAAAAAAAQKSBMgMAAF9fTUFDT1NYLy5fdGVzdC5odG1sVVgIAMe3vV66t71e UEsFBgAAAAAFAAUAZwEAAPEDAAAAAA==