scroll-animations/scroll-timelines/constructor.html - external/w3c/web-platform-tests - Git at Google

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

 <style>
 .scroller {
   height: 100px;
   width: 100px;
   overflow: scroll;
 }

 .content {
   height: 500px;
   width: 500px;
 }
 </style>

 <div class="scroller">
   <div class="content"></div>
 </div>

 <script>
 'use strict';

 function formatOffset(v) {
   if (typeof(v) == 'object')
     return `${v.constructor.name}(${v.toString()})`;
   return `'${v.toString()}'`;
 }

 function assert_offsets_equal(a, b) {
   assert_equals(formatOffset(a), formatOffset(b));
 }

 // source

 test(t => {
   const scroller = document.querySelector('.scroller');
   assert_equals(
       new ScrollTimeline({source: scroller}).source, scroller);
 }, 'A ScrollTimeline can be created with a source');

 test(t => {
   const div = document.createElement('div');
   assert_equals(new ScrollTimeline({source: div}).source, div);
 }, 'A ScrollTimeline can be created with a non-scrolling source');

 test(t => {
   assert_equals(new ScrollTimeline({source: null}).source, null);
 }, 'A ScrollTimeline created with a null source should have no source');

 test(t => {
   assert_equals(new ScrollTimeline().source, document.scrollingElement);
 }, 'A ScrollTimeline created without a source should use the ' +
    'document.scrollingElement');

 // orientation

 test(t => {
   assert_equals(new ScrollTimeline().orientation, 'block');
 }, 'A ScrollTimeline created with the default orientation should default to ' +
    `'block'`);

 const gValidOrientationValues = [
   'block',
   'inline',
   'horizontal',
   'vertical',
 ];

 for (let orientation of gValidOrientationValues) {
   test(function() {
     const scrollTimeline =
         new ScrollTimeline({orientation: orientation});
     assert_equals(scrollTimeline.orientation, orientation);
   }, `'${orientation}' is a valid orientation value`);
 }

 test(t => {
   let constructorFunc = function() {
     new ScrollTimeline({orientation: 'nonsense'})
   };
   assert_throws_js(TypeError, constructorFunc);

   // 'auto' for orientation was previously in the spec, but was removed. Make
   // sure that implementations do not support it.
   constructorFunc = function() {
     new ScrollTimeline({orientation: 'auto'})
   };
   assert_throws_js(TypeError, constructorFunc);
 }, 'Creating a ScrollTimeline with an invalid orientation value should throw');

 // scrollOffsets

 function formatOffset(v) {
   if (typeof(v) == 'object')
     return `${v.constructor.name}(${v.toString()})`;
   return `'${v.toString()}'`;
 }

 function assert_offsets_equal(a, b) {
   assert_equals(formatOffset(a), formatOffset(b));
 }

 test(t => {
   assert_array_equals(new ScrollTimeline().scrollOffsets, []);
 }, 'A ScrollTimeline created with the default scrollOffsets should default ' +
    'to []');

 test(t => {
   assert_array_equals(
       new ScrollTimeline({scrollOffsets: []}).scrollOffsets, []);
 }, 'A ScrollTimeline created with empty scrollOffsets should resolve to []');

 test(t => {
   let offsets =
       new ScrollTimeline({scrollOffsets: [CSS.percent(20), 'auto']})
       .scrollOffsets;
   assert_offsets_equal(offsets[0], CSS.percent(20));
   assert_offsets_equal(offsets[1], new CSSKeywordValue('auto'));
 }, 'A ScrollTimeline created with last \'auto\' offset in scrollOffsets ' +
    'should be allowed.');

 test(t => {
   let constructorFunc = function() {
     new ScrollTimeline({scrollOffsets: null})
   };
   assert_throws_js(TypeError, constructorFunc);
 }, 'Creating a ScrollTimeline with an invalid scrollOffsets value should ' +
    'throw.');

 test(t => {
   let constructorFunc = function() {
     new ScrollTimeline(
         {scrollOffsets: [CSS.percent(20), 'auto', CSS.percent(50)]})
   };
   assert_throws_js(TypeError, constructorFunc);
 }, 'Creating a ScrollTimeline with an scrollOffsets value of ' +
    '[CSS.percent(20), \'auto\', CSS.percent(50)] should throw');

 const gValidScrollOffsetValues = [
   CSS.px(0),
   CSS.percent(100).sub(CSS.px(80)),
 ];

 const gValidScrollOffsetSuffixes = [
   // Relative lengths.
   'em',
   'ex',
   'ch',
   'rem',
   'vw',
   'vh',
   'vmin',
   'vmax',
   // Absolute lengths.
   'cm',
   'mm',
   'q',
   'in',
   'pc',
   'pt',
   'px',
   // Percentage.
   '%',
 ];

 for (let offset of gValidScrollOffsetValues) {
   test(function() {
     const scrollTimeline =
         new ScrollTimeline({scrollOffsets: [offset, offset]});

     // Special case for 'auto'. This is valid input because of CSSKeywordish,
     // but when read back we expect a real CSSKeywordValue.
     if (offset === 'auto')
       offset = new CSSKeywordValue('auto');

     assert_offsets_equal(scrollTimeline.scrollOffsets[0], offset);
     assert_offsets_equal(scrollTimeline.scrollOffsets[1], offset);
   }, '\'' + offset + '\' is a valid scroll offset value');
 }

 for (const suffix of gValidScrollOffsetSuffixes) {
   test(function() {
     const offset = new CSSUnitValue(75, suffix);
     const scrollTimeline =
         new ScrollTimeline({scrollOffsets: [offset, offset]});

     assert_offsets_equal(scrollTimeline.scrollOffsets[0], offset);
     assert_offsets_equal(scrollTimeline.scrollOffsets[1], offset);
   }, '\'' + suffix + '\' is a valid scroll offset unit');
 }

 // These are deliberately incomplete, just a random sampling of invalid
 // values/units.
 const gInvalidScrollOffsetValues = [
   '',
   'calc(360deg / 4)',
   'left',
   '#ff0000',
   'rgb(0, 128, 0)',
   'url("http://www.example.com/pinkish.gif")',
   'this_is_garbage',
   CSS.number(0),
   // Multiple valid values.
   '100px 5%',
   // Values that would be valid if represented with CSS Typed OM:
    0,
    '10px',
    '10%',
    'calc(100% - 80px)',
 ];

 const gInvalidScrollOffsetSuffixes = [
   'deg',
   's',
   'Hz',
   'dpi',
 ];

 for (const offset of gInvalidScrollOffsetValues) {
   test(function() {
     const constructorFunc = function() {
       new ScrollTimeline({scrollOffsets: ['0px', offset]})
     };
     assert_throws_js(TypeError, constructorFunc);
   }, formatOffset(offset) + ' is an invalid scroll offset value in scrollOffsets');
 }

 for (const suffix of gInvalidScrollOffsetSuffixes) {
   test(function() {
     const offset = '75' + suffix;
     const constructorFunc = function() {
       new ScrollTimeline({scrollOffsets: ['0px', offset]});
     };
     assert_throws_js(TypeError, constructorFunc);
   }, '\'' + suffix + '\' is an invalid scroll offset unit in scrollOffsets');
 }

 const offset_target = document.createElement('div');

 const gValidElementBasedScrollOffsetValues = [
   {target: offset_target},
   {target: offset_target, threshold: 0},
   {target: offset_target, threshold: 0.5},
   {target: offset_target, threshold: 1},
 ];

 for (let offset of gValidElementBasedScrollOffsetValues) {
   test(function() {
     const scrollTimeline =
         new ScrollTimeline({scrollOffsets: [offset, offset]});

     // Special case unspecified threshold since it gets initialized to 0.
     if (!offset.hasOwnProperty('threshold'))
       offset.threshold = 0;

     assert_equals(scrollTimeline.scrollOffsets[0].target, offset.target);
     assert_equals(scrollTimeline.scrollOffsets[0].threshold, offset.threshold);
     assert_equals(scrollTimeline.scrollOffsets[1].target, offset.target);
     assert_equals(scrollTimeline.scrollOffsets[1].threshold, offset.threshold);
   }, '\'' + JSON.stringify(offset) + '\' is a valid scroll offset value');
 }

 const gInvalidElementBasedScrollOffsetValues = [
   {}, // empty
   {target: offset_target, threshold: "test"},
   {target: offset_target, threshold: 2},
   {target: offset_target, threshold: -0.2},
 ];

 for (let offset of gInvalidElementBasedScrollOffsetValues) {
   test(function() {
     const constructorFunc = function() {
       new ScrollTimeline({scrollOffsets: [offset]})
     };
     assert_throws_js(TypeError, constructorFunc);
   }, `'${JSON.stringify(offset)}' is an invalid scroll offset value in ` +
      `scrollOffsets`);
 }
 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<title>ScrollTimeline constructor</title>
	<link rel="help" href="https://wicg.github.io/scroll-animations/#scrolltimeline-interface">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>

	<style>
	.scroller {
	height: 100px;
	width: 100px;
	overflow: scroll;
	}

	.content {
	height: 500px;
	width: 500px;
	}
	</style>

	<div class="scroller">
	<div class="content"></div>
	</div>

	<script>
	'use strict';

	function formatOffset(v) {
	if (typeof(v) == 'object')
	return `${v.constructor.name}(${v.toString()})`;
	return `'${v.toString()}'`;
	}

	function assert_offsets_equal(a, b) {
	assert_equals(formatOffset(a), formatOffset(b));
	}

	// source

	test(t => {
	const scroller = document.querySelector('.scroller');
	assert_equals(
	new ScrollTimeline({source: scroller}).source, scroller);
	}, 'A ScrollTimeline can be created with a source');

	test(t => {
	const div = document.createElement('div');
	assert_equals(new ScrollTimeline({source: div}).source, div);
	}, 'A ScrollTimeline can be created with a non-scrolling source');

	test(t => {
	assert_equals(new ScrollTimeline({source: null}).source, null);
	}, 'A ScrollTimeline created with a null source should have no source');

	test(t => {
	assert_equals(new ScrollTimeline().source, document.scrollingElement);
	}, 'A ScrollTimeline created without a source should use the ' +
	'document.scrollingElement');

	// orientation

	test(t => {
	assert_equals(new ScrollTimeline().orientation, 'block');
	}, 'A ScrollTimeline created with the default orientation should default to ' +
	`'block'`);

	const gValidOrientationValues = [
	'block',
	'inline',
	'horizontal',
	'vertical',
	];

	for (let orientation of gValidOrientationValues) {
	test(function() {
	const scrollTimeline =
	new ScrollTimeline({orientation: orientation});
	assert_equals(scrollTimeline.orientation, orientation);
	}, `'${orientation}' is a valid orientation value`);
	}

	test(t => {
	let constructorFunc = function() {
	new ScrollTimeline({orientation: 'nonsense'})
	};
	assert_throws_js(TypeError, constructorFunc);

	// 'auto' for orientation was previously in the spec, but was removed. Make
	// sure that implementations do not support it.
	constructorFunc = function() {
	new ScrollTimeline({orientation: 'auto'})
	};
	assert_throws_js(TypeError, constructorFunc);
	}, 'Creating a ScrollTimeline with an invalid orientation value should throw');

	// scrollOffsets

	function formatOffset(v) {
	if (typeof(v) == 'object')
	return `${v.constructor.name}(${v.toString()})`;
	return `'${v.toString()}'`;
	}

	function assert_offsets_equal(a, b) {
	assert_equals(formatOffset(a), formatOffset(b));
	}

	test(t => {
	assert_array_equals(new ScrollTimeline().scrollOffsets, []);
	}, 'A ScrollTimeline created with the default scrollOffsets should default ' +
	'to []');

	test(t => {
	assert_array_equals(
	new ScrollTimeline({scrollOffsets: []}).scrollOffsets, []);
	}, 'A ScrollTimeline created with empty scrollOffsets should resolve to []');

	test(t => {
	let offsets =
	new ScrollTimeline({scrollOffsets: [CSS.percent(20), 'auto']})
	.scrollOffsets;
	assert_offsets_equal(offsets[0], CSS.percent(20));
	assert_offsets_equal(offsets[1], new CSSKeywordValue('auto'));
	}, 'A ScrollTimeline created with last \'auto\' offset in scrollOffsets ' +
	'should be allowed.');

	test(t => {
	let constructorFunc = function() {
	new ScrollTimeline({scrollOffsets: null})
	};
	assert_throws_js(TypeError, constructorFunc);
	}, 'Creating a ScrollTimeline with an invalid scrollOffsets value should ' +
	'throw.');

	test(t => {
	let constructorFunc = function() {
	new ScrollTimeline(
	{scrollOffsets: [CSS.percent(20), 'auto', CSS.percent(50)]})
	};
	assert_throws_js(TypeError, constructorFunc);
	}, 'Creating a ScrollTimeline with an scrollOffsets value of ' +
	'[CSS.percent(20), \'auto\', CSS.percent(50)] should throw');

	const gValidScrollOffsetValues = [
	CSS.px(0),
	CSS.percent(100).sub(CSS.px(80)),
	];

	const gValidScrollOffsetSuffixes = [
	// Relative lengths.
	'em',
	'ex',
	'ch',
	'rem',
	'vw',
	'vh',
	'vmin',
	'vmax',
	// Absolute lengths.
	'cm',
	'mm',
	'q',
	'in',
	'pc',
	'pt',
	'px',
	// Percentage.
	'%',
	];

	for (let offset of gValidScrollOffsetValues) {
	test(function() {
	const scrollTimeline =
	new ScrollTimeline({scrollOffsets: [offset, offset]});

	// Special case for 'auto'. This is valid input because of CSSKeywordish,
	// but when read back we expect a real CSSKeywordValue.
	if (offset === 'auto')
	offset = new CSSKeywordValue('auto');

	assert_offsets_equal(scrollTimeline.scrollOffsets[0], offset);
	assert_offsets_equal(scrollTimeline.scrollOffsets[1], offset);
	}, '\'' + offset + '\' is a valid scroll offset value');
	}

	for (const suffix of gValidScrollOffsetSuffixes) {
	test(function() {
	const offset = new CSSUnitValue(75, suffix);
	const scrollTimeline =
	new ScrollTimeline({scrollOffsets: [offset, offset]});

	assert_offsets_equal(scrollTimeline.scrollOffsets[0], offset);
	assert_offsets_equal(scrollTimeline.scrollOffsets[1], offset);
	}, '\'' + suffix + '\' is a valid scroll offset unit');
	}

	// These are deliberately incomplete, just a random sampling of invalid
	// values/units.
	const gInvalidScrollOffsetValues = [
	'',
	'calc(360deg / 4)',
	'left',
	'#ff0000',
	'rgb(0, 128, 0)',
	'url("http://www.example.com/pinkish.gif")',
	'this_is_garbage',
	CSS.number(0),
	// Multiple valid values.
	'100px 5%',
	// Values that would be valid if represented with CSS Typed OM:
	0,
	'10px',
	'10%',
	'calc(100% - 80px)',
	];

	const gInvalidScrollOffsetSuffixes = [
	'deg',
	's',
	'Hz',
	'dpi',
	];

	for (const offset of gInvalidScrollOffsetValues) {
	test(function() {
	const constructorFunc = function() {
	new ScrollTimeline({scrollOffsets: ['0px', offset]})
	};
	assert_throws_js(TypeError, constructorFunc);
	}, formatOffset(offset) + ' is an invalid scroll offset value in scrollOffsets');
	}

	for (const suffix of gInvalidScrollOffsetSuffixes) {
	test(function() {
	const offset = '75' + suffix;
	const constructorFunc = function() {
	new ScrollTimeline({scrollOffsets: ['0px', offset]});
	};
	assert_throws_js(TypeError, constructorFunc);
	}, '\'' + suffix + '\' is an invalid scroll offset unit in scrollOffsets');
	}

	const offset_target = document.createElement('div');

	const gValidElementBasedScrollOffsetValues = [
	{target: offset_target},
	{target: offset_target, threshold: 0},
	{target: offset_target, threshold: 0.5},
	{target: offset_target, threshold: 1},
	];

	for (let offset of gValidElementBasedScrollOffsetValues) {
	test(function() {
	const scrollTimeline =
	new ScrollTimeline({scrollOffsets: [offset, offset]});

	// Special case unspecified threshold since it gets initialized to 0.
	if (!offset.hasOwnProperty('threshold'))
	offset.threshold = 0;

	assert_equals(scrollTimeline.scrollOffsets[0].target, offset.target);
	assert_equals(scrollTimeline.scrollOffsets[0].threshold, offset.threshold);
	assert_equals(scrollTimeline.scrollOffsets[1].target, offset.target);
	assert_equals(scrollTimeline.scrollOffsets[1].threshold, offset.threshold);
	}, '\'' + JSON.stringify(offset) + '\' is a valid scroll offset value');
	}

	const gInvalidElementBasedScrollOffsetValues = [
	{}, // empty
	{target: offset_target, threshold: "test"},
	{target: offset_target, threshold: 2},
	{target: offset_target, threshold: -0.2},
	];

	for (let offset of gInvalidElementBasedScrollOffsetValues) {
	test(function() {
	const constructorFunc = function() {
	new ScrollTimeline({scrollOffsets: [offset]})
	};
	assert_throws_js(TypeError, constructorFunc);
	}, `'${JSON.stringify(offset)}' is an invalid scroll offset value in ` +
	`scrollOffsets`);
	}
	</script>