view-timeline-range.html (6101B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <meta charset="utf-8"> 4 <title>View timeline delay</title> 5 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 10 <script src="/scroll-animations/view-timelines/testcommon.js"></script> 11 <style> 12 #container { 13 border: 10px solid lightgray; 14 overflow-x: scroll; 15 height: 200px; 16 width: 200px; 17 } 18 #content { 19 display: flex; 20 flex-flow: row nowrap; 21 justify-content: flex-start; 22 width: 1800px; 23 margin: 0; 24 } 25 .spacer { 26 width: 800px; 27 display: inline-block; 28 } 29 #target { 30 background-color: green; 31 height: 100px; 32 width: 100px; 33 display: inline-block; 34 font-size: 10px; 35 } 36 </style> 37 <body> 38 <div id="container"> 39 <div id="content"> 40 <div class="spacer"></div> 41 <div id="target"></div> 42 <div class="spacer"></div> 43 </div> 44 </div> 45 </body> 46 <script type="text/javascript"> 47 promise_test(async t => { 48 // Delays are associated with the animation and not with the timeline. 49 // Thus adjusting the delays has no effect on the timeline offsets. The 50 // offsets always correspond to the 'cover' range. 51 const verifyTimelineOffsets = anim => { 52 const timeline = anim.timeline; 53 assert_px_equals(timeline.startOffset, 600, 'startOffset'); 54 assert_px_equals(timeline.endOffset, 900, 'endOffset'); 55 }; 56 await runTimelineRangeTest(t, { 57 rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } , 58 rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) }, 59 startOffset: 600, 60 endOffset: 900 61 }).then(anim => { 62 verifyTimelineOffsets(anim); 63 }); 64 await runTimelineRangeTest(t, { 65 rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } , 66 rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) }, 67 startOffset: 700, 68 endOffset: 800 69 }).then(anim => { 70 verifyTimelineOffsets(anim); 71 }); 72 await runTimelineRangeTest(t, { 73 rangeStart: { rangeName: 'entry', offset: CSS.percent(0) }, 74 rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) }, 75 startOffset: 600, 76 endOffset: 700 77 }); 78 await runTimelineRangeTest(t, { 79 rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) }, 80 rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) }, 81 startOffset: 600, 82 endOffset: 700 83 }); 84 await runTimelineRangeTest(t, { 85 rangeStart: { rangeName: 'exit', offset: CSS.percent(0) }, 86 rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) }, 87 startOffset: 800, 88 endOffset: 900 89 }); 90 await runTimelineRangeTest(t, { 91 rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) }, 92 rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) }, 93 startOffset: 800, 94 endOffset: 900 95 }); 96 await runTimelineRangeTest(t, { 97 rangeStart: { rangeName: 'contain', offset: CSS.percent(-50) }, 98 rangeEnd: { rangeName: 'entry', offset: CSS.percent(200) }, 99 startOffset: 650, 100 endOffset: 800 101 }); 102 }, 'View timeline with range as <name> <percent> pair.' ); 103 104 promise_test(async t => { 105 await runTimelineRangeTest(t, { 106 rangeStart: { rangeName: 'entry' }, 107 rangeEnd: { rangeName: 'exit' }, 108 startOffset: 600, 109 endOffset: 900 110 }); 111 await runTimelineRangeTest(t, { 112 rangeStart: { offset: CSS.percent(0) }, 113 rangeEnd: { offset: CSS.percent(100) }, 114 startOffset: 600, 115 endOffset: 900 116 }); 117 }, 'View timeline with range and inferred name or offset.' ); 118 119 promise_test(async t => { 120 await runTimelineRangeTest(t, { 121 rangeStart: { rangeName: 'cover', offset: CSS.px(20) } , 122 rangeEnd: { rangeName: 'cover', offset: CSS.px(100) }, 123 startOffset: 620, 124 endOffset: 700 125 }); 126 127 await runTimelineRangeTest(t, { 128 rangeStart: { rangeName: 'contain', offset: CSS.px(20) } , 129 rangeEnd: { rangeName: 'contain', offset: CSS.px(100) }, 130 startOffset: 720, 131 endOffset: 800 132 }); 133 134 await runTimelineRangeTest(t, { 135 rangeStart: { rangeName: 'entry', offset: CSS.px(20) } , 136 rangeEnd: { rangeName: 'entry', offset: CSS.px(100) }, 137 startOffset: 620, 138 endOffset: 700 139 }); 140 141 await runTimelineRangeTest(t, { 142 rangeStart: { rangeName: 'exit', offset: CSS.px(20) } , 143 rangeEnd: { rangeName: 'exit', offset: CSS.px(80) }, 144 startOffset: 820, 145 endOffset: 880 146 }); 147 148 }, 'View timeline with range as <name> <px> pair.' ); 149 150 promise_test(async t => { 151 await runTimelineRangeTest(t, { 152 rangeStart: { 153 rangeName: 'contain', 154 offset: new CSSMathSum(CSS.percent(0), CSS.px(20)) 155 }, 156 rangeEnd: { 157 rangeName: 'contain', 158 offset: new CSSMathSum(CSS.percent(100), CSS.px(-10)) 159 }, 160 startOffset: 720, 161 endOffset: 790 162 }); 163 164 }, 'View timeline with range as <name> <percent+px> pair.' ); 165 166 promise_test(async t => { 167 await runTimelineRangeTest(t, { 168 rangeStart: "contain -50%", 169 rangeEnd: "entry 200%", 170 startOffset: 650, 171 endOffset: 800 172 }); 173 174 await runTimelineRangeTest(t, { 175 rangeStart: "contain 20px", 176 rangeEnd: "contain 100px", 177 startOffset: 720, 178 endOffset: 800 179 }); 180 181 await runTimelineRangeTest(t, { 182 rangeStart: "contain calc(sign(100em - 1px) * 20px)", 183 rangeEnd: "contain calc(100%)", 184 startOffset: 720, 185 endOffset: 800 186 }); 187 188 await runTimelineRangeTest(t, { 189 rangeStart: "contain calc(0% + 20px)", 190 rangeEnd: "contain calc(100% - 10px)", 191 startOffset: 720, 192 endOffset: 790 193 }); 194 195 await runTimelineRangeTest(t, { 196 rangeStart: "exit 2em", 197 rangeEnd: "exit 8em", 198 startOffset: 820, 199 endOffset: 880 200 }); 201 202 203 }, 'View timeline with range as strings.'); 204 205 </script>