chromium/src/third_party/blink/web_tests/animations/svg-attribute-composition/svg-rx-composition.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <html>
 <body>
 <template id="target-template">
 <svg width="90" height="90">
 <ellipse class="target" cx="20" cy="20" />
 </svg>
 </template>
 <script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
 <script>
 'use strict';

 assertAttributeInterpolation({
   property: 'rx',
   underlying: '3',
   from: '-2',
   fromComposite: 'add',
   to: '3',
   toComposite: 'add'
 }, [
   {at: -0.4, is: 0},
   {at: 0, is: 1},
   {at: 0.2, is: 2},
   {at: 0.6, is: 4},
   {at: 1, is: 6},
   {at: 1.4, is: 8}
 ]);

 assertAttributeInterpolation({
   property: 'rx',
   underlying: '3',
   from: '1',
   fromComposite: 'replace',
   to: '3',
   toComposite: 'add'
 }, [
   {at: -0.4, is: 0},
   {at: 0, is: 1},
   {at: 0.2, is: 2},
   {at: 0.6, is: 4},
   {at: 1, is: 6},
   {at: 1.4, is: 8}
 ]);

 assertAttributeInterpolation({
   property: 'rx',
   underlying: '1',
   from: neutralKeyframe,
   to: '6',
   toComposite: 'replace'
 }, [
   {at: -0.4, is: 0},
   {at: 0, is: 1},
   {at: 0.2, is: 2},
   {at: 0.6, is: 4},
   {at: 1, is: 6},
   {at: 1.4, is: 8}
 ]);

 assertAttributeInterpolation({
   property: 'ry',
   underlying: '3',
   from: '-2',
   fromComposite: 'add',
   to: '3',
   toComposite: 'add'
 }, [
   {at: -0.4, is: 0},
   {at: 0, is: 1},
   {at: 0.2, is: 2},
   {at: 0.6, is: 4},
   {at: 1, is: 6},
   {at: 1.4, is: 8}
 ]);

 assertAttributeInterpolation({
   property: 'ry',
   underlying: '3',
   from: '1',
   fromComposite: 'replace',
   to: '3',
   toComposite: 'add'
 }, [
   {at: -0.4, is: 0},
   {at: 0, is: 1},
   {at: 0.2, is: 2},
   {at: 0.6, is: 4},
   {at: 1, is: 6},
   {at: 1.4, is: 8}
 ]);

 assertAttributeInterpolation({
   property: 'ry',
   underlying: '1',
   from: neutralKeyframe,
   to: '6',
   toComposite: 'replace'
 }, [
   {at: -0.4, is: 0},
   {at: 0, is: 1},
   {at: 0.2, is: 2},
   {at: 0.6, is: 4},
   {at: 1, is: 6},
   {at: 1.4, is: 8}
 ]);
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<body>
	<template id="target-template">
	<svg width="90" height="90">
	<ellipse class="target" cx="20" cy="20" />
	</svg>
	</template>
	<script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
	<script>
	'use strict';

	assertAttributeInterpolation({
	property: 'rx',
	underlying: '3',
	from: '-2',
	fromComposite: 'add',
	to: '3',
	toComposite: 'add'
	}, [
	{at: -0.4, is: 0},
	{at: 0, is: 1},
	{at: 0.2, is: 2},
	{at: 0.6, is: 4},
	{at: 1, is: 6},
	{at: 1.4, is: 8}
	]);

	assertAttributeInterpolation({
	property: 'rx',
	underlying: '3',
	from: '1',
	fromComposite: 'replace',
	to: '3',
	toComposite: 'add'
	}, [
	{at: -0.4, is: 0},
	{at: 0, is: 1},
	{at: 0.2, is: 2},
	{at: 0.6, is: 4},
	{at: 1, is: 6},
	{at: 1.4, is: 8}
	]);

	assertAttributeInterpolation({
	property: 'rx',
	underlying: '1',
	from: neutralKeyframe,
	to: '6',
	toComposite: 'replace'
	}, [
	{at: -0.4, is: 0},
	{at: 0, is: 1},
	{at: 0.2, is: 2},
	{at: 0.6, is: 4},
	{at: 1, is: 6},
	{at: 1.4, is: 8}
	]);

	assertAttributeInterpolation({
	property: 'ry',
	underlying: '3',
	from: '-2',
	fromComposite: 'add',
	to: '3',
	toComposite: 'add'
	}, [
	{at: -0.4, is: 0},
	{at: 0, is: 1},
	{at: 0.2, is: 2},
	{at: 0.6, is: 4},
	{at: 1, is: 6},
	{at: 1.4, is: 8}
	]);

	assertAttributeInterpolation({
	property: 'ry',
	underlying: '3',
	from: '1',
	fromComposite: 'replace',
	to: '3',
	toComposite: 'add'
	}, [
	{at: -0.4, is: 0},
	{at: 0, is: 1},
	{at: 0.2, is: 2},
	{at: 0.6, is: 4},
	{at: 1, is: 6},
	{at: 1.4, is: 8}
	]);

	assertAttributeInterpolation({
	property: 'ry',
	underlying: '1',
	from: neutralKeyframe,
	to: '6',
	toComposite: 'replace'
	}, [
	{at: -0.4, is: 0},
	{at: 0, is: 1},
	{at: 0.2, is: 2},
	{at: 0.6, is: 4},
	{at: 1, is: 6},
	{at: 1.4, is: 8}
	]);
	</script>
	</body>
	</html>