animation-range-shorthand.html (7901B)
1 <!DOCTYPE html> 2 <title>animation-range shorthand</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/shorthand-testcommon.js"></script> 7 <script src="/css/support/parsing-testcommon.js"></script> 8 <script src="/css/support/computed-testcommon.js"></script> 9 <div id="target" style="font-size:10px"></div> 10 <script> 11 test_valid_value("animation-range", "normal"); 12 test_valid_value("animation-range", "normal normal", "normal"); 13 test_valid_value("animation-range", "cover"); 14 test_valid_value("animation-range", "contain"); 15 test_valid_value("animation-range", "entry"); 16 test_valid_value("animation-range", "entry-crossing"); 17 test_valid_value("animation-range", "exit"); 18 test_valid_value("animation-range", "exit-crossing"); 19 test_valid_value("animation-range", "entry, exit"); 20 21 test_valid_value("animation-range", "entry 0% entry 100%", "entry"); 22 test_valid_value("animation-range", "entry-crossing 0% entry-crossing 100%", 23 "entry-crossing"); 24 test_valid_value("animation-range", "exit 0% exit 100%", "exit"); 25 test_valid_value("animation-range", "exit-crossing 0% exit-crossing 100%", 26 "exit-crossing"); 27 test_valid_value("animation-range", "cover 0% cover 100%", "cover"); 28 test_valid_value("animation-range", "contain 0% contain 100%", "contain"); 29 test_valid_value("animation-range", 30 "entry calc(10% - 10%) entry calc(50% + 50%)", "entry calc(0%) entry calc(100%)"); 31 test_valid_value("animation-range", "cover 50%"); 32 test_valid_value("animation-range", "contain 50%"); 33 test_valid_value("animation-range", "entry 50%"); 34 test_valid_value("animation-range", "entry-crossing 50%"); 35 test_valid_value("animation-range", "exit 50%"); 36 test_valid_value("animation-range", "exit-crossing 50%"); 37 test_valid_value("animation-range", "entry 50px exit 100px"); 38 test_valid_value("animation-range", "exit calc(10% + 50px)"); 39 40 test_valid_value("animation-range", "entry 50% exit 50%"); 41 test_valid_value("animation-range", 42 "cover 50% entry 50%, contain 50% exit 50%"); 43 test_valid_value("animation-range", "50% exit 50%"); 44 test_valid_value("animation-range", "normal 100px"); 45 test_valid_value("animation-range", "100px"); 46 test_valid_value("animation-range", "100px normal", "100px"); 47 test_valid_value("animation-range", "10% normal", "10%"); 48 49 test_computed_value("animation-range", "normal"); 50 test_computed_value("animation-range", "normal normal", "normal"); 51 test_computed_value("animation-range", "cover"); 52 test_computed_value("animation-range", "contain"); 53 test_computed_value("animation-range", "entry"); 54 test_computed_value("animation-range", "entry-crossing"); 55 test_computed_value("animation-range", "exit"); 56 test_computed_value("animation-range", "exit-crossing"); 57 test_computed_value("animation-range", "entry, exit"); 58 59 test_computed_value("animation-range", "entry 0% entry 100%", "entry"); 60 test_computed_value("animation-range", "entry-crossing 0% entry-crossing 100%", 61 "entry-crossing"); 62 test_computed_value("animation-range", "exit 0% exit 100%", "exit"); 63 test_computed_value("animation-range", "exit-crossing 0% exit-crossing 100%", 64 "exit-crossing"); 65 test_computed_value("animation-range", "cover 0% cover 100%", "cover"); 66 test_computed_value("animation-range", "contain 0% contain 100%", "contain"); 67 test_computed_value("animation-range", 68 "entry calc(10% - 10%) entry calc(50% + 50%)", "entry"); 69 test_computed_value("animation-range", "cover 50%"); 70 test_computed_value("animation-range", "contain 50%"); 71 test_computed_value("animation-range", "entry 50%"); 72 test_computed_value("animation-range", "entry-crossing 50%"); 73 test_computed_value("animation-range", "exit 50%"); 74 test_computed_value("animation-range", "exit-crossing 50%"); 75 test_computed_value("animation-range", "entry 50px exit 100px"); 76 test_computed_value("animation-range", "exit calc(10% + 50px)"); 77 78 test_computed_value("animation-range", "entry 50% exit 50%"); 79 test_computed_value("animation-range", 80 "cover 50% entry 50%, contain 50% exit 50%"); 81 82 test_computed_value("animation-range", "entry 10em exit 20em", "entry 100px exit 200px"); 83 test_computed_value("animation-range", "10em exit 20em", "100px exit 200px"); 84 test_computed_value("animation-range", "normal 100px"); 85 test_computed_value("animation-range", "100px"); 86 test_computed_value("animation-range", "100px normal", "100px"); 87 test_computed_value("animation-range", "10% normal", "10%"); 88 test_computed_value("animation-range", "10% calc(70% + 10% * sign(100em - 1px))", "10% 80%"); 89 90 test_invalid_value("animation-range", "entry 50% 0s", "entry 50%"); 91 test_invalid_value("animation-range", "0s entry 50%"); 92 test_invalid_value("animation-range", "1s"); 93 test_invalid_value("animation-range", "-1s"); 94 test_invalid_value("animation-range", "1s 2s"); 95 test_invalid_value("animation-range", "1s, 2s"); 96 test_invalid_value("animation-range", "1s 2s, 3s"); 97 test_invalid_value("animation-range", "1s, 2s 3s"); 98 test_invalid_value("animation-range", "1s, 2s, 3s"); 99 test_invalid_value("animation-range", "1s 2s 3s"); 100 test_invalid_value("animation-range", "0s, 1s 2s 3s"); 101 test_invalid_value("animation-range", "1s / 2s"); 102 test_invalid_value("animation-range", "1s, 2px"); 103 test_invalid_value("animation-range", "#ff0000"); 104 test_invalid_value("animation-range", "red"); 105 test_invalid_value("animation-range", "thing"); 106 test_invalid_value("animation-range", "thing 0%"); 107 test_invalid_value("animation-range", "thing 42%"); 108 test_invalid_value("animation-range", "thing 100%"); 109 test_invalid_value("animation-range", "thing 100px"); 110 test_invalid_value("animation-range", "100% thing"); 111 test_invalid_value("animation-range", "normal foo normal 100%"); 112 test_invalid_value("animation-range", "normal normal 100%"); 113 114 test_shorthand_value('animation-range', 'normal', { 115 'animation-range-start': 'normal', 116 'animation-range-end': 'normal', 117 }); 118 119 test_shorthand_value('animation-range', 'normal normal', { 120 'animation-range-start': 'normal', 121 'animation-range-end': 'normal', 122 }); 123 124 test_shorthand_value('animation-range', 'normal entry 100%', { 125 'animation-range-start': 'normal', 126 'animation-range-end': 'entry', 127 }); 128 129 test_shorthand_value('animation-range', 'normal entry 10%', { 130 'animation-range-start': 'normal', 131 'animation-range-end': 'entry 10%', 132 }); 133 134 test_shorthand_value('animation-range', 'cover', { 135 'animation-range-start': 'cover', 136 'animation-range-end': 'cover', 137 }); 138 139 test_shorthand_value('animation-range', 'contain', { 140 'animation-range-start': 'contain', 141 'animation-range-end': 'contain', 142 }); 143 144 test_shorthand_value('animation-range', 'contain 100% contain 0%', { 145 'animation-range-start': 'contain 100%', 146 'animation-range-end': 'contain 0%', 147 }); 148 149 test_shorthand_value('animation-range', 'entry 10% exit 20%', { 150 'animation-range-start': 'entry 10%', 151 'animation-range-end': 'exit 20%', 152 }); 153 154 test_shorthand_value('animation-range', 'entry calc(10% + 10px) exit 20px', { 155 'animation-range-start': 'entry calc(10% + 10px)', 156 'animation-range-end': 'exit 20px', 157 }); 158 159 test_shorthand_value('animation-range', 'entry, exit', { 160 'animation-range-start': 'entry, exit', 161 'animation-range-end': 'entry, exit', 162 }); 163 164 test_shorthand_value('animation-range', 'entry 0%, exit', { 165 'animation-range-start': 'entry, exit', 166 'animation-range-end': 'entry, exit', 167 }); 168 169 test_shorthand_value('animation-range', 'exit calc(10% + 50px)', { 170 'animation-range-start': 'exit calc(10% + 50px)', 171 'animation-range-end': 'exit', 172 }); 173 test_shorthand_value('animation-range', '100px', { 174 'animation-range-start': '100px', 175 'animation-range-end': 'normal', 176 }); 177 test_shorthand_value('animation-range', '10%', { 178 'animation-range-start': '10%', 179 'animation-range-end': 'normal', 180 }); 181 </script>