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

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../resources/ahem.js"></script>
 <style>
 :root {
   font: 10px Ahem;
 }
 </style>
 </head>
 <body>
 <template id="target-template">
 <svg width="200px" height="300px" viewBox="0 0 1500 1000">
   <rect class="target" x="10" y="10" width="10" height="10" />
 </svg>
 </template>
 <script src="resources/interpolation-test.js"></script>
 <script>
 'use strict';
 assertAttributeInterpolation({
   property: 'height',
   from: '10',
   to: '60'
 }, [
   {at: -0.4, is: 0},
   {at: 0, is: 10},
   {at: 0.2, is: 20},
   {at: 0.6, is: 40},
   {at: 1, is: 60},
   {at: 1.4, is: 80}
 ]);
 assertAttributeInterpolation({
   property: 'height',
   from: '10%',
   to: '60%'
 }, [
   {at: -0.4, is: '0%'},
   {at: 0, is: '10%'},
   {at: 0.2, is: '20%'},
   {at: 0.6, is: '40%'},
   {at: 1, is: '60%'},
   {at: 1.4, is: '80%'}
 ]);
 assertAttributeInterpolation({
   property: 'height',
   from: '10em',
   to: '60em'
 }, [
   {at: -0.4, is: '0em'},
   {at: 0, is: '10em'},
   {at: 0.2, is: '20em'},
   {at: 0.6, is: '40em'},
   {at: 1, is: '60em'},
   {at: 1.4, is: '80em'}
 ]);
 assertAttributeInterpolation({
   property: 'height',
   from: '10ex',
   to: '60ex'
 }, [
   {at: -0.4, is: '0ex'},
   {at: 0, is: '10ex'},
   {at: 0.2, is: '20ex'},
   {at: 0.6, is: '40ex'},
   {at: 1, is: '60ex'},
   {at: 1.4, is: '80ex'}
 ]);
 assertAttributeInterpolation({
   property: 'height',
   from: '10rem',
   to: '60rem'
 }, [
   {at: -0.4, is: '0rem'},
   {at: 0, is: '10rem'},
   {at: 0.2, is: '20rem'},
   {at: 0.6, is: '40rem'},
   {at: 1, is: '60rem'},
   {at: 1.4, is: '80rem'}
 ]);
 assertAttributeInterpolation({
   property: 'height',
   from: '10mm',
   to: '20px'
 }, [
   {at: -0.4, is: '44.913387298583984'},
   {at: 0, is: '10mm'},
   {at: 0.2, is: '34.23622131347656'},
   {at: 0.6, is: '27.11811065673828'},
   {at: 1, is: '20px'},
   {at: 1.4, is: '12.881889343261719'}
 ]);
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../resources/ahem.js"></script>
	<style>
	:root {
	font: 10px Ahem;
	}
	</style>
	</head>
	<body>
	<template id="target-template">
	<svg width="200px" height="300px" viewBox="0 0 1500 1000">
	<rect class="target" x="10" y="10" width="10" height="10" />
	</svg>
	</template>
	<script src="resources/interpolation-test.js"></script>
	<script>
	'use strict';
	assertAttributeInterpolation({
	property: 'height',
	from: '10',
	to: '60'
	}, [
	{at: -0.4, is: 0},
	{at: 0, is: 10},
	{at: 0.2, is: 20},
	{at: 0.6, is: 40},
	{at: 1, is: 60},
	{at: 1.4, is: 80}
	]);
	assertAttributeInterpolation({
	property: 'height',
	from: '10%',
	to: '60%'
	}, [
	{at: -0.4, is: '0%'},
	{at: 0, is: '10%'},
	{at: 0.2, is: '20%'},
	{at: 0.6, is: '40%'},
	{at: 1, is: '60%'},
	{at: 1.4, is: '80%'}
	]);
	assertAttributeInterpolation({
	property: 'height',
	from: '10em',
	to: '60em'
	}, [
	{at: -0.4, is: '0em'},
	{at: 0, is: '10em'},
	{at: 0.2, is: '20em'},
	{at: 0.6, is: '40em'},
	{at: 1, is: '60em'},
	{at: 1.4, is: '80em'}
	]);
	assertAttributeInterpolation({
	property: 'height',
	from: '10ex',
	to: '60ex'
	}, [
	{at: -0.4, is: '0ex'},
	{at: 0, is: '10ex'},
	{at: 0.2, is: '20ex'},
	{at: 0.6, is: '40ex'},
	{at: 1, is: '60ex'},
	{at: 1.4, is: '80ex'}
	]);
	assertAttributeInterpolation({
	property: 'height',
	from: '10rem',
	to: '60rem'
	}, [
	{at: -0.4, is: '0rem'},
	{at: 0, is: '10rem'},
	{at: 0.2, is: '20rem'},
	{at: 0.6, is: '40rem'},
	{at: 1, is: '60rem'},
	{at: 1.4, is: '80rem'}
	]);
	assertAttributeInterpolation({
	property: 'height',
	from: '10mm',
	to: '20px'
	}, [
	{at: -0.4, is: '44.913387298583984'},
	{at: 0, is: '10mm'},
	{at: 0.2, is: '34.23622131347656'},
	{at: 0.6, is: '27.11811065673828'},
	{at: 1, is: '20px'},
	{at: 1.4, is: '12.881889343261719'}
	]);
	</script>
	</body>
	</html>