keyframe-selectors.html (1754B)
1 <!DOCTYPE html> 2 <title>CSS Animations Test: Parse tests for keyframe selectors</title> 3 <link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes"> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#typedef-timeline-range-name"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style id="test_sheet"> 8 </style> 9 <script> 10 function isValidKeyFrameSelector(selector_text) { 11 let sheet = test_sheet.sheet; 12 sheet.insertRule(`@keyframes --foo { ${selector_text} {} }`); 13 let keyframe_rule = sheet.cssRules[0].cssRules[0]; 14 sheet.deleteRule(0); 15 return keyframe_rule != undefined; 16 } 17 18 function test_valid_keyframe_selector(selector_text) { 19 test(() => { 20 assert_true(isValidKeyFrameSelector(selector_text)); 21 }, `'${selector_text}' should be a valid keyframe selector`); 22 } 23 24 function test_invalid_keyframe_selector(selector_text) { 25 test(() => { 26 assert_false(isValidKeyFrameSelector(selector_text)); 27 }, `'${selector_text}' should not be a valid keyframe selector`); 28 } 29 30 test_valid_keyframe_selector("0%"); 31 test_valid_keyframe_selector("10%"); 32 test_valid_keyframe_selector("100%"); 33 test_valid_keyframe_selector("from"); 34 test_valid_keyframe_selector("to"); 35 test_valid_keyframe_selector("entry 10%"); 36 test_valid_keyframe_selector("exit 60%"); 37 test_valid_keyframe_selector("calc(10%)"); 38 test_valid_keyframe_selector("calc(10% * sibling-index())"); 39 test_valid_keyframe_selector("calc(10% * sign(1em - 1px))"); 40 test_valid_keyframe_selector("entry calc(10%)"); 41 test_valid_keyframe_selector("exit calc(60%)"); 42 43 test_invalid_keyframe_selector("-10%"); 44 test_invalid_keyframe_selector("120%"); 45 </script>