webkit-column-count-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  -webkit-column-count: 1;
}
.target {
  width: 300px;
  height: 80px;
  background-color: black;
  display: inline-block;
  margin: 18px;
  color: orange;
  overflow: hidden;
  -webkit-column-count: 9;
}
.expected {
  background-color: green;
}
</style>
<body>
<template id="target-template">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: '-webkit-column-count',
  from: neutralKeyframe,
  to: '5',
}, [
  {at: -0.4, is: '11'},
  {at: -0.2, is: '10'},
  {at: 0, is: '9'},
  {at: 0.2, is: '8'},
  {at: 0.4, is: '7'},
  {at: 0.6, is: '7'},
  {at: 0.8, is: '6'},
  {at: 1, is: '5'},
  {at: 1.2, is: '4'},
]);

assertNoInterpolation({
  property: '-webkit-column-count',
  from: 'initial',
  to: '5',
});

assertInterpolation({
  property: '-webkit-column-count',
  from: 'inherit',
  to: '5',
}, [
  {at: -0.4, is: '1'},
  {at: -0.2, is: '1'},
  {at: 0, is: '1'},
  {at: 0.2, is: '2'},
  {at: 0.4, is: '3'},
  {at: 0.6, is: '3'},
  {at: 0.8, is: '4'},
  {at: 1, is: '5'},
  {at: 1.2, is: '6'},
]);

assertNoInterpolation({
  property: '-webkit-column-count',
  from: 'unset',
  to: '5',
});

assertNoInterpolation({
  property: '-webkit-column-count',
  from: 'auto',
  to: '5'
});

assertInterpolation({
  property: '-webkit-column-count',
  from: '1',
  to: '6'
}, [
  {at: -0.4, is: '1'}, // Must be strictly positive
  {at: -0.2, is: '1'}, // Must be strictly positive
  {at: 0, is: '1'},
  {at: 0.2, is: '2'},
  {at: 0.4, is: '3'},
  {at: 0.6, is: '4'},
  {at: 0.8, is: '5'},
  {at: 1, is: '6'},
  {at: 1.2, is: '7'}
]);

// Zero is an invalid value, so this is equivalent to animating from 'auto' to
// 5.
assertInterpolation({
  property: '-webkit-column-count',
  from: '1',
  to: '5'
}, [
  {at: -0.5, is: '1'}, // Must be strictly positive
  {at: -0.25, is: '1'}, // Must be strictly positive
  {at: 0, is: '1'},
  {at: 0.25, is: '2'},
  {at: 0.5, is: '3'},
  {at: 0.75, is: '4'},
  {at: 1, is: '5'},
  {at: 1.25, is: '6'}
]);
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/webkit-column-count-interpolation.html
