| <!DOCTYPE html> |
| <html id="top"> |
| <meta charset="utf-8"> |
| <title>View timeline delay</title> |
| <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> |
| <script src="/scroll-animations/view-timelines/testcommon.js"></script> |
| <style> |
| #container { |
| border: 10px solid lightgray; |
| overflow-x: scroll; |
| height: 200px; |
| width: 200px; |
| } |
| #content { |
| display: flex; |
| flex-flow: row nowrap; |
| justify-content: flex-start; |
| width: 1800px; |
| margin: 0; |
| } |
| .spacer { |
| width: 800px; |
| display: inline-block; |
| } |
| #target { |
| background-color: green; |
| height: 100px; |
| width: 100px; |
| display: inline-block; |
| font-size: 10px; |
| } |
| </style> |
| <body> |
| <div id="container"> |
| <div id="content"> |
| <div class="spacer"></div> |
| <div id="target"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| </body> |
| <script type="text/javascript"> |
| promise_test(async t => { |
| // Delays are associated with the animation and not with the timeline. |
| // Thus adjusting the delays has no effect on the timeline offsets. The |
| // offsets always correspond to the 'cover' range. |
| const verifyTimelineOffsets = anim => { |
| const timeline = anim.timeline; |
| assert_px_equals(timeline.startOffset, 600, 'startOffset'); |
| assert_px_equals(timeline.endOffset, 900, 'endOffset'); |
| }; |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } , |
| rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) }, |
| startOffset: 600, |
| endOffset: 900 |
| }).then(anim => { |
| verifyTimelineOffsets(anim); |
| }); |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } , |
| rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) }, |
| startOffset: 700, |
| endOffset: 800 |
| }).then(anim => { |
| verifyTimelineOffsets(anim); |
| }); |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'enter', offset: CSS.percent(0) }, |
| rangeEnd: { rangeName: 'enter', offset: CSS.percent(100) }, |
| startOffset: 600, |
| endOffset: 700 |
| }); |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'exit', offset: CSS.percent(0) }, |
| rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) }, |
| startOffset: 800, |
| endOffset: 900 |
| }); |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'contain', offset: CSS.percent(-50) }, |
| rangeEnd: { rangeName: 'enter', offset: CSS.percent(200) }, |
| startOffset: 650, |
| endOffset: 800 |
| }); |
| }, 'View timeline with range as <name> <percent> pair.' ); |
| |
| promise_test(async t => { |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'enter' }, |
| rangeEnd: { rangeName: 'exit' }, |
| startOffset: 600, |
| endOffset: 900 |
| }); |
| await runTimelineRangeTest(t, { |
| rangeStart: { offset: CSS.percent(0) }, |
| rangeEnd: { offset: CSS.percent(100) }, |
| startOffset: 600, |
| endOffset: 900 |
| }); |
| }, 'View timeline with range and inferred name or offset.' ); |
| |
| promise_test(async t => { |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'cover', offset: CSS.px(20) } , |
| rangeEnd: { rangeName: 'cover', offset: CSS.px(100) }, |
| startOffset: 620, |
| endOffset: 700 |
| }); |
| |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'contain', offset: CSS.px(20) } , |
| rangeEnd: { rangeName: 'contain', offset: CSS.px(100) }, |
| startOffset: 720, |
| endOffset: 800 |
| }); |
| |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'enter', offset: CSS.px(20) } , |
| rangeEnd: { rangeName: 'enter', offset: CSS.px(100) }, |
| startOffset: 620, |
| endOffset: 700 |
| }); |
| |
| await runTimelineRangeTest(t, { |
| rangeStart: { rangeName: 'exit', offset: CSS.px(20) } , |
| rangeEnd: { rangeName: 'exit', offset: CSS.px(80) }, |
| startOffset: 820, |
| endOffset: 880 |
| }); |
| |
| }, 'View timeline with range as <name> <px> pair.' ); |
| |
| promise_test(async t => { |
| await runTimelineRangeTest(t, { |
| rangeStart: { |
| rangeName: 'contain', |
| offset: new CSSMathSum(CSS.percent(0), CSS.px(20)) |
| }, |
| rangeEnd: { |
| rangeName: 'contain', |
| offset: new CSSMathSum(CSS.percent(100), CSS.px(-10)) |
| }, |
| startOffset: 720, |
| endOffset: 790 |
| }); |
| |
| }, 'View timeline with range as <name> <percent+px> pair.' ); |
| |
| promise_test(async t => { |
| await runTimelineRangeTest(t, { |
| rangeStart: "contain -50%", |
| rangeEnd: "enter 200%", |
| startOffset: 650, |
| endOffset: 800 |
| }); |
| |
| await runTimelineRangeTest(t, { |
| rangeStart: "contain 20px", |
| rangeEnd: "contain 100px", |
| startOffset: 720, |
| endOffset: 800 |
| }); |
| |
| await runTimelineRangeTest(t, { |
| rangeStart: "contain calc(0% + 20px)", |
| rangeEnd: "contain calc(100% - 10px)", |
| startOffset: 720, |
| endOffset: 790 |
| }); |
| |
| await runTimelineRangeTest(t, { |
| rangeStart: "exit 2em", |
| rangeEnd: "exit 8em", |
| startOffset: 820, |
| endOffset: 880 |
| }); |
| |
| |
| }, 'View timeline with range as strings.'); |
| |
| </script> |