view-timeline-range-large-subject.html (3279B)
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: 2100px; 23 margin: 0; 24 } 25 .spacer { 26 width: 800px; 27 display: inline-block; 28 } 29 #target { 30 background-color: green; 31 height: 100px; 32 /* target size > viewport size, which changes interpretation of the 33 contain range */ 34 width: 400px; 35 display: inline-block; 36 } 37 </style> 38 <body> 39 <div id="container"> 40 <div id="content"> 41 <div class="spacer"></div> 42 <div id="target"></div> 43 <div class="spacer"></div> 44 </div> 45 </div> 46 </body> 47 <script type="text/javascript"> 48 promise_test(async t => { 49 await runTimelineRangeTest(t, { 50 rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } , 51 rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) }, 52 startOffset: 600, 53 endOffset: 1200 54 }); 55 await runTimelineRangeTest(t, { 56 rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } , 57 rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) }, 58 startOffset: 800, 59 endOffset: 1000 60 }); 61 await runTimelineRangeTest(t, { 62 rangeStart: { rangeName: 'entry', offset: CSS.percent(0) }, 63 rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) }, 64 startOffset: 600, 65 endOffset: 800 66 }); 67 await runTimelineRangeTest(t, { 68 rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) }, 69 rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) }, 70 startOffset: 600, 71 endOffset: 1000 72 }); 73 await runTimelineRangeTest(t, { 74 rangeStart: { rangeName: 'exit', offset: CSS.percent(0) }, 75 rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) }, 76 startOffset: 1000, 77 endOffset: 1200 78 }); 79 await runTimelineRangeTest(t, { 80 rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) }, 81 rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) }, 82 startOffset: 800, 83 endOffset: 1200 84 }); 85 await runTimelineRangeTest(t, { 86 rangeStart: { rangeName: 'contain', offset: CSS.percent(-50) }, 87 rangeEnd: { rangeName: 'entry', offset: CSS.percent(200) }, 88 startOffset: 700, 89 endOffset: 1000 90 }); 91 await runTimelineRangeTest(t, { 92 rangeStart: { rangeName: 'entry' }, 93 rangeEnd: { rangeName: 'exit' }, 94 startOffset: 600, 95 endOffset: 1200 96 }); 97 await runTimelineRangeTest(t, { 98 rangeStart: { offset: CSS.percent(0) }, 99 rangeEnd: { offset: CSS.percent(100) }, 100 startOffset: 600, 101 endOffset: 1200 102 }); 103 104 }, 'View timeline with range set via delays.' ); 105 </script>