<!DOCTYPE html>
<meta charset="utf-8">
<title>ScrollTimeline current time algorithm</title>
<link rel="help" href="https://wicg.github.io/scroll-animations/#current-time-algorithm">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<script src="./resources/scrolltimeline-utils.js"></script>

<body></body>

<script>
'use strict';

test(function() {
  const scroller = setupScrollTimelineTest();
  // Set the timeRange such that currentTime maps directly to the value
  // scrolled. The contents and scroller are square, so it suffices to compute
  // one edge and use it for all the timelines.
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  const blockScrollTimeline = new ScrollTimeline(
      {scrollSource: scroller, timeRange: scrollerSize, orientation: 'block'});
  const inlineScrollTimeline = new ScrollTimeline(
      {scrollSource: scroller, timeRange: scrollerSize, orientation: 'inline'});
  const horizontalScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'horizontal'
  });
  const verticalScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'vertical'
  });

  // Unscrolled, all timelines should read a currentTime of 0.
  assert_equals(
      blockScrollTimeline.currentTime, 0, 'Unscrolled block timeline');
  assert_equals(
      inlineScrollTimeline.currentTime, 0, 'Unscrolled inline timeline');
  assert_equals(
      horizontalScrollTimeline.currentTime, 0,
      'Unscrolled horizontal timeline');
  assert_equals(
      verticalScrollTimeline.currentTime, 0, 'Unscrolled vertical timeline');

  // Do some scrolling and make sure that the ScrollTimelines update.
  scroller.scrollTop = 50;
  scroller.scrollLeft = 75;

  // As noted above timeRange is mapped such that currentTime should be the
  // scroll offset.
  assert_equals(blockScrollTimeline.currentTime, 50, 'Scrolled block timeline');
  assert_equals(
      inlineScrollTimeline.currentTime, 75, 'Scrolled inline timeline');
  assert_equals(
      horizontalScrollTimeline.currentTime, 75, 'Scrolled horizontal timeline');
  assert_equals(
      verticalScrollTimeline.currentTime, 50, 'Scrolled vertical timeline');
}, 'currentTime calculates the correct time based on scrolled amount');

test(function() {
  // It is difficult to calculate the scroll offset which results in an exact
  // currentTime. Scrolling is calculated in integers which allows for the
  // possibility of rounding, and scrollbar widths differ between platforms
  // which means it is not possible to ensure a divisible scroller size. Instead
  // the scroller content is made large enough that rounding differences result
  // in negligible deltas in the output value.
  const contentOverrides = new Map([['width', '1000px'], ['height', '1000px']]);
  const scroller = setupScrollTimelineTest(new Map(), contentOverrides);
  const scrollTimeline = new ScrollTimeline(
      {scrollSource: scroller, timeRange: 100, orientation: 'block'});

  // Mapping timeRange to 100 means the output is 'percentage scrolled', so
  // calculate where the 50% scroll mark would be.
  const halfwayY = (scroller.scrollHeight - scroller.clientHeight) / 2;
  scroller.scrollTop = halfwayY;

  assert_approx_equals(scrollTimeline.currentTime, 50, 0.5);
}, 'currentTime adjusts correctly for the timeRange');

test(function() {
  const scroller = setupScrollTimelineTest();
  // Set the timeRange such that currentTime maps directly to the value
  // scrolled. The contents and scroller are square, so it suffices to compute
  // one edge and use it for all the timelines.
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  const lengthScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    startScrollOffset: '20px'
  });
  const percentageScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    startScrollOffset: '20%'
  });
  const calcScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    startScrollOffset: 'calc(20% - 5px)'
  });

  // Unscrolled all timelines should read a current time of unresolved, as the
  // current offset (0) will be less than the startScrollOffset.
  assert_equals(
      lengthScrollTimeline.currentTime, null,
      'Unscrolled length-based timeline');
  assert_equals(
      percentageScrollTimeline.currentTime, null,
      'Unscrolled percentage-based timeline');
  assert_equals(
      calcScrollTimeline.currentTime, null, 'Unscrolled calc-based timeline');

  // Check the length-based ScrollTimeline.
  scroller.scrollTop = 19;
  assert_equals(
      lengthScrollTimeline.currentTime, null,
      'Length-based timeline before the startScrollOffset point');
  scroller.scrollTop = 20;
  assert_equals(
      lengthScrollTimeline.currentTime, 0,
      'Length-based timeline at the startScrollOffset point');
  scroller.scrollTop = 50;
  assert_equals(
      lengthScrollTimeline.currentTime,
      calculateCurrentTime(50, 20, scrollerSize, scrollerSize),
      'Length-based timeline after the startScrollOffsetPoint');

  // Check the percentage-based ScrollTimeline.
  scroller.scrollTop = 0.19 * scrollerSize;
  assert_equals(
      percentageScrollTimeline.currentTime, null,
      'Percentage-based scroller before the startScrollOffset point');
  scroller.scrollTop = 0.20 * scrollerSize;
  assert_equals(
      percentageScrollTimeline.currentTime, 0,
      'Percentage-based scroller at the startScrollOffset point');
  scroller.scrollTop = 0.50 * scrollerSize;
  assert_equals(
      percentageScrollTimeline.currentTime,
      calculateCurrentTime(
          scroller.scrollTop, 0.2 * scrollerSize, scrollerSize, scrollerSize),
      'Percentage-based scroller after the startScrollOffset point');

  // Check the calc-based ScrollTimeline.
  scroller.scrollTop = 0.2 * scrollerSize - 10;
  assert_equals(
      calcScrollTimeline.currentTime, null,
      'Calc-based scroller before the startScrollOffset point');
  scroller.scrollTop = 0.2 * scrollerSize - 5;
  assert_equals(
      calcScrollTimeline.currentTime, 0,
      'Calc-based scroller at the startScrollOffset point');
  scroller.scrollTop = 0.2 * scrollerSize;
  assert_equals(
      calcScrollTimeline.currentTime,
      calculateCurrentTime(
          scroller.scrollTop, 0.2 * scrollerSize - 5, scrollerSize,
          scrollerSize),
      'Calc-based scroller after the startScrollOffset point');
}, 'currentTime handles startScrollOffset correctly');

test(function() {
  const scroller = setupScrollTimelineTest();
  // Set the timeRange such that currentTime maps directly to the value
  // scrolled. The contents and scroller are square, so it suffices to compute
  // one edge and use it for all the timelines.
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  const lengthScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    endScrollOffset: (scrollerSize - 20) + 'px'
  });
  const percentageScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    endScrollOffset: '80%'
  });
  const calcScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    endScrollOffset: 'calc(80% + 5px)'
  });

  // Check the length-based ScrollTimeline.
  scroller.scrollTop = scrollerSize;
  assert_equals(
      lengthScrollTimeline.currentTime, null,
      'Length-based timeline after the endScrollOffset point');
  scroller.scrollTop = scrollerSize - 20;
  assert_equals(
      lengthScrollTimeline.currentTime, null,
      'Length-based timeline at the endScrollOffset point');
  scroller.scrollTop = scrollerSize - 50;
  assert_equals(
      lengthScrollTimeline.currentTime,
      calculateCurrentTime(
          scrollerSize - 50, 0, scrollerSize - 20, scrollerSize),
      'Length-based timeline before the endScrollOffset point');

  // Check the percentage-based ScrollTimeline.
  scroller.scrollTop = 0.81 * scrollerSize;
  assert_equals(
      percentageScrollTimeline.currentTime, null,
      'Percentage-based timeline after the endScrollOffset point');
  scroller.scrollTop = 0.80 * scrollerSize;
  assert_equals(
      percentageScrollTimeline.currentTime, null,
      'Percentage-based timeline at the endScrollOffset point');
  scroller.scrollTop = 0.50 * scrollerSize;
  assert_equals(
      percentageScrollTimeline.currentTime,
      calculateCurrentTime(
          scroller.scrollTop, 0, 0.8 * scrollerSize, scrollerSize),
      'Percentage-based timeline before the endScrollOffset point');

  // Check the calc-based ScrollTimeline.
  scroller.scrollTop = 0.8 * scrollerSize + 6;
  assert_equals(
      calcScrollTimeline.currentTime, null,
      'Calc-based timeline after the endScrollOffset point');
  scroller.scrollTop = 0.8 * scrollerSize + 5;
  assert_equals(
      calcScrollTimeline.currentTime, null,
      'Calc-based timeline at the endScrollOffset point');
  scroller.scrollTop = 0.5 * scrollerSize;
  assert_equals(
      calcScrollTimeline.currentTime,
      calculateCurrentTime(
          scroller.scrollTop, 0, 0.8 * scrollerSize + 5, scrollerSize),
      'Calc-based timeline before the endScrollOffset point');
}, 'currentTime handles endScrollOffset correctly');

test(function() {
  const scroller = setupScrollTimelineTest();
  // Set the timeRange such that currentTime maps directly to the value
  // scrolled. The contents and scroller are square, so it suffices to compute
  // one edge and use it for all the timelines.
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  // When the endScrollOffset is equal to the maximum scroll offset (and there
  // are no fill modes), the endScrollOffset is treated as inclusive.
  const inclusiveAutoScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    endScrollOffset: 'auto'
  });
  const inclusiveLengthScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    endScrollOffset: scrollerSize + 'px'
  });
  const inclusivePercentageScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    endScrollOffset: '100%'
  });
  const inclusiveCalcScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    endScrollOffset: 'calc(80% + ' + (0.2 * scrollerSize) + 'px)'
  });

  scroller.scrollTop = scrollerSize;
  let expectedCurrentTime = calculateCurrentTime(
      scroller.scrollTop, 0, scrollerSize, scrollerSize);

  assert_equals(
    inclusiveAutoScrollTimeline.currentTime, expectedCurrentTime,
    'Inclusive auto timeline at the endScrollOffset point');
  assert_equals(
    inclusiveLengthScrollTimeline.currentTime, expectedCurrentTime,
    'Inclusive length-based timeline at the endScrollOffset point');
  assert_equals(
    inclusivePercentageScrollTimeline.currentTime, expectedCurrentTime,
    'Inclusive percentage-based timeline at the endScrollOffset point');
  assert_equals(
    inclusiveCalcScrollTimeline.currentTime, expectedCurrentTime,
    'Inclusive calc-based timeline at the endScrollOffset point');
}, 'currentTime handles endScrollOffset correctly (inclusive cases)');

test(function() {
  const scroller = setupScrollTimelineTest();
  // Set the timeRange such that currentTime maps directly to the value
  // scrolled. The contents and scroller are square, so it suffices to compute
  // one edge and use it for all the timelines.
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  const scrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    startScrollOffset: '20px',
    endScrollOffset: (scrollerSize - 50) + 'px'
  });

  scroller.scrollTop = 150;
  assert_equals(
      scrollTimeline.currentTime,
      calculateCurrentTime(150, 20, scrollerSize - 50, scrollerSize));
}, 'currentTime handles startScrollOffset and endScrollOffset together correctly');

test(function() {
  const scroller = setupScrollTimelineTest();
  // Set the timeRange such that currentTime maps directly to the value
  // scrolled. The contents and scroller are square, so it suffices to compute
  // one edge and use it for all the timelines.
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  const scrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    startScrollOffset: '20px',
    endScrollOffset: '20px',
  });

  scroller.scrollTop = 150;
  assert_equals(scrollTimeline.currentTime, null);
}, 'currentTime handles startScrollOffset == endScrollOffset correctly');

test(function() {
  const scroller = setupScrollTimelineTest();
  // Set the timeRange such that currentTime maps directly to the value
  // scrolled. The contents and scroller are square, so it suffices to compute
  // one edge and use it for all the timelines.
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;

  const scrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: scrollerSize,
    orientation: 'block',
    startScrollOffset: '50px',
    endScrollOffset: '10px',
  });

  scroller.scrollTop = 150;
  assert_equals(scrollTimeline.currentTime, null);
}, 'currentTime handles startScrollOffset > endScrollOffset correctly');

test(function() {
  const scroller = setupScrollTimelineTest();
  const scrollerSize = scroller.scrollHeight - scroller.clientHeight;
  const timeRange = 100;
  const startScrollOffset = 20;
  const endScrollOffset = scrollerSize - 20;

  const forwardsFillingScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: timeRange,
    orientation: 'block',
    startScrollOffset: startScrollOffset + 'px',
    endScrollOffset: endScrollOffset + 'px',
    fill: 'forwards'
  });
  const backwardsFillingScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: timeRange,
    orientation: 'block',
    startScrollOffset: startScrollOffset + 'px',
    endScrollOffset: endScrollOffset + 'px',
    fill: 'backwards'
  });
  const bothFillingScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: timeRange,
    orientation: 'block',
    startScrollOffset: startScrollOffset + 'px',
    endScrollOffset: endScrollOffset + 'px',
    fill: 'both'
  });
  // 'auto' should be equivalent to 'both'.
  const autoFillingScrollTimeline = new ScrollTimeline({
    scrollSource: scroller,
    timeRange: timeRange,
    orientation: 'block',
    startScrollOffset: startScrollOffset + 'px',
    endScrollOffset: endScrollOffset + 'px',
    fill: 'auto'
  });

  // Before the startScrollOffset the current time should be 0 for backwards or
  // both, and unresolved otherwise.
  scroller.scrollTop = startScrollOffset - 10;
  assert_equals(
      forwardsFillingScrollTimeline.currentTime, null,
      'Before startScrollOffset forwards-filling timeline');
  assert_equals(
      backwardsFillingScrollTimeline.currentTime, 0,
      'Before startScrollOffset backwards-filling timeline');
  assert_equals(
      bothFillingScrollTimeline.currentTime, 0,
      'Before startScrollOffset both-filling timeline');
  assert_equals(
      autoFillingScrollTimeline.currentTime, 0,
      'Before startScrollOffset auto-filling timeline');

  // At the endScrollOffset the current time should be time-range for
  // forwards or both, and unresolved otherwise.
  scroller.scrollTop = endScrollOffset;
  assert_equals(
      forwardsFillingScrollTimeline.currentTime, timeRange,
      'After endScrollOffset forwards-filling timeline');
  assert_equals(
      backwardsFillingScrollTimeline.currentTime, null,
      'After endScrollOffset backwards-filling timeline');
  assert_equals(
      bothFillingScrollTimeline.currentTime, timeRange,
      'After endScrollOffset both-filling timeline');
  assert_equals(
      autoFillingScrollTimeline.currentTime, timeRange,
      'After endScrollOffset auto-filling timeline');

  // After the endScrollOffset the current time should be time-range for
  // forwards or both, and unresolved otherwise.
  scroller.scrollTop = endScrollOffset + 10;
  assert_equals(
      forwardsFillingScrollTimeline.currentTime, timeRange,
      'After endScrollOffset forwards-filling timeline');
  assert_equals(
      backwardsFillingScrollTimeline.currentTime, null,
      'After endScrollOffset backwards-filling timeline');
  assert_equals(
      bothFillingScrollTimeline.currentTime, timeRange,
      'After endScrollOffset both-filling timeline');
  assert_equals(
      autoFillingScrollTimeline.currentTime, timeRange,
      'After endScrollOffset auto-filling timeline');
}, 'currentTime handles fill modes correctly');
</script>