custom-list-type-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  --length-list-comma: 30px, 300px;
}
.target {
  --length-list-comma: 40px, 400px;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>

// This file verifies correct interpolation behavior for the "list aspect" of
// custom property lists. The type of the values contained in the list are
// assumed to not matter, hence <length> was chosen here arbitrarily.

CSS.registerProperty({
  name: '--length-list-comma',
  syntax: '<length>#',
  initialValue: '40px, 20px',
  inherits: false
});

CSS.registerProperty({
  name: '--length-list-space',
  syntax: '<length>+',
  initialValue: '40px 20px',
  inherits: false
});

// Verify that a property registered as a comma-separated list produces
// comma-separated values.

assertInterpolation({
  property: '--length-list-comma',
  from: '0px, 0px',
  to: '10px, 100px',
}, [
  {at: -0.3, is: '-3px, -30px'},
  {at: 0, is: '0px, 0px'},
  {at: 0.5, is: '5px, 50px'},
  {at: 1, is: '10px, 100px'},
  {at: 1.5, is: '15px, 150px'}
]);

// Verify that a property registered as a space-separated list produces
// space-separated values.

assertInterpolation({
  property: '--length-list-space',
  from: '0px 0px',
  to: '10px 100px',
}, [
  {at: -0.3, is: '-3px -30px'},
  {at: 0, is: '0px 0px'},
  {at: 0.5, is: '5px 50px'},
  {at: 1, is: '10px 100px'},
  {at: 1.5, is: '15px 150px'}
]);

// Verify that lists of different lengths don't interpolate:

assertNoInterpolation({
  property: '--length-list-comma',
  from: '0px',
  to: '10px, 100px'
});

assertNoInterpolation({
  property: '--length-list-comma',
  from: 'initial',
  to: '10px'
});

assertNoInterpolation({
  property: '--length-list-comma',
  from: 'unset',
  to: '10px'
});

assertNoInterpolation({
  property: '--length-list-comma',
  from: 'inherit',
  to: '10px'
});

// Verify that lists of different lengths don't interpolate:

assertNoInterpolation({
  property: '--length-list-comma',
  from: neutralKeyframe,
  to: '10px, 100px, 1000px'
});

// Verify that attempting to composite:add to an incompatible value
// replaces that value instead.

assertComposition({
  property: '--length-list-space',
  underlying: '50px',
  addFrom: '10px 10px',
  addTo: '100px 100px',
}, [
  {at: -0.3, is: '-17px -17px'},
  {at: 0, is: '10px 10px'},
  {at: 0.3, is: '37px 37px'},
  {at: 0.5, is: '55px 55px'},
  {at: 0.7, is: '73px 73px'},
  {at: 1, is: '100px 100px'},
  {at: 1.5, is: '145px 145px'},
]);

// No interpolation between two incompatible results of a composite:

assertComposition({
  property: '--length-list-space',
  underlying: '50px 50px',
  addFrom: '10px 10px',
  addTo: '100px',
}, [
  {at: -0.3, is: '60px 60px'},
  {at: 0, is: '60px 60px'},
  {at: 0.3, is: '60px 60px'},
  {at: 0.5, is: '100px'},
  {at: 0.7, is: '100px'},
  {at: 1, is: '100px'},
  {at: 1.5, is: '100px'},
]);

assertComposition({
  property: '--length-list-space',
  underlying: '50px 50px',
  addFrom: '10px 10px',
  replaceTo: '100px',
}, [
  {at: -0.3, is: '60px 60px'},
  {at: 0, is: '60px 60px'},
  {at: 0.3, is: '60px 60px'},
  {at: 0.5, is: '100px'},
  {at: 0.7, is: '100px'},
  {at: 1, is: '100px'},
  {at: 1.5, is: '100px'},
]);

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