custom-angle-list-type-interpolation.html

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

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

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

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

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

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

assertInterpolation({
  property: '--angle-list',
  from: '0deg 0grad',
  to: '1turn 400grad',
}, [
  {at: -0.3, is: '-108deg -108deg'},
  {at: 0, is: '0deg 0deg'},
  {at: 0.5, is: '180deg 180deg'},
  {at: 1, is: '360deg 360deg'},
  {at: 1.5, is: '540deg 540deg'}
]);

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

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

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

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