custom-length-list-type-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  --length-list: 30px 300px;
}
.target {
  --length-list: 10px 100px;
  font-size: 20px;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
CSS.registerProperty({
  name: '--length-list',
  syntax: '<length>+',
  initialValue: '40px 400px',
  inherits: false,
});

assertInterpolation({
  property: '--length-list',
  from: 'initial',
  to: '20px 200px',
}, [
  {at: -0.3, is: '46px 460px'},
  {at: 0, is: '40px 400px'},
  {at: 0.5, is: '30px 300px'},
  {at: 1, is: '20px 200px'},
  {at: 1.5, is: '10px 100px'},
]);

assertInterpolation({
  property: '--length-list',
  from: 'inherit',
  to: '20px 200px',
}, [
  {at: -0.3, is: '33px 330px'},
  {at: 0, is: '30px 300px'},
  {at: 0.5, is: '25px 250px'},
  {at: 1, is: '20px 200px'},
  {at: 1.5, is: '15px 150px'},
]);

assertInterpolation({
  property: '--length-list',
  from: 'unset',
  to: '20px 200px',
}, [
  {at: -0.3, is: '46px 460px'},
  {at: 0, is: '40px 400px'},
  {at: 0.5, is: '30px 300px'},
  {at: 1, is: '20px 200px'},
  {at: 1.5, is: '10px 100px'},
]);

assertInterpolation({
  property: '--length-list',
  from: '-10px -100px',
  to: '10px 100px',
}, [
  {at: -0.3, is: '-16px -160px'},
  {at: 0, is: '-10px -100px'},
  {at: 0.5, is: '0px 0px'},
  {at: 1, is: '10px 100px'},
  {at: 1.5, is: '20px 200px'}
]);

assertInterpolation({
  property: '--length-list',
  from: '10em 100em',
  to: '20em 200em',
}, [
  {at: -0.3, is: '140px 1400px'},
  {at: 0, is: '200px 2000px'},
  {at: 0.5, is: '300px 3000px'},
  {at: 1, is: '400px 4000px'},
  {at: 1.5, is: '500px 5000px'}
]);

assertInterpolation({
  property: '--length-list',
  from: '10em 100em',
  to: '100px 1000px',
}, [
  {at: -0.3, is: '230px 2300px'},
  {at: 0, is: '200px 2000px'},
  {at: 0.5, is: '150px 1500px'},
  {at: 1, is: '100px 1000px'},
  {at: 1.5, is: '50px 500px'}
]);

assertInterpolation({
  property: '--length-list',
  from: '10px',
  to: '100px',
}, [
  {at: -0.3, is: '-17px'},
  {at: 0, is: '10px'},
  {at: 0.5, is: '55px'},
  {at: 1, is: '100px'},
  {at: 1.5, is: '145px'}
]);

assertInterpolation({
  property: '--length-list',
  from: neutralKeyframe,
  to: '20px 200px',
}, [
  {at: -0.3, is: '7px 70px'},
  {at: 0, is: '10px 100px'},
  {at: 0.5, is: '15px 150px'},
  {at: 1, is: '20px 200px'},
  {at: 1.5, is: '25px 250px'},
]);

assertComposition({
  property: '--length-list',
  underlying: '50px 60px',
  addFrom: '10px 140px',
  addTo: '110px 40px',
}, [
  {at: -0.3, is: '30px 230px'},
  {at: 0, is: '60px 200px'},
  {at: 0.5, is: '110px 150px'},
  {at: 1, is: '160px 100px'},
  {at: 1.5, is: '210px 50px'},
]);

assertComposition({
  property: '--length-list',
  underlying: '50px 60px',
  addFrom: '10px 140px',
  replaceTo: '110px 40px',
}, [
  {at: -0.3, is: '45px 248px'},
  {at: 0, is: '60px 200px'},
  {at: 0.5, is: '85px 120px'},
  {at: 1, is: '110px 40px'},
  {at: 1.5, is: '135px -40px'},
]);

</script>
</body>
chromium/third_party/blink/web_tests/animations/custom-properties/custom-length-list-type-interpolation.html
