missing-values-first-keyframe.html (1837B)
1 <!DOCTYPE html> 2 <html> 3 <title>Missing properties in first keyframe</title> 4 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 5 <link rel="help" href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect"> 6 <meta name="assert" 7 content="CSS animation correctly interpolates from neutral keyframe"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/web-animations/testcommon.js"></script> 11 <style type="text/css" media="screen"> 12 body { 13 margin: 0; 14 } 15 16 .box { 17 position: relative; 18 width: 100px; 19 height: 100px; 20 left: 0; 21 background-color: green; 22 } 23 24 #box1 { 25 left: 200px; 26 animation: move-left 2s paused linear; 27 } 28 29 #box2 { 30 transform: translateX(200px); 31 animation: move-transform 2s paused linear; 32 } 33 34 @keyframes move-left { 35 0% { 36 opacity: 1; 37 } 38 25% { 39 opacity: 1; 40 } 41 50% { 42 left: 0; 43 opacity: 1; 44 } 45 100% { 46 left: 0; 47 opacity: 0; 48 } 49 } 50 51 @keyframes move-transform { 52 0% { 53 opacity: 1; 54 } 55 25% { 56 opacity: 1; 57 } 58 50% { 59 transform: translateX(0); 60 opacity: 1; 61 } 62 100% { 63 transform: translateX(0); 64 opacity: 0; 65 } 66 } 67 </style> 68 <body> 69 <div class="box" id="box1"></div> 70 <div class="box" id="box2"></div> 71 </body> 72 <script> 73 promise_test(async t => { 74 document.getAnimations().forEach(anim => { 75 anim.currentTime = 500; 76 }); 77 assert_equals(getComputedStyle(box1).left, "100px"); 78 assert_matrix_equals( 79 getComputedStyle(box2).transform, 80 'matrix(1, 0, 0, 1, 100, 0)'); 81 }, 'Missing property values in the first keyframe are correctly ' + 82 'interpolated from a neutral keyframe value'); 83 </script> 84 </html>