svg-width-interpolation.html | Explore in Territory

<!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: 'width',
  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: 'width',
  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: 'width',
  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: 'width',
  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: 'width',
  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: 'width',
  from: '10in',
  to: '20rem'
}, [
  {at: -0.4, is: '1264'},
  {at: 0, is: '10in'},
  {at: 0.2, is: '808'},
  {at: 0.6, is: '504'},
  {at: 1, is: '20rem'},
  {at: 1.4, is: '0'}
]);
assertAttributeInterpolation({
  property: 'width',
  from: '1vw',
  to: '6vw'
}, [
  {at: -0.4, is: '0vw'},
  {at: 0, is: '1vw'},
  {at: 0.2, is: '2vw'},
  {at: 0.6, is: '4vw'},
  {at: 1, is: '6vw'},
  {at: 1.4, is: '8vw'}
]);
assertAttributeInterpolation({
  property: 'width',
  from: '1vh',
  to: '6vh'
}, [
  {at: -0.4, is: '0vh'},
  {at: 0, is: '1vh'},
  {at: 0.2, is: '2vh'},
  {at: 0.6, is: '4vh'},
  {at: 1, is: '6vh'},
  {at: 1.4, is: '8vh'}
]);
assertAttributeInterpolation({
  property: 'width',
  from: '1vmin',
  to: '6vmin'
}, [
  {at: -0.4, is: '0vmin'},
  {at: 0, is: '1vmin'},
  {at: 0.2, is: '2vmin'},
  {at: 0.6, is: '4vmin'},
  {at: 1, is: '6vmin'},
  {at: 1.4, is: '8vmin'}
]);
assertAttributeInterpolation({
  property: 'width',
  from: '1vmax',
  to: '6vmax'
}, [
  {at: -0.4, is: '0vmax'},
  {at: 0, is: '1vmax'},
  {at: 0.2, is: '2vmax'},
  {at: 0.6, is: '4vmax'},
  {at: 1, is: '6vmax'},
  {at: 1.4, is: '8vmax'}
]);
assertAttributeInterpolation({
  property: 'width',
  from: '10vh',
  to: '20vw'
}, [
  {at: -0.4, is: '20'},
  {at: 0, is: '10vh'},
  {at: 0.2, is: '80'},
  {at: 0.6, is: '120'},
  {at: 1, is: '20vw'},
  {at: 1.4, is: '200'}
]);
assertAttributeInterpolation({
  property: 'width',
  from: '10vmin',
  to: '20vmax'
}, [
  {at: -0.4, is: '20'},
  {at: 0, is: '10vmin'},
  {at: 0.2, is: '80'},
  {at: 0.6, is: '120'},
  {at: 1, is: '20vmax'},
  {at: 1.4, is: '200'}
]);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/svg-attribute-interpolation/svg-width-interpolation.html
