custom-length-percentage-list-type-interpolation.html

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

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

assertInterpolation({
  property: '--length-percentage-list',
  from: 'inherit',
  to: '20px 200%',
}, [
  {at: -0.3, is: 'calc(39% + -6px) calc(-60% + 390px)'},
  {at: 0, is: '30% calc(0% + 300px)'},
  {at: 0.5, is: 'calc(15% + 10px) calc(100% + 150px)'},
  {at: 1, is: 'calc(0% + 20px) 200%'},
  {at: 1.5, is: 'calc(-15% + 30px) calc(300% + -150px)'},
]);

assertInterpolation({
  property: '--length-percentage-list',
  from: 'unset',
  to: 'calc(100px + 120%) calc(100px + 120%)',
}, [
  {at: -0.3, is: 'calc(16% + -30px) calc(-36% + 490px)'},
  {at: 0, is: '40% calc(0% + 400px)'},
  {at: 0.5, is: 'calc(80% + 50px) calc(60% + 250px)'},
  {at: 1, is: 'calc(120% + 100px) calc(120% + 100px)'},
  {at: 1.5, is: 'calc(160% + 150px) calc(180% + -50px)'},
]);

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

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

assertInterpolation({
  property: '--length-percentage-list',
  from: '0px',
  to: 'calc(100px + 100%)',
}, [
  {at: -0.3, is: 'calc(-30% + -30px)'},
  {at: 0, is: 'calc(0% + 0px)'},
  {at: 0.5, is: 'calc(50% + 50px)'},
  {at: 1, is: 'calc(100% + 100px)'},
  {at: 1.5, is: 'calc(150% + 150px)'}
]);

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

assertComposition({
  property: '--length-percentage-list',
  underlying: '50px 60%',
  addFrom: '10% 140px',
  addTo: '110% 40px',
}, [
  {at: -0.3, is: 'calc(50px - 20%) calc(170px + 60%)'},
  {at: 0, is: 'calc(50px + 10%) calc(140px + 60%)'},
  {at: 0.5, is: 'calc(50px + 60%) calc(90px + 60%)'},
  {at: 1, is: 'calc(50px + 110%) calc(40px + 60%)'},
  {at: 1.5, is: 'calc(50px + 160%) calc(-10px + 60%)'},
]);

assertComposition({
  property: '--length-percentage-list',
  underlying: '50px 60%',
  addFrom: '10% 140px',
  replaceTo: '110% 40px',
}, [
  {at: -0.3, is: 'calc(65px - 20%) calc(170px + 78%)'},
  {at: 0, is: 'calc(50px + 10%) calc(140px + 60%)'},
  {at: 0.5, is: 'calc(25px + 60%) calc(90px + 30%)'},
  {at: 1, is: '110% calc(40px + 0%)'},
  {at: 1.5, is: 'calc(-25px + 160%) calc(-10px - 30%)'},
]);

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