scroll-animations/element-based-offset-clamp.html - external/w3c/web-platform-tests - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Test clamping logic of element-based scroll offset for scroll timeline.</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/web-animations/testcommon.js"></script>
 <script src="testcommon.js"></script>

 <style>
 .scroller {
  overflow: scroll;
  height: 500px;
  width: 500px;
  will-change: transform;
 }

 /* Disable scrollbars to simplify the calculations in the test. */
 .scroller {
  scrollbar-width: 0;
 }
 /*
 Chrome does not support scrollbar-width so we use this non-standard property
 until it does.
 */
 .scroller::-webkit-scrollbar {
  display: none;
 }

 .contents {
  height: 1200px;
  width: 1200px;
  position: relative;
 }

 .vertical #target {
  background: blue;
  border-top: 0px solid pink;
  border-bottom: 0px solid pink;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: var(--start-position);
  height: calc(var(--end-position) - var(--start-position));
 }

 .horizontal #target {
  background: blue;
  border-left: 0px solid pink;
  border-right: 0px solid pink;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  left: var(--start-position);
  width: calc(var(--end-position) - var(--start-position));
 }
 </style>
 <div id="log"></div>
 <script>
  'use strict';

  function createScrollerWithTarget(test, config) {
  const orientationClass = config.orientation;
  const positions = `
  --start-position: ${config.startElementPosition};
  --end-position: ${config.endElementPosition};`

  var scroller = createDiv(test);
  scroller.innerHTML =
  `<div class='contents' style="${positions}">
  <div id='target'></div>
  </div>`;
  scroller.classList.add('scroller');
  scroller.classList.add(orientationClass);

  return scroller;
  }

  async function createScrollAnimationTest(description, config) {
  promise_test(async t => {
  const scroller = createScrollerWithTarget(t, config);
  t.add_cleanup(() => scroller.remove());

  const target = scroller.querySelector("#target");

  const timeline = createScrollTimeline(t, {
  scrollSource: scroller,
  orientation: config.orientation,
  timeRange: 1000,
  fill: 'both',
  startScrollOffset: {target: target, edge: 'end', ...config.start},
  endScrollOffset: {target: target, edge:'start', ...config.end }
  });

  // Wait for new animation frame which allows the timeline to compute new
  // current time.
  await waitForNextFrame();

  const animation = createScrollLinkedAnimation(t, timeline);
  const timeRange = animation.timeline.timeRange;

  // Verify initial start and current times in Idle state.
  assert_equals(animation.currentTime, null,
  "The current time is null in Idle state.");
  assert_equals(animation.startTime, null,
  "The start time is null in Idle state.");

  animation.play();
  assert_true(animation.pending, "Animation is in pending state.");
  // Verify initial start and current times in Pending state.
  assert_times_equal(animation.currentTime, 0,
  "The current time is zero in Pending state.");
  assert_equals(animation.startTime, 0,
  "The start time is zero in Pending state.");

  await animation.ready;
  // Verify initial start and current times in Playing state.
  assert_times_equal(animation.currentTime, 0,
  "The current time is zero in Playing state.");
  assert_times_equal(animation.startTime, 0,
  "The start time is zero in Playing state.");

  // Now do some scrolling and make sure that the Animation current time is
  // correct.
  if (config.orientation == 'vertical') {
  scroller.scrollTo({top: config.scrollTo});
  assert_equals(scroller.scrollTop, config.scrollTo);
  } else {
  scroller.scrollTo({left: config.scrollTo});
  assert_equals(scroller.scrollLeft, config.scrollTo);
  }

  await waitForNextFrame();

  assert_times_equal(animation.timeline.currentTime, config.expectedCurrentTime,
  "The timeline current time corresponds to the scroll position of the scroller.");
  assert_times_equal(animation.currentTime, config.expectedCurrentTime,
  "The animation current time corresponds to the scroll position of the scroller.");
  assert_times_equal(
  animation.effect.getComputedTiming().localTime,
  config.expectedCurrentTime,
  'Effect local time corresponds to the scroll position of the scroller.');
  }, description);
  }

  // We have no scrollbar and the scroller is symmetric on x & y axis so this
  // static value is axis and platform agnostic.
  const scroll_max = 700;

  // For this test we setup a single target, and scroll timeline in a way that
  // our animation runs from when target enters the scroll port until it fully
  // exits it. Then we create various edgecase scenarios to see the clamping
  // logic.
  //
  // Scroller has 500px heights with 1200px content which translates to
  // 0 < scroll < 700px
  //
  // +----------+ ^
  // | | |
  // | Scroller | |
  // | | | scrollRange
  // | | |
  // +----------+ | +--+
  // |TT| | |TT|
  // +--+ v +----------+
  // | |
  // | Scroller |
  // | |
  // | |
  // +----------+
  //
  // For each test the expected timeline start/end is in the comment to help
  // with the verification.
  const tests = {
  // offsets: [0, 600]
  "no clamping is expected": {
  startElementPosition: '500px',
  endElementPosition: '600px',
  scrollTo: 300,
  expectedCurrentTime: 500,
  },
  // offsets: [0, 600]
  "start is visible at zero offset and should get clamped": {
  startElementPosition: '400px',
  endElementPosition: '600px',
  scrollTo: 300,
  expectedCurrentTime: 500,
  },

  // offsets: [0, scroll_max]
  "end is not reachable and should be clamped": {
  startElementPosition: '500px',
  endElementPosition: '800px',
  scrollTo: scroll_max / 2,
  expectedCurrentTime: 500,
  },

  // offsets: [0, scroll_max]
  "both start and end are clamped": {
  startElementPosition: '400px',
  endElementPosition: '800px',
  scrollTo: scroll_max / 2,
  expectedCurrentTime: 500,
  },
  };

  for (let orientation of ['vertical', 'horizontal']) {
  for (let testName in tests) {
  const description = `Animation start and current times are correct given
  element-based offsets for orienation ${orientation} and ${testName}.`;
  const config = tests[testName];
  config.orientation = orientation;
  createScrollAnimationTest(description, config);
  }
  }
 </script>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>Test clamping logic of element-based scroll offset for scroll timeline.</title>
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="/web-animations/testcommon.js"></script>
	<script src="testcommon.js"></script>

	<style>
	.scroller {
	overflow: scroll;
	height: 500px;
	width: 500px;
	will-change: transform;
	}

	/* Disable scrollbars to simplify the calculations in the test. */
	.scroller {
	scrollbar-width: 0;
	}
	/*
	Chrome does not support scrollbar-width so we use this non-standard property
	until it does.
	*/
	.scroller::-webkit-scrollbar {
	display: none;
	}

	.contents {
	height: 1200px;
	width: 1200px;
	position: relative;
	}

	.vertical #target {
	background: blue;
	border-top: 0px solid pink;
	border-bottom: 0px solid pink;
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	top: var(--start-position);
	height: calc(var(--end-position) - var(--start-position));
	}

	.horizontal #target {
	background: blue;
	border-left: 0px solid pink;
	border-right: 0px solid pink;
	box-sizing: border-box;
	position: absolute;
	height: 100%;
	left: var(--start-position);
	width: calc(var(--end-position) - var(--start-position));
	}
	</style>
	<div id="log"></div>
	<script>
	'use strict';

	function createScrollerWithTarget(test, config) {
	const orientationClass = config.orientation;
	const positions = `
	--start-position: ${config.startElementPosition};
	--end-position: ${config.endElementPosition};`

	var scroller = createDiv(test);
	scroller.innerHTML =
	`<div class='contents' style="${positions}">
	<div id='target'></div>
	</div>`;
	scroller.classList.add('scroller');
	scroller.classList.add(orientationClass);

	return scroller;
	}

	async function createScrollAnimationTest(description, config) {
	promise_test(async t => {
	const scroller = createScrollerWithTarget(t, config);
	t.add_cleanup(() => scroller.remove());

	const target = scroller.querySelector("#target");

	const timeline = createScrollTimeline(t, {
	scrollSource: scroller,
	orientation: config.orientation,
	timeRange: 1000,
	fill: 'both',
	startScrollOffset: {target: target, edge: 'end', ...config.start},
	endScrollOffset: {target: target, edge:'start', ...config.end }
	});

	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();

	const animation = createScrollLinkedAnimation(t, timeline);
	const timeRange = animation.timeline.timeRange;

	// Verify initial start and current times in Idle state.
	assert_equals(animation.currentTime, null,
	"The current time is null in Idle state.");
	assert_equals(animation.startTime, null,
	"The start time is null in Idle state.");

	animation.play();
	assert_true(animation.pending, "Animation is in pending state.");
	// Verify initial start and current times in Pending state.
	assert_times_equal(animation.currentTime, 0,
	"The current time is zero in Pending state.");
	assert_equals(animation.startTime, 0,
	"The start time is zero in Pending state.");

	await animation.ready;
	// Verify initial start and current times in Playing state.
	assert_times_equal(animation.currentTime, 0,
	"The current time is zero in Playing state.");
	assert_times_equal(animation.startTime, 0,
	"The start time is zero in Playing state.");

	// Now do some scrolling and make sure that the Animation current time is
	// correct.
	if (config.orientation == 'vertical') {
	scroller.scrollTo({top: config.scrollTo});
	assert_equals(scroller.scrollTop, config.scrollTo);
	} else {
	scroller.scrollTo({left: config.scrollTo});
	assert_equals(scroller.scrollLeft, config.scrollTo);
	}

	await waitForNextFrame();

	assert_times_equal(animation.timeline.currentTime, config.expectedCurrentTime,
	"The timeline current time corresponds to the scroll position of the scroller.");
	assert_times_equal(animation.currentTime, config.expectedCurrentTime,
	"The animation current time corresponds to the scroll position of the scroller.");
	assert_times_equal(
	animation.effect.getComputedTiming().localTime,
	config.expectedCurrentTime,
	'Effect local time corresponds to the scroll position of the scroller.');
	}, description);
	}

	// We have no scrollbar and the scroller is symmetric on x & y axis so this
	// static value is axis and platform agnostic.
	const scroll_max = 700;

	// For this test we setup a single target, and scroll timeline in a way that
	// our animation runs from when target enters the scroll port until it fully
	// exits it. Then we create various edgecase scenarios to see the clamping
	// logic.
	//
	// Scroller has 500px heights with 1200px content which translates to
	// 0 < scroll < 700px
	//
	// +----------+ ^
	// \| \| \|
	// \| Scroller \| \|
	// \| \| \| scrollRange
	// \| \| \|
	// +----------+ \| +--+
	// \|TT\| \| \|TT\|
	// +--+ v +----------+
	// \| \|
	// \| Scroller \|
	// \| \|
	// \| \|
	// +----------+
	//
	// For each test the expected timeline start/end is in the comment to help
	// with the verification.
	const tests = {
	// offsets: [0, 600]
	"no clamping is expected": {
	startElementPosition: '500px',
	endElementPosition: '600px',
	scrollTo: 300,
	expectedCurrentTime: 500,
	},
	// offsets: [0, 600]
	"start is visible at zero offset and should get clamped": {
	startElementPosition: '400px',
	endElementPosition: '600px',
	scrollTo: 300,
	expectedCurrentTime: 500,
	},

	// offsets: [0, scroll_max]
	"end is not reachable and should be clamped": {
	startElementPosition: '500px',
	endElementPosition: '800px',
	scrollTo: scroll_max / 2,
	expectedCurrentTime: 500,
	},

	// offsets: [0, scroll_max]
	"both start and end are clamped": {
	startElementPosition: '400px',
	endElementPosition: '800px',
	scrollTo: scroll_max / 2,
	expectedCurrentTime: 500,
	},
	};

	for (let orientation of ['vertical', 'horizontal']) {
	for (let testName in tests) {
	const description = `Animation start and current times are correct given
	element-based offsets for orienation ${orientation} and ${testName}.`;
	const config = tests[testName];
	config.orientation = orientation;
	createScrollAnimationTest(description, config);
	}
	}
	</script>