view-timeline-shorthand.html (6764B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-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('view-timeline', '--abcd'); 11 test_valid_value('view-timeline', 'none block', 'none'); 12 test_valid_value('view-timeline', 'none inline'); 13 14 // view-timeline-name: inline/block/x/y. 15 test_valid_value('view-timeline', '--inline block', '--inline'); 16 test_valid_value('view-timeline', '--block block', '--block'); 17 test_valid_value('view-timeline', '--y block', '--y'); 18 test_valid_value('view-timeline', '--x block', '--x'); 19 20 test_valid_value('view-timeline', '--a, --b, --c'); 21 test_valid_value('view-timeline', '--a inline, --b block, --c y', '--a inline, --b, --c y'); 22 test_valid_value('view-timeline', '--auto'); 23 test_valid_value('view-timeline', '--abcd block auto', '--abcd'); 24 test_valid_value('view-timeline', '--abcd block auto auto', '--abcd'); 25 test_valid_value('view-timeline', '--abcd block 1px 2px', '--abcd 1px 2px'); 26 test_valid_value('view-timeline', '--abcd inline 1px 2px', '--abcd inline 1px 2px'); 27 test_valid_value('view-timeline', '--abcd 1px 2px inline', '--abcd inline 1px 2px'); 28 test_valid_value('view-timeline', '--abcd 1px 2px block', '--abcd 1px 2px'); 29 test_valid_value('view-timeline', '--abcd auto auto block', '--abcd'); 30 test_valid_value('view-timeline', '--abcd auto block', '--abcd'); 31 test_valid_value('view-timeline', '--abcd block 1px 1px', '--abcd 1px'); 32 33 test_invalid_value('view-timeline', '--abc --abc'); 34 test_invalid_value('view-timeline', 'block none'); 35 test_invalid_value('view-timeline', 'none none'); 36 test_invalid_value('view-timeline', 'default'); 37 test_invalid_value('view-timeline', ','); 38 test_invalid_value('view-timeline', ',,--block,,'); 39 test_invalid_value('view-timeline', 'auto'); 40 test_invalid_value('view-timeline', 'auto auto'); 41 test_invalid_value('view-timeline', '--abc 500kg'); 42 test_invalid_value('view-timeline', '--abc #ff0000'); 43 test_invalid_value('view-timeline', '--abc red red'); 44 45 test_computed_value('view-timeline', '--abcd'); 46 test_computed_value('view-timeline', 'none block', 'none'); 47 test_computed_value('view-timeline', 'none inline'); 48 test_computed_value('view-timeline', '--inline block', '--inline'); 49 test_computed_value('view-timeline', '--block block', '--block'); 50 test_computed_value('view-timeline', '--y block', '--y'); 51 test_computed_value('view-timeline', '--x block', '--x'); 52 test_computed_value('view-timeline', '--a, --b, --c'); 53 test_computed_value('view-timeline', '--a inline, --b block, --c y', '--a inline, --b, --c y'); 54 test_computed_value('view-timeline', '--abcd block auto', '--abcd'); 55 test_computed_value('view-timeline', '--abcd block auto auto', '--abcd'); 56 test_computed_value('view-timeline', '--abcd block 1px 2px', '--abcd 1px 2px'); 57 test_computed_value('view-timeline', '--abcd inline 1px 2px', '--abcd inline 1px 2px'); 58 test_computed_value('view-timeline', '--abcd 1px 2px inline', '--abcd inline 1px 2px'); 59 test_computed_value('view-timeline', '--abcd 1px 2px block', '--abcd 1px 2px'); 60 test_computed_value('view-timeline', '--abcd auto auto block', '--abcd'); 61 test_computed_value('view-timeline', '--abcd auto block', '--abcd'); 62 test_computed_value('view-timeline', '--abcd block 1px 1px', '--abcd 1px'); 63 64 test_shorthand_value('view-timeline', '--abc y', 65 { 66 'view-timeline-name': '--abc', 67 'view-timeline-axis': 'y', 68 'view-timeline-inset': 'auto', 69 }); 70 test_shorthand_value('view-timeline', '--abc y, --def', 71 { 72 'view-timeline-name': '--abc, --def', 73 'view-timeline-axis': 'y, block', 74 'view-timeline-inset': 'auto, auto', 75 }); 76 test_shorthand_value('view-timeline', '--abc, --def', 77 { 78 'view-timeline-name': '--abc, --def', 79 'view-timeline-axis': 'block, block', 80 'view-timeline-inset': 'auto, auto', 81 }); 82 test_shorthand_value('view-timeline', '--inline x', 83 { 84 'view-timeline-name': '--inline', 85 'view-timeline-axis': 'x', 86 'view-timeline-inset': 'auto', 87 }); 88 test_shorthand_value('view-timeline', '--abc 1px 2px', 89 { 90 'view-timeline-name': '--abc', 91 'view-timeline-axis': 'block', 92 'view-timeline-inset': '1px 2px', 93 }); 94 test_shorthand_value('view-timeline', '--abc 1px', 95 { 96 'view-timeline-name': '--abc', 97 'view-timeline-axis': 'block', 98 'view-timeline-inset': '1px', 99 }); 100 test_shorthand_value('view-timeline', '--abc 1px inline', 101 { 102 'view-timeline-name': '--abc', 103 'view-timeline-axis': 'inline', 104 'view-timeline-inset': '1px', 105 }); 106 107 function test_shorthand_contraction(shorthand, longhands, expected) { 108 let longhands_fmt = Object.entries(longhands).map((e) => `${e[0]}:${e[1]}:${e[2]}`).join(';'); 109 test((t) => { 110 t.add_cleanup(() => { 111 for (let shorthand of Object.keys(longhands)) 112 target.style.removeProperty(shorthand); 113 }); 114 for (let [shorthand, value] of Object.entries(longhands)) 115 target.style.setProperty(shorthand, value); 116 assert_equals(target.style.getPropertyValue(shorthand), expected, 'Declared value'); 117 assert_equals(getComputedStyle(target).getPropertyValue(shorthand), expected, 'Computed value'); 118 }, `Shorthand contraction of ${longhands_fmt}`); 119 } 120 121 test_shorthand_contraction('view-timeline', { 122 'view-timeline-name': '--abc', 123 'view-timeline-axis': 'inline', 124 'view-timeline-inset': 'auto', 125 }, '--abc inline'); 126 127 test_shorthand_contraction('view-timeline', { 128 'view-timeline-name': '--a, --b', 129 'view-timeline-axis': 'inline, block', 130 'view-timeline-inset': 'auto, auto', 131 }, '--a inline, --b'); 132 133 test_shorthand_contraction('view-timeline', { 134 'view-timeline-name': '--a, --b', 135 'view-timeline-axis': 'inline, block', 136 'view-timeline-inset': '1px 2px, 3px 3px', 137 }, '--a inline 1px 2px, --b 3px'); 138 139 test_shorthand_contraction('view-timeline', { 140 'view-timeline-name': 'none, none', 141 'view-timeline-axis': 'block, block', 142 'view-timeline-inset': 'auto auto, auto', 143 }, 'none, none'); 144 145 // Longhands with different lengths: 146 147 test_shorthand_contraction('view-timeline', { 148 'view-timeline-name': '--a, --b, --c', 149 'view-timeline-axis': 'inline, inline', 150 'view-timeline-inset': 'auto, auto', 151 }, '--a inline, --b inline, --c inline'); 152 153 test_shorthand_contraction('view-timeline', { 154 'view-timeline-name': '--a, --b', 155 'view-timeline-axis': 'inline, inline, inline', 156 'view-timeline-inset': 'auto, auto, auto', 157 }, '--a inline, --b inline'); 158 159 test_shorthand_contraction('view-timeline', { 160 'view-timeline-name': '--a, --b', 161 'view-timeline-axis': 'inline, inline', 162 'view-timeline-inset': 'auto, auto, auto', 163 }, '--a inline, --b inline'); 164 </script>