missing-values-last-keyframe.html (1824B)
1 <!DOCTYPE html> 2 <html> 3 <title>Missing properties in last 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 10s linear; 27 } 28 29 #box2 { 30 transform: translateX(200px); 31 animation: move-transform 10s linear; 32 } 33 34 @keyframes move-left { 35 0% { 36 left: 0; 37 opacity: 0; 38 } 39 50% { 40 left: 0; 41 opacity: 1; 42 } 43 75% { 44 opacity: 1; 45 } 46 100% { 47 opacity: 1; 48 } 49 } 50 51 @keyframes move-transform { 52 0% { 53 transform: translateX(0); 54 opacity: 0; 55 } 56 50% { 57 transform: translateX(0); 58 opacity: 1; 59 } 60 75% { 61 opacity: 1; 62 } 63 100% { 64 opacity: 1; 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 = 7500; 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 last keyframe are correctly ' + 82 'interpolated from a neutral keyframe value'); 83 </script> 84 </html>