animation-timeline-parsing.html (4738B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#animation-timeline"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/css/support/parsing-testcommon.js"></script> 6 </head> 7 <div id="target"></div> 8 <script> 9 test_valid_value('animation-timeline', 'initial'); 10 test_valid_value('animation-timeline', 'inherit'); 11 test_valid_value('animation-timeline', 'unset'); 12 test_valid_value('animation-timeline', 'revert'); 13 test_valid_value('animation-timeline', 'auto'); 14 test_valid_value('animation-timeline', 'none'); 15 test_valid_value('animation-timeline', 'auto, auto'); 16 test_valid_value('animation-timeline', 'none, none'); 17 test_valid_value('animation-timeline', 'auto, none'); 18 test_valid_value('animation-timeline', 'none, auto'); 19 test_valid_value('animation-timeline', '--test'); 20 test_valid_value('animation-timeline', '--test1, --test2'); 21 test_valid_value('animation-timeline', '--test1, --test2, none, --test3, auto'); 22 23 test_invalid_value('animation-timeline', 'test1'); 24 test_invalid_value('animation-timeline', '10px'); 25 test_invalid_value('animation-timeline', 'auto auto'); 26 test_invalid_value('animation-timeline', 'none none'); 27 test_invalid_value('animation-timeline', 'foo bar'); 28 test_invalid_value('animation-timeline', '"foo" "bar"'); 29 test_invalid_value('animation-timeline', 'rgb(1, 2, 3)'); 30 test_invalid_value('animation-timeline', '#fefefe'); 31 test_invalid_value('animation-timeline', '"test"'); 32 33 // https://drafts.csswg.org/scroll-animations-1/#scroll-notation 34 // 35 // animation-timeline: scroll(<axis>? <scroller>?); 36 // <axis> = block | inline | x | y 37 // <scroller> = root | nearest | self 38 test_valid_value('animation-timeline', 'scroll()'); 39 test_valid_value('animation-timeline', ' scroll() ', 'scroll()'); 40 test_valid_value('animation-timeline', 'scroll(block)', 'scroll()'); 41 test_valid_value('animation-timeline', 'scroll(inline)'); 42 test_valid_value('animation-timeline', 'scroll(x)'); 43 test_valid_value('animation-timeline', 'scroll(y)'); 44 test_valid_value('animation-timeline', 'scroll(root)'); 45 test_valid_value('animation-timeline', 'scroll(nearest)', 'scroll()'); 46 test_valid_value('animation-timeline', 'scroll(self)'); 47 test_valid_value('animation-timeline', 'scroll(inline nearest)', 'scroll(inline)'); 48 test_valid_value('animation-timeline', 'scroll(nearest inline)', 'scroll(inline)'); 49 test_valid_value('animation-timeline', 'scroll(block self)', 'scroll(self)'); 50 test_valid_value('animation-timeline', 'scroll(self block)', 'scroll(self)'); 51 test_valid_value('animation-timeline', 'scroll(y root)', 'scroll(root y)'); 52 53 test_invalid_value('animation-timeline', 'scroll(abc root)'); 54 test_invalid_value('animation-timeline', 'scroll(abc)'); 55 test_invalid_value('animation-timeline', 'scroll(y abc)'); 56 test_invalid_value('animation-timeline', 'scroll("string")'); 57 58 // https://drafts.csswg.org/scroll-animations-1/#view-notation 59 test_valid_value('animation-timeline', 'view()'); 60 test_valid_value('animation-timeline', ' view() ', 'view()'); 61 test_valid_value('animation-timeline', 'view(block)', 'view()'); 62 test_valid_value('animation-timeline', 'view(inline)'); 63 test_valid_value('animation-timeline', 'view(x)'); 64 test_valid_value('animation-timeline', 'view(y)'); 65 test_valid_value('animation-timeline', 'view(y 1px 2px)'); 66 test_valid_value('animation-timeline', 'view(y 1px)'); 67 test_valid_value('animation-timeline', 'view(y auto)', 'view(y)'); 68 test_valid_value('animation-timeline', 'view(y auto auto)', 'view(y)'); 69 test_valid_value('animation-timeline', 'view(y auto 1px)'); 70 test_valid_value('animation-timeline', 'view(1px 2px y)', 'view(y 1px 2px)'); 71 test_valid_value('animation-timeline', 'view(1px y)', 'view(y 1px)'); 72 test_valid_value('animation-timeline', 'view(auto x)', 'view(x)'); 73 test_valid_value('animation-timeline', 'view(1px 2px)'); 74 test_valid_value('animation-timeline', 'view(1px)'); 75 test_valid_value('animation-timeline', 'view(1px 1px)', 'view(1px)'); 76 test_valid_value('animation-timeline', 'view(1px auto)'); 77 test_valid_value('animation-timeline', 'view(auto calc(1% + 1px))'); 78 test_valid_value('animation-timeline', 'view(2em calc(1% + 1em))'); 79 test_valid_value('animation-timeline', 'view(auto)', 'view()'); 80 test_valid_value('animation-timeline', 'view(auto auto)', 'view()'); 81 82 test_invalid_value('animation-timeline', 'view(y 1px 2px 3px)'); 83 test_invalid_value('animation-timeline', 'view(1px y 3px)'); 84 test_invalid_value('animation-timeline', 'view(1px 2px 3px)'); 85 test_invalid_value('animation-timeline', 'view(abc block)'); 86 test_invalid_value('animation-timeline', 'view(abc)'); 87 test_invalid_value('animation-timeline', 'view(y abc)'); 88 test_invalid_value('animation-timeline', 'view("string")'); 89 </script>