view-timeline-sticky-inline.html (2534B)
1 <!DOCTYPE html> 2 <html id="top"> 3 <head> 4 <meta charset="utf-8"> 5 <title>View timeline with sticky</title> 6 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> 11 <script src="/scroll-animations/view-timelines/testcommon.js"></script> 12 <style> 13 14 #container { 15 width: 500px; 16 height: 500px; 17 overflow: auto; 18 white-space: nowrap; 19 } 20 .space { 21 display: inline-block; 22 width: 500px; 23 height: 400px; 24 white-space: nowrap; 25 } 26 #target { 27 display: inline-block; 28 background: yellow; 29 position: sticky; 30 left: 0px; 31 right: 0px; 32 width: 50px; 33 height: 400px; 34 } 35 36 </style> 37 </head> 38 <body> 39 <div id="container"><!-- 40 --><div class="space"></div><!-- 41 --><div class="space"><!-- 42 --><div style="display:inline-block; width:200px"></div><!-- 43 --><div id="target"></div><!-- 44 --></div><!-- 45 --><div class="space"></div><!-- 46 --></div> 47 <script type="text/javascript"> 48 49 promise_test(async t => { 50 await runTimelineRangeTest(t, { 51 rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } , 52 rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) }, 53 startOffset: 0, 54 endOffset: 1000 55 }); 56 await runTimelineRangeTest(t, { 57 rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } , 58 rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) }, 59 startOffset: 50, 60 endOffset: 950 61 }); 62 await runTimelineRangeTest(t, { 63 rangeStart: { rangeName: 'entry', offset: CSS.percent(0) }, 64 rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) }, 65 startOffset: 0, 66 endOffset: 50 67 }); 68 await runTimelineRangeTest(t, { 69 rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) }, 70 rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) }, 71 startOffset: 0, 72 endOffset: 50 73 }); 74 await runTimelineRangeTest(t, { 75 rangeStart: { rangeName: 'exit', offset: CSS.percent(0) }, 76 rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) }, 77 startOffset: 950, 78 endOffset: 1000 79 }); 80 await runTimelineRangeTest(t, { 81 rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) }, 82 rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) }, 83 startOffset: 950, 84 endOffset: 1000 85 }); 86 }, 'View timeline with sticky target, block axis.' ); 87 88 </script> 89 </body> 90 </html>