chromium/src/third_party/blink/web_tests/external/wpt/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Processing a keyframes argument (property access)</title>
 <link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <script src="../../resources/keyframe-utils.js"></script>
 <body>
 <div id="log"></div>
 <div id="target"></div>
 <script>
 'use strict';

 // This file only tests the KeyframeEffect constructor since it is
 // assumed that the implementation of the KeyframeEffect constructor,
 // Animatable.animate() method, and KeyframeEffect.setKeyframes() method will
 // all share common machinery and it is not necessary to test each method.

 // Test that only animatable properties are accessed

 const gNonAnimatableProps = [
   'animation', // Shorthands where all the longhand sub-properties are not
                // animatable, are also not animatable.
   'animationDelay',
   'animationDirection',
   'animationDuration',
   'animationFillMode',
   'animationIterationCount',
   'animationName',
   'animationPlayState',
   'animationTimingFunction',
   'transition',
   'transitionDelay',
   'transitionDuration',
   'transitionProperty',
   'transitionTimingFunction',
   'contain',
   'direction',
   'display',
   'textCombineUpright',
   'textOrientation',
   'unicodeBidi',
   'willChange',
   'writingMode',

   'unsupportedProperty',

   'float', // We use the string "cssFloat" to represent "float" property, and
            // so reject "float" in the keyframe-like object.
   'font-size', // Supported property that uses dashes
 ];

 function TestKeyframe(testProp) {
   let _propAccessCount = 0;

   Object.defineProperty(this, testProp, {
     get: () => { _propAccessCount++; },
     enumerable: true,
   });

   Object.defineProperty(this, 'propAccessCount', {
     get: () => _propAccessCount
   });
 }

 function GetTestKeyframeSequence(testProp) {
   return [ new TestKeyframe(testProp) ]
 }

 for (const prop of gNonAnimatableProps) {
   test(() => {
     const testKeyframe = new TestKeyframe(prop);

     new KeyframeEffect(null, testKeyframe);

     assert_equals(testKeyframe.propAccessCount, 0, 'Accessor not called');
   }, `non-animatable property '${prop}' is not accessed when using`
      + ' a property-indexed keyframe object');
 }

 for (const prop of gNonAnimatableProps) {
   test(() => {
     const testKeyframes = GetTestKeyframeSequence(prop);

     new KeyframeEffect(null, testKeyframes);

     assert_equals(testKeyframes[0].propAccessCount, 0, 'Accessor not called');
   }, `non-animatable property '${prop}' is not accessed when using`
      + ' a keyframe sequence');
 }

 // Test equivalent forms of property-indexed and sequenced keyframe syntax

 function assertEquivalentKeyframeSyntax(keyframesA, keyframesB) {
   const processedKeyframesA =
     new KeyframeEffect(null, keyframesA).getKeyframes();
   const processedKeyframesB =
     new KeyframeEffect(null, keyframesB).getKeyframes();
   assert_frame_lists_equal(processedKeyframesA, processedKeyframesB);
 }

 const gEquivalentSyntaxTests = [
   {
     description: 'two properties with one value',
     indexedKeyframes: {
       left: '100px',
       opacity: ['1'],
     },
     sequencedKeyframes: [
       { left: '100px', opacity: '1' },
     ],
   },
   {
     description: 'two properties with three values',
     indexedKeyframes: {
       left: ['10px', '100px', '150px'],
       opacity: ['1', '0', '1'],
     },
     sequencedKeyframes: [
       { left: '10px', opacity: '1' },
       { left: '100px', opacity: '0' },
       { left: '150px', opacity: '1' },
     ],
   },
   {
     description: 'two properties with different numbers of values',
     indexedKeyframes: {
       left: ['0px', '100px', '200px'],
       opacity: ['0', '1']
     },
     sequencedKeyframes: [
       { left: '0px', opacity: '0' },
       { left: '100px' },
       { left: '200px', opacity: '1' },
     ],
   },
   {
     description: 'same easing applied to all keyframes',
     indexedKeyframes: {
       left: ['10px', '100px', '150px'],
       opacity: ['1', '0', '1'],
       easing: 'ease',
     },
     sequencedKeyframes: [
       { left: '10px', opacity: '1', easing: 'ease' },
       { left: '100px', opacity: '0', easing: 'ease' },
       { left: '150px', opacity: '1', easing: 'ease' },
     ],
   },
   {
     description: 'same composite applied to all keyframes',
     indexedKeyframes: {
       left: ['0px', '100px'],
       composite: 'add',
     },
     sequencedKeyframes: [
       { left: '0px', composite: 'add' },
       { left: '100px', composite: 'add' },
     ],
   },
 ];

 for (const {description, indexedKeyframes, sequencedKeyframes} of
      gEquivalentSyntaxTests) {
   test(() => {
     assertEquivalentKeyframeSyntax(indexedKeyframes, sequencedKeyframes);
   }, `Equivalent property-indexed and sequenced keyframes: ${description}`);
 }

 // Test handling of custom iterable objects.

 function createIterable(iterations) {
   return {
     [Symbol.iterator]() {
       let i = 0;
       return {
         next() {
           return iterations[i++];
         },
       };
     },
   };
 }

 test(() => {
   const effect = new KeyframeEffect(null, createIterable([
     { done: false, value: { left: '100px' } },
     { done: false, value: { left: '300px' } },
     { done: false, value: { left: '200px' } },
     { done: true },
   ]));
   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       left: '100px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 0.5,
       easing: 'linear',
       left: '300px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       left: '200px',
       composite: 'auto',
     },
   ]);
 }, 'Keyframes are read from a custom iterator');

 test(() => {
   const keyframes = createIterable([
     { done: false, value: { left: '100px' } },
     { done: false, value: { left: '300px' } },
     { done: false, value: { left: '200px' } },
     { done: true },
   ]);
   keyframes.easing = 'ease-in-out';
   keyframes.offset = '0.1';
   const effect = new KeyframeEffect(null, keyframes);
   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       left: '100px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 0.5,
       easing: 'linear',
       left: '300px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       left: '200px',
       composite: 'auto',
     },
   ]);
 }, '\'easing\' and \'offset\' are ignored on iterable objects');

 test(() => {
   const effect = new KeyframeEffect(null, createIterable([
     { done: false, value: { left: '100px', top: '200px' } },
     { done: false, value: { left: '300px' } },
     { done: false, value: { left: '200px', top: '100px' } },
     { done: true },
   ]));
   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       left: '100px',
       top: '200px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 0.5,
       easing: 'linear',
       left: '300px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       left: '200px',
       top: '100px',
       composite: 'auto',
     },
   ]);
 }, 'Keyframes are read from a custom iterator with multiple properties'
    + ' specified');

 test(() => {
   const effect = new KeyframeEffect(null, createIterable([
     { done: false, value: { left: '100px' } },
     { done: false, value: { left: '250px', offset: 0.75 } },
     { done: false, value: { left: '200px' } },
     { done: true },
   ]));
   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       left: '100px',
       composite: 'auto',
     },
     {
       offset: 0.75,
       computedOffset: 0.75,
       easing: 'linear',
       left: '250px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       left: '200px',
       composite: 'auto',
     },
   ]);
 }, 'Keyframes are read from a custom iterator with where an offset is'
    + ' specified');

 test(() => {
   const test_error = { name: 'test' };
   const bad_keyframe = { get left() { throw test_error; } };
   assert_throws_exactly(test_error, () => {
     new KeyframeEffect(null, createIterable([
       { done: false, value: { left: '100px' } },
       { done: false, value: bad_keyframe },
       { done: false, value: { left: '200px' } },
       { done: true },
     ]));
   });
 }, 'If a keyframe throws for an animatable property, that exception should be'
     + ' propagated');

 test(() => {
   assert_throws_js(TypeError, () => {
     new KeyframeEffect(null, createIterable([
       { done: false, value: { left: '100px' } },
       { done: false, value: 1234 },
       { done: false, value: { left: '200px' } },
       { done: true },
     ]));
   });
 }, 'Reading from a custom iterator that returns a non-object keyframe'
    + ' should throw');

 test(() => {
   assert_throws_js(TypeError, () => {
     new KeyframeEffect(null, createIterable([
       { done: false, value: { left: '100px', easing: '' } },
       { done: false, value: 1234 },
       { done: false, value: { left: '200px' } },
       { done: true },
     ]));
   });
 }, 'Reading from a custom iterator that returns a non-object keyframe'
    + ' and an invalid easing should throw');

 test(() => {
   assert_throws_js(TypeError, () => {
     new KeyframeEffect(null, createIterable([
       { done: false, value: { left: '100px' } },
       { done: false, value: { left: '150px', offset: 'o' } },
       { done: false, value: { left: '200px' } },
       { done: true },
     ]));
   });
 }, 'Reading from a custom iterator that returns a keyframe with a non finite'
    + ' floating-point offset value should throw');

 test(() => {
   assert_throws_js(TypeError, () => {
     new KeyframeEffect(null, createIterable([
       { done: false, value: { left: '100px', easing: '' } },
       { done: false, value: { left: '150px', offset: 'o' } },
       { done: false, value: { left: '200px' } },
       { done: true },
     ]));
   });
 }, 'Reading from a custom iterator that returns a keyframe with a non finite'
    + ' floating-point offset value and an invalid easing should throw');

 test(() => {
   const effect = new KeyframeEffect(null, createIterable([
     { done: false, value: { left: '100px' } },
     { done: false },  // No value member; keyframe is undefined.
     { done: false, value: { left: '200px' } },
     { done: true },
   ]));
   assert_frame_lists_equal(effect.getKeyframes(), [
     { left: '100px', offset: null, computedOffset: 0, easing: 'linear', composite: 'auto' },
     { offset: null, computedOffset: 0.5, easing: 'linear', composite: 'auto' },
     { left: '200px', offset: null, computedOffset: 1, easing: 'linear', composite: 'auto' },
   ]);
 }, 'An undefined keyframe returned from a custom iterator should be treated as a'
     + ' default keyframe');

 test(() => {
   const effect = new KeyframeEffect(null, createIterable([
     { done: false, value: { left: '100px' } },
     { done: false, value: null },
     { done: false, value: { left: '200px' } },
     { done: true },
   ]));
   assert_frame_lists_equal(effect.getKeyframes(), [
     { left: '100px', offset: null, computedOffset: 0, easing: 'linear', composite: 'auto' },
     { offset: null, computedOffset: 0.5, easing: 'linear', composite: 'auto' },
     { left: '200px', offset: null, computedOffset: 1, easing: 'linear', composite: 'auto' },
   ]);
 }, 'A null keyframe returned from a custom iterator should be treated as a'
     + ' default keyframe');

 test(() => {
   const effect = new KeyframeEffect(null, createIterable([
     { done: false, value: { left: ['100px', '200px'] } },
     { done: true },
   ]));
   assert_frame_lists_equal(effect.getKeyframes(), [
     { offset: null, computedOffset: 1, easing: 'linear', composite: 'auto' }
   ]);
 }, 'A list of values returned from a custom iterator should be ignored');

 test(() => {
   const test_error = { name: 'test' };
   const keyframe_obj = {
     [Symbol.iterator]() {
       return { next() { throw test_error; } };
     },
   };
   assert_throws_exactly(test_error, () => {
     new KeyframeEffect(null, keyframe_obj);
   });
 }, 'If a custom iterator throws from next(), the exception should be rethrown');

 // Test handling of invalid Symbol.iterator

 test(() => {
   const test_error = { name: 'test' };
   const keyframe_obj = {
     [Symbol.iterator]() {
       throw test_error;
     },
   };
   assert_throws_exactly(test_error, () => {
     new KeyframeEffect(null, keyframe_obj);
   });
 }, 'Accessing a Symbol.iterator property that throws should rethrow');

 test(() => {
   const keyframe_obj = {
     [Symbol.iterator]() {
       return 42;  // Not an object.
     },
   };
   assert_throws_js(TypeError, () => {
     new KeyframeEffect(null, keyframe_obj);
   });
 }, 'A non-object returned from the Symbol.iterator property should cause a'
     + ' TypeError to be thrown');

 test(() => {
   const keyframe = {};
   Object.defineProperty(keyframe, 'width', { value: '200px' });
   Object.defineProperty(keyframe, 'height', {
     value: '100px',
     enumerable: true,
   });
   assert_equals(keyframe.width, '200px', 'width of keyframe is readable');
   assert_equals(keyframe.height, '100px', 'height of keyframe is readable');

   const effect = new KeyframeEffect(null, [keyframe, { height: '200px' }]);

   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       height: '100px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       height: '200px',
       composite: 'auto',
     },
   ]);
 }, 'Only enumerable properties on keyframes are read');

 test(() => {
   const KeyframeParent = function() { this.width = '100px'; };
   KeyframeParent.prototype = { height: '100px' };
   const Keyframe = function() { this.top = '100px'; };
   Keyframe.prototype = Object.create(KeyframeParent.prototype);
   Object.defineProperty(Keyframe.prototype, 'left', {
     value: '100px',
     enumerable: true,
   });
   const keyframe = new Keyframe();

   const effect = new KeyframeEffect(null, [keyframe, { top: '200px' }]);

   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       top: '100px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       top: '200px',
       composite: 'auto',
     },
   ]);
 }, 'Only properties defined directly on keyframes are read');

 test(() => {
   const keyframes = {};
   Object.defineProperty(keyframes, 'width', ['100px', '200px']);
   Object.defineProperty(keyframes, 'height', {
     value: ['100px', '200px'],
     enumerable: true,
   });

   const effect = new KeyframeEffect(null, keyframes);

   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       height: '100px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       height: '200px',
       composite: 'auto',
     },
   ]);
 }, 'Only enumerable properties on property-indexed keyframes are read');

 test(() => {
   const KeyframesParent = function() { this.width = '100px'; };
   KeyframesParent.prototype = { height: '100px' };
   const Keyframes = function() { this.top = ['100px', '200px']; };
   Keyframes.prototype = Object.create(KeyframesParent.prototype);
   Object.defineProperty(Keyframes.prototype, 'left', {
     value: ['100px', '200px'],
     enumerable: true,
   });
   const keyframes = new Keyframes();

   const effect = new KeyframeEffect(null, keyframes);

   assert_frame_lists_equal(effect.getKeyframes(), [
     {
       offset: null,
       computedOffset: 0,
       easing: 'linear',
       top: '100px',
       composite: 'auto',
     },
     {
       offset: null,
       computedOffset: 1,
       easing: 'linear',
       top: '200px',
       composite: 'auto',
     },
   ]);
 }, 'Only properties defined directly on property-indexed keyframes are read');

 test(() => {
   const expectedOrder = ['composite', 'easing', 'offset', 'left', 'marginLeft'];
   const actualOrder = [];
   const kf1 = {};
   for (const {prop, value} of [{ prop: 'marginLeft', value: '10px' },
                                { prop: 'left',       value: '20px' },
                                { prop: 'offset',     value: '0' },
                                { prop: 'easing',     value: 'linear' },
                                { prop: 'composite',  value: 'replace' }]) {
     Object.defineProperty(kf1, prop, {
       enumerable: true,
       get: () => { actualOrder.push(prop); return value; }
     });
   }
   const kf2 = { marginLeft: '10px', left: '20px', offset: 1 };

   new KeyframeEffect(target, [kf1, kf2]);

   assert_array_equals(actualOrder, expectedOrder, 'property access order');
 }, 'Properties are read in ascending order by Unicode codepoint');

 </script>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>Processing a keyframes argument (property access)</title>
	<link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="../../testcommon.js"></script>
	<script src="../../resources/keyframe-utils.js"></script>
	<body>
	<div id="log"></div>
	<div id="target"></div>
	<script>
	'use strict';

	// This file only tests the KeyframeEffect constructor since it is
	// assumed that the implementation of the KeyframeEffect constructor,
	// Animatable.animate() method, and KeyframeEffect.setKeyframes() method will
	// all share common machinery and it is not necessary to test each method.

	// Test that only animatable properties are accessed

	const gNonAnimatableProps = [
	'animation', // Shorthands where all the longhand sub-properties are not
	// animatable, are also not animatable.
	'animationDelay',
	'animationDirection',
	'animationDuration',
	'animationFillMode',
	'animationIterationCount',
	'animationName',
	'animationPlayState',
	'animationTimingFunction',
	'transition',
	'transitionDelay',
	'transitionDuration',
	'transitionProperty',
	'transitionTimingFunction',
	'contain',
	'direction',
	'display',
	'textCombineUpright',
	'textOrientation',
	'unicodeBidi',
	'willChange',
	'writingMode',

	'unsupportedProperty',

	'float', // We use the string "cssFloat" to represent "float" property, and
	// so reject "float" in the keyframe-like object.
	'font-size', // Supported property that uses dashes
	];

	function TestKeyframe(testProp) {
	let _propAccessCount = 0;

	Object.defineProperty(this, testProp, {
	get: () => { _propAccessCount++; },
	enumerable: true,
	});

	Object.defineProperty(this, 'propAccessCount', {
	get: () => _propAccessCount
	});
	}

	function GetTestKeyframeSequence(testProp) {
	return [ new TestKeyframe(testProp) ]
	}

	for (const prop of gNonAnimatableProps) {
	test(() => {
	const testKeyframe = new TestKeyframe(prop);

	new KeyframeEffect(null, testKeyframe);

	assert_equals(testKeyframe.propAccessCount, 0, 'Accessor not called');
	}, `non-animatable property '${prop}' is not accessed when using`
	+ ' a property-indexed keyframe object');
	}

	for (const prop of gNonAnimatableProps) {
	test(() => {
	const testKeyframes = GetTestKeyframeSequence(prop);

	new KeyframeEffect(null, testKeyframes);

	assert_equals(testKeyframes[0].propAccessCount, 0, 'Accessor not called');
	}, `non-animatable property '${prop}' is not accessed when using`
	+ ' a keyframe sequence');
	}

	// Test equivalent forms of property-indexed and sequenced keyframe syntax

	function assertEquivalentKeyframeSyntax(keyframesA, keyframesB) {
	const processedKeyframesA =
	new KeyframeEffect(null, keyframesA).getKeyframes();
	const processedKeyframesB =
	new KeyframeEffect(null, keyframesB).getKeyframes();
	assert_frame_lists_equal(processedKeyframesA, processedKeyframesB);
	}

	const gEquivalentSyntaxTests = [
	{
	description: 'two properties with one value',
	indexedKeyframes: {
	left: '100px',
	opacity: ['1'],
	},
	sequencedKeyframes: [
	{ left: '100px', opacity: '1' },
	],
	},
	{
	description: 'two properties with three values',
	indexedKeyframes: {
	left: ['10px', '100px', '150px'],
	opacity: ['1', '0', '1'],
	},
	sequencedKeyframes: [
	{ left: '10px', opacity: '1' },
	{ left: '100px', opacity: '0' },
	{ left: '150px', opacity: '1' },
	],
	},
	{
	description: 'two properties with different numbers of values',
	indexedKeyframes: {
	left: ['0px', '100px', '200px'],
	opacity: ['0', '1']
	},
	sequencedKeyframes: [
	{ left: '0px', opacity: '0' },
	{ left: '100px' },
	{ left: '200px', opacity: '1' },
	],
	},
	{
	description: 'same easing applied to all keyframes',
	indexedKeyframes: {
	left: ['10px', '100px', '150px'],
	opacity: ['1', '0', '1'],
	easing: 'ease',
	},
	sequencedKeyframes: [
	{ left: '10px', opacity: '1', easing: 'ease' },
	{ left: '100px', opacity: '0', easing: 'ease' },
	{ left: '150px', opacity: '1', easing: 'ease' },
	],
	},
	{
	description: 'same composite applied to all keyframes',
	indexedKeyframes: {
	left: ['0px', '100px'],
	composite: 'add',
	},
	sequencedKeyframes: [
	{ left: '0px', composite: 'add' },
	{ left: '100px', composite: 'add' },
	],
	},
	];

	for (const {description, indexedKeyframes, sequencedKeyframes} of
	gEquivalentSyntaxTests) {
	test(() => {
	assertEquivalentKeyframeSyntax(indexedKeyframes, sequencedKeyframes);
	}, `Equivalent property-indexed and sequenced keyframes: ${description}`);
	}

	// Test handling of custom iterable objects.

	function createIterable(iterations) {
	return {
	[Symbol.iterator]() {
	let i = 0;
	return {
	next() {
	return iterations[i++];
	},
	};
	},
	};
	}

	test(() => {
	const effect = new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false, value: { left: '300px' } },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	left: '100px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 0.5,
	easing: 'linear',
	left: '300px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	left: '200px',
	composite: 'auto',
	},
	]);
	}, 'Keyframes are read from a custom iterator');

	test(() => {
	const keyframes = createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false, value: { left: '300px' } },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]);
	keyframes.easing = 'ease-in-out';
	keyframes.offset = '0.1';
	const effect = new KeyframeEffect(null, keyframes);
	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	left: '100px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 0.5,
	easing: 'linear',
	left: '300px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	left: '200px',
	composite: 'auto',
	},
	]);
	}, '\'easing\' and \'offset\' are ignored on iterable objects');

	test(() => {
	const effect = new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px', top: '200px' } },
	{ done: false, value: { left: '300px' } },
	{ done: false, value: { left: '200px', top: '100px' } },
	{ done: true },
	]));
	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	left: '100px',
	top: '200px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 0.5,
	easing: 'linear',
	left: '300px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	left: '200px',
	top: '100px',
	composite: 'auto',
	},
	]);
	}, 'Keyframes are read from a custom iterator with multiple properties'
	+ ' specified');

	test(() => {
	const effect = new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false, value: { left: '250px', offset: 0.75 } },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	left: '100px',
	composite: 'auto',
	},
	{
	offset: 0.75,
	computedOffset: 0.75,
	easing: 'linear',
	left: '250px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	left: '200px',
	composite: 'auto',
	},
	]);
	}, 'Keyframes are read from a custom iterator with where an offset is'
	+ ' specified');

	test(() => {
	const test_error = { name: 'test' };
	const bad_keyframe = { get left() { throw test_error; } };
	assert_throws_exactly(test_error, () => {
	new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false, value: bad_keyframe },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	});
	}, 'If a keyframe throws for an animatable property, that exception should be'
	+ ' propagated');

	test(() => {
	assert_throws_js(TypeError, () => {
	new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false, value: 1234 },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	});
	}, 'Reading from a custom iterator that returns a non-object keyframe'
	+ ' should throw');

	test(() => {
	assert_throws_js(TypeError, () => {
	new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px', easing: '' } },
	{ done: false, value: 1234 },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	});
	}, 'Reading from a custom iterator that returns a non-object keyframe'
	+ ' and an invalid easing should throw');

	test(() => {
	assert_throws_js(TypeError, () => {
	new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false, value: { left: '150px', offset: 'o' } },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	});
	}, 'Reading from a custom iterator that returns a keyframe with a non finite'
	+ ' floating-point offset value should throw');

	test(() => {
	assert_throws_js(TypeError, () => {
	new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px', easing: '' } },
	{ done: false, value: { left: '150px', offset: 'o' } },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	});
	}, 'Reading from a custom iterator that returns a keyframe with a non finite'
	+ ' floating-point offset value and an invalid easing should throw');

	test(() => {
	const effect = new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false }, // No value member; keyframe is undefined.
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	assert_frame_lists_equal(effect.getKeyframes(), [
	{ left: '100px', offset: null, computedOffset: 0, easing: 'linear', composite: 'auto' },
	{ offset: null, computedOffset: 0.5, easing: 'linear', composite: 'auto' },
	{ left: '200px', offset: null, computedOffset: 1, easing: 'linear', composite: 'auto' },
	]);
	}, 'An undefined keyframe returned from a custom iterator should be treated as a'
	+ ' default keyframe');

	test(() => {
	const effect = new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: '100px' } },
	{ done: false, value: null },
	{ done: false, value: { left: '200px' } },
	{ done: true },
	]));
	assert_frame_lists_equal(effect.getKeyframes(), [
	{ left: '100px', offset: null, computedOffset: 0, easing: 'linear', composite: 'auto' },
	{ offset: null, computedOffset: 0.5, easing: 'linear', composite: 'auto' },
	{ left: '200px', offset: null, computedOffset: 1, easing: 'linear', composite: 'auto' },
	]);
	}, 'A null keyframe returned from a custom iterator should be treated as a'
	+ ' default keyframe');

	test(() => {
	const effect = new KeyframeEffect(null, createIterable([
	{ done: false, value: { left: ['100px', '200px'] } },
	{ done: true },
	]));
	assert_frame_lists_equal(effect.getKeyframes(), [
	{ offset: null, computedOffset: 1, easing: 'linear', composite: 'auto' }
	]);
	}, 'A list of values returned from a custom iterator should be ignored');

	test(() => {
	const test_error = { name: 'test' };
	const keyframe_obj = {
	[Symbol.iterator]() {
	return { next() { throw test_error; } };
	},
	};
	assert_throws_exactly(test_error, () => {
	new KeyframeEffect(null, keyframe_obj);
	});
	}, 'If a custom iterator throws from next(), the exception should be rethrown');

	// Test handling of invalid Symbol.iterator

	test(() => {
	const test_error = { name: 'test' };
	const keyframe_obj = {
	[Symbol.iterator]() {
	throw test_error;
	},
	};
	assert_throws_exactly(test_error, () => {
	new KeyframeEffect(null, keyframe_obj);
	});
	}, 'Accessing a Symbol.iterator property that throws should rethrow');

	test(() => {
	const keyframe_obj = {
	[Symbol.iterator]() {
	return 42; // Not an object.
	},
	};
	assert_throws_js(TypeError, () => {
	new KeyframeEffect(null, keyframe_obj);
	});
	}, 'A non-object returned from the Symbol.iterator property should cause a'
	+ ' TypeError to be thrown');

	test(() => {
	const keyframe = {};
	Object.defineProperty(keyframe, 'width', { value: '200px' });
	Object.defineProperty(keyframe, 'height', {
	value: '100px',
	enumerable: true,
	});
	assert_equals(keyframe.width, '200px', 'width of keyframe is readable');
	assert_equals(keyframe.height, '100px', 'height of keyframe is readable');

	const effect = new KeyframeEffect(null, [keyframe, { height: '200px' }]);

	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	height: '100px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	height: '200px',
	composite: 'auto',
	},
	]);
	}, 'Only enumerable properties on keyframes are read');

	test(() => {
	const KeyframeParent = function() { this.width = '100px'; };
	KeyframeParent.prototype = { height: '100px' };
	const Keyframe = function() { this.top = '100px'; };
	Keyframe.prototype = Object.create(KeyframeParent.prototype);
	Object.defineProperty(Keyframe.prototype, 'left', {
	value: '100px',
	enumerable: true,
	});
	const keyframe = new Keyframe();

	const effect = new KeyframeEffect(null, [keyframe, { top: '200px' }]);

	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	top: '100px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	top: '200px',
	composite: 'auto',
	},
	]);
	}, 'Only properties defined directly on keyframes are read');

	test(() => {
	const keyframes = {};
	Object.defineProperty(keyframes, 'width', ['100px', '200px']);
	Object.defineProperty(keyframes, 'height', {
	value: ['100px', '200px'],
	enumerable: true,
	});

	const effect = new KeyframeEffect(null, keyframes);

	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	height: '100px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	height: '200px',
	composite: 'auto',
	},
	]);
	}, 'Only enumerable properties on property-indexed keyframes are read');

	test(() => {
	const KeyframesParent = function() { this.width = '100px'; };
	KeyframesParent.prototype = { height: '100px' };
	const Keyframes = function() { this.top = ['100px', '200px']; };
	Keyframes.prototype = Object.create(KeyframesParent.prototype);
	Object.defineProperty(Keyframes.prototype, 'left', {
	value: ['100px', '200px'],
	enumerable: true,
	});
	const keyframes = new Keyframes();

	const effect = new KeyframeEffect(null, keyframes);

	assert_frame_lists_equal(effect.getKeyframes(), [
	{
	offset: null,
	computedOffset: 0,
	easing: 'linear',
	top: '100px',
	composite: 'auto',
	},
	{
	offset: null,
	computedOffset: 1,
	easing: 'linear',
	top: '200px',
	composite: 'auto',
	},
	]);
	}, 'Only properties defined directly on property-indexed keyframes are read');

	test(() => {
	const expectedOrder = ['composite', 'easing', 'offset', 'left', 'marginLeft'];
	const actualOrder = [];
	const kf1 = {};
	for (const {prop, value} of [{ prop: 'marginLeft', value: '10px' },
	{ prop: 'left', value: '20px' },
	{ prop: 'offset', value: '0' },
	{ prop: 'easing', value: 'linear' },
	{ prop: 'composite', value: 'replace' }]) {
	Object.defineProperty(kf1, prop, {
	enumerable: true,
	get: () => { actualOrder.push(prop); return value; }
	});
	}
	const kf2 = { marginLeft: '10px', left: '20px', offset: 1 };

	new KeyframeEffect(target, [kf1, kf2]);

	assert_array_equals(actualOrder, expectedOrder, 'property access order');
	}, 'Properties are read in ascending order by Unicode codepoint');

	</script>