view-timeline-inset.html (6118B)
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: 16px; 35 } 36 #target.big-font { 37 font-size: 20px; 38 } 39 #container.scroll-padded { 40 scroll-padding-inline: 10px 20px; 41 } 42 </style> 43 </style> 44 <body> 45 <div id="container"> 46 <div id="content"> 47 <div class="spacer"></div> 48 <div id="target"></div> 49 <div class="spacer"></div> 50 </div> 51 </div> 52 </body> 53 <script type="text/javascript"> 54 55 function verifyTimelineOffsets(anim, start, end) { 56 const timeline = anim.timeline; 57 assert_px_equals(timeline.startOffset, start, 'startOffset'); 58 assert_px_equals(timeline.endOffset, end, 'endOffset'); 59 }; 60 61 promise_test(async t => { 62 // These tests are all based on the cover range, which has bounds 63 // [600, 900] if there are no insets. 64 // startOffset = target_pos - viewport_size + end_side_inset 65 // = 600 + end_side_inset 66 // endOffset = target_pos + target_size - start_side_inset 67 // = 900 - start_side_inset 68 await runTimelineInsetTest(t, { 69 inset: [ CSS.px(0), CSS.px(0) ], 70 startOffset: 600, 71 endOffset: 900 72 }).then(anim => verifyTimelineOffsets(anim, 600, 900)); 73 await runTimelineInsetTest(t, { 74 inset: [ CSS.px(10), CSS.px(20) ], 75 startOffset: 620, 76 endOffset: 890 77 }).then(anim => verifyTimelineOffsets(anim, 620, 890)); 78 await runTimelineInsetTest(t, { 79 inset: [ CSS.px(10) ], 80 startOffset: 610, 81 endOffset: 890 82 }).then(anim => verifyTimelineOffsets(anim, 610, 890)); 83 }, 'View timeline with px based inset.'); 84 85 promise_test(async t => { 86 // These tests are all based on the cover range, which has bounds 87 // [600, 900]. 88 // Percentages are relative to the viewport size, which is 200 for this 89 // test. 90 await runTimelineInsetTest(t, { 91 inset: [ CSS.percent(0), CSS.percent(0) ], 92 startOffset: 600, 93 endOffset: 900 94 }).then(anim => verifyTimelineOffsets(anim, 600, 900)); 95 await runTimelineInsetTest(t, { 96 inset: [ CSS.percent(10), CSS.percent(20) ], 97 startOffset: 640, 98 endOffset: 880 99 }).then(anim => verifyTimelineOffsets(anim, 640, 880)); 100 await runTimelineInsetTest(t, { 101 inset: [ CSS.percent(10) ], 102 startOffset: 620, 103 endOffset: 880 104 }).then(anim => verifyTimelineOffsets(anim, 620, 880)); 105 }, 'View timeline with percent based inset.'); 106 107 promise_test(async t => { 108 t.add_cleanup(() => { 109 container.classList.remove('scroll-padded'); 110 }); 111 const anim = await runTimelineInsetTest(t, { 112 inset: [ "auto", "auto" ], 113 startOffset: 600, 114 endOffset: 900 115 }); 116 verifyTimelineOffsets(anim, 600, 900); 117 container.classList.add('scroll-padded'); 118 await runTimelineBoundsTest(t, { 119 anim: anim, 120 startOffset: 620, 121 endOffset: 890, 122 }, 'Adjust for scroll-padding') 123 .then(anim => verifyTimelineOffsets(anim, 620, 890)); 124 }, 'view timeline with inset auto.'); 125 126 promise_test(async t => { 127 t.add_cleanup(() => { 128 target.classList.remove('big-font'); 129 }); 130 const anim = await runTimelineInsetTest(t, { 131 inset: [ CSS.em(1), CSS.em(2) ], 132 startOffset: 632, 133 endOffset: 884 134 }); 135 verifyTimelineOffsets(anim, 632, 884); 136 target.classList.add('big-font'); 137 await runTimelineBoundsTest(t, { 138 anim: anim, 139 startOffset: 640, 140 endOffset: 880, 141 }, 'Adjust for font size increase') 142 .then(anim => verifyTimelineOffsets(anim, 640, 880)); 143 }, 'view timeline with font relative inset.'); 144 145 promise_test(async t => { 146 const vw = window.innerWidth; 147 const vh = window.innerHeight; 148 const vmin = Math.min(vw, vh); 149 await runTimelineInsetTest(t, { 150 inset: [ CSS.vw(10), CSS.vw(20) ], 151 startOffset: 600 + 0.2 * vw, 152 endOffset: 900 - 0.1 * vw 153 }); 154 await runTimelineInsetTest(t, { 155 inset: [ CSS.vmin(10), CSS.vmin(20) ], 156 startOffset: 600 + 0.2 * vmin, 157 endOffset: 900 - 0.1 * vmin 158 }); 159 }, 'view timeline with viewport relative insets.'); 160 161 promise_test(async t => { 162 await runTimelineInsetTest(t, { 163 inset: "10px", 164 startOffset: 610, 165 endOffset: 890 166 }); 167 await runTimelineInsetTest(t, { 168 inset: "10px 20px", 169 startOffset: 620, 170 endOffset: 890 171 }); 172 await runTimelineInsetTest(t, { 173 inset: "10%", 174 startOffset: 620, 175 endOffset: 880 176 }); 177 await runTimelineInsetTest(t, { 178 inset: "10% 20%", 179 startOffset: 640, 180 endOffset: 880 181 }); 182 await runTimelineInsetTest(t, { 183 inset: "auto", 184 startOffset: 600, 185 endOffset: 900 186 }); 187 await runTimelineInsetTest(t, { 188 inset: "1em 2em", 189 startOffset: 632, 190 endOffset: 884 191 }); 192 assert_throws_js(TypeError, () => { 193 new ViewTimeline({ 194 subject: target, 195 inset: "go fish" 196 }); 197 }); 198 199 assert_throws_js(TypeError, () => { 200 new ViewTimeline({ 201 subject: target, 202 inset: "1 2" 203 }); 204 }); 205 206 }, 'view timeline inset as string'); 207 208 promise_test(async t => { 209 assert_throws_js(TypeError, () => { 210 new ViewTimeline({ 211 subject: target, 212 inset: [ CSS.rad(1) ] 213 }); 214 }); 215 216 assert_throws_js(TypeError, () => { 217 new ViewTimeline({ 218 subject: target, 219 inset: [ CSS.px(10), CSS.px(10), CSS.px(10) ] 220 }); 221 }); 222 223 224 }, 'view timeline with invalid inset'); 225 226 </script>