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