keyframes-allowed-properties.html (1245B)
1 <!DOCTYPE html> 2 <title>Tests which properties are allowed in @keyframes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-animations/#typedef-keyframe-block"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style id=sheet> 8 @keyframes foo { 9 from { 10 /* Non-animation properties are allowed */ 11 margin-top: 10px; 12 /* animation-timing-function is specially allowed */ 13 animation-timing-function: ease; 14 /* All other animation properties are not allowed */ 15 animation-name: none; 16 animation-duration: 1s; 17 animation-iteration-count: 1; 18 animation-direction: normal; 19 animation-play-state: running; 20 animation-delay: 0s; 21 animation-fill-mode: none; 22 /* The animation shorthand is also not allowed */ 23 animation: bar 1s infinite; 24 } 25 } 26 </style> 27 <script> 28 test(() => { 29 const keyframe = sheet.sheet.cssRules[0].cssRules[0]; 30 const style = keyframe.style; 31 assert_equals(style.length, 2); 32 assert_equals(style.marginTop, '10px'); 33 assert_equals(style.animationTimingFunction, 'ease'); 34 }, '@keyframes allows all non-animation properties and animation-timing-function'); 35 </script>