<!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:  2100px;
    margin: 0;
  }
  .spacer {
    width:  800px;
    display:  inline-block;
  }
  #target {
    background-color:  green;
    height:  100px;
    /* target size > viewport size, which changes interpretation of the
       contain range */
    width:  400px;
    display:  inline-block;
  }
</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 => {
    await runTimelineRangeTest(t, {
      rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
      rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
      startOffset: 600,
      endOffset: 1200
    });
    await runTimelineRangeTest(t, {
      rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
      rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
      startOffset: 800,
      endOffset: 1000
    });
    await runTimelineRangeTest(t, {
      rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
      rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
      startOffset: 600,
      endOffset: 800
    });
    await runTimelineRangeTest(t, {
      rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
      rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
      startOffset: 600,
      endOffset: 1000
    });
    await runTimelineRangeTest(t, {
      rangeStart:  { rangeName: 'exit', offset: CSS.percent(0) },
      rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
      startOffset: 1000,
      endOffset: 1200
    });
    await runTimelineRangeTest(t, {
      rangeStart:  { rangeName: 'exit-crossing', offset: CSS.percent(0) },
      rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
      startOffset: 800,
      endOffset: 1200
    });
    await runTimelineRangeTest(t, {
      rangeStart: { rangeName: 'contain', offset: CSS.percent(-50) },
      rangeEnd: { rangeName: 'entry', offset: CSS.percent(200) },
      startOffset: 700,
      endOffset: 1000
    });
    await runTimelineRangeTest(t, {
      rangeStart: { rangeName: 'entry' },
      rangeEnd: { rangeName: 'exit' },
      startOffset: 600,
      endOffset: 1200
    });
    await runTimelineRangeTest(t, {
      rangeStart: { offset: CSS.percent(0) },
      rangeEnd: { offset: CSS.percent(100) },
      startOffset: 600,
      endOffset: 1200
    });

  }, 'View timeline with range set via delays.' );
</script>
