scroll-timeline-shorthand.html (4379B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-shorthand"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/css/support/computed-testcommon.js"></script> 6 <script src="/css/support/parsing-testcommon.js"></script> 7 <script src="/css/support/shorthand-testcommon.js"></script> 8 <div id="target"></div> 9 <script> 10 test_valid_value('scroll-timeline', 'none block', 'none'); 11 test_valid_value('scroll-timeline', 'none inline'); 12 test_valid_value('scroll-timeline', '--abc x'); 13 test_valid_value('scroll-timeline', '--abc inline'); 14 test_valid_value('scroll-timeline', '--aBc inline'); 15 test_valid_value('scroll-timeline', '--inline inline'); 16 test_valid_value('scroll-timeline', '--abc'); 17 18 test_valid_value('scroll-timeline', '--inline block', '--inline'); 19 test_valid_value('scroll-timeline', '--block block', '--block'); 20 test_valid_value('scroll-timeline', '--y block', '--y'); 21 test_valid_value('scroll-timeline', '--x block', '--x'); 22 23 test_valid_value('scroll-timeline', '--a, --b, --c'); 24 test_valid_value('scroll-timeline', '--a inline, --b block, --c y', '--a inline, --b, --c y'); 25 test_valid_value('scroll-timeline', '--auto'); 26 27 test_invalid_value('scroll-timeline', ''); 28 test_invalid_value('scroll-timeline', '--abc --abc'); 29 test_invalid_value('scroll-timeline', 'block none'); 30 test_invalid_value('scroll-timeline', 'inline --abc'); 31 test_invalid_value('scroll-timeline', 'default'); 32 test_invalid_value('scroll-timeline', ','); 33 test_invalid_value('scroll-timeline', ',,block,,'); 34 35 test_computed_value('scroll-timeline', 'none block', 'none'); 36 test_computed_value('scroll-timeline', '--abc inline'); 37 test_computed_value('scroll-timeline', 'none y'); 38 test_computed_value('scroll-timeline', '--abc x'); 39 test_computed_value('scroll-timeline', '--y y'); 40 test_computed_value('scroll-timeline', '--abc'); 41 test_computed_value('scroll-timeline', '--inline block', '--inline'); 42 test_computed_value('scroll-timeline', '--block block', '--block'); 43 test_computed_value('scroll-timeline', '--y block', '--y'); 44 test_computed_value('scroll-timeline', '--x block', '--x'); 45 test_computed_value('scroll-timeline', '--a, --b, --c'); 46 test_computed_value('scroll-timeline', '--a inline, --b block, --c y', '--a inline, --b, --c y'); 47 48 test_shorthand_value('scroll-timeline', '--abc y', 49 { 50 'scroll-timeline-name': '--abc', 51 'scroll-timeline-axis': 'y', 52 }); 53 test_shorthand_value('scroll-timeline', '--inline x', 54 { 55 'scroll-timeline-name': '--inline', 56 'scroll-timeline-axis': 'x', 57 }); 58 test_shorthand_value('scroll-timeline', '--abc y, --def', 59 { 60 'scroll-timeline-name': '--abc, --def', 61 'scroll-timeline-axis': 'y, block', 62 }); 63 test_shorthand_value('scroll-timeline', '--abc, --def', 64 { 65 'scroll-timeline-name': '--abc, --def', 66 'scroll-timeline-axis': 'block, block', 67 }); 68 69 function test_shorthand_contraction(shorthand, longhands, expected) { 70 let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}:${e[2]}`).join(';'); 71 test((t) => { 72 t.add_cleanup(() => { 73 for (let shorthand of Object.keys(longhands)) 74 target.style.removeProperty(shorthand); 75 }); 76 for (let [shorthand, value] of Object.entries(longhands)) 77 target.style.setProperty(shorthand, value); 78 assert_equals(target.style.getPropertyValue(shorthand), expected, 'Declared value'); 79 assert_equals(getComputedStyle(target).getPropertyValue(shorthand), expected, 'Computed value'); 80 }, `Shorthand contraction of ${longhands_fmt}`); 81 } 82 83 test_shorthand_contraction('scroll-timeline', { 84 'scroll-timeline-name': '--abc', 85 'scroll-timeline-axis': 'inline', 86 }, '--abc inline'); 87 88 test_shorthand_contraction('scroll-timeline', { 89 'scroll-timeline-name': '--a, --b', 90 'scroll-timeline-axis': 'inline, block', 91 }, '--a inline, --b'); 92 93 test_shorthand_contraction('scroll-timeline', { 94 'scroll-timeline-name': 'none, none', 95 'scroll-timeline-axis': 'block, block', 96 }, 'none, none'); 97 98 // Longhands with different lengths: 99 100 test_shorthand_contraction('scroll-timeline', { 101 'scroll-timeline-name': '--a, --b, --c', 102 'scroll-timeline-axis': 'inline, inline', 103 }, '--a inline, --b inline, --c inline'); 104 105 test_shorthand_contraction('scroll-timeline', { 106 'scroll-timeline-name': '--a, --b', 107 'scroll-timeline-axis': 'inline, inline, inline', 108 }, '--a inline, --b inline'); 109 </script>