transform-and-opacity-on-inline-001.html (981B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Test (Animations): Element.animate() animating both transform and opacity on an inline</title> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <link rel="author" title="Google" href="http://www.google.com/"> 6 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1316688"> 7 <link rel="match" href="transform-and-opacity-on-inline-001-ref.html"> 8 <meta name="assert" content="This should not crash, and should render as opacity 0.5."> 9 10 <script> 11 // The transform animation should be ignored; the opacity animation should work. 12 window.onload = function() { 13 document.getElementById("target").animate( 14 [ 15 { 16 "transform": "translateX(0px)", 17 "opacity": "0.8", 18 }, 19 { 20 "transform": "translateX(300px)", 21 "opacity": "0.0", 22 } 23 ], 24 { duration:1000000, delay: -500000, easing: "steps(3, jump-both)" }); 25 } 26 </script> 27 <body><span id="target">x</span></body>