svg-stroke-dasharray-interpolation-001.html

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.container {
  display: inline-block;
}
.parent {
  stroke-dasharray: 30 10;
}
.target {
  font-size: 16px;
  stroke: black;
  stroke-width: 10px;
  stroke-dasharray: 10 30;
}
.expected {
  stroke: green;
}
</style>
<body>
<template id="target-template">
  <svg height="400" width="5">
    <path d="M0,0 l0,400" class="target">
  </svg>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: 'stroke-dasharray',
  from: neutralKeyframe,
  to: '20 20',
}, [
  {at: -0.6, is: '4px, 36px'},
  {at: -0.4, is: '6px, 34px'},
  {at: -0.2, is: '8px, 32px'},
  {at: 0, is: '10px, 30px'},
  {at: 0.2, is: '12px, 28px'},
  {at: 0.4, is: '14px, 26px'},
  {at: 0.6, is: '16px, 24px'},
  {at: 0.8, is: '18px, 22px'},
  {at: 1, is: '20px, 20px'},
  {at: 1.2, is: '22px, 18px'},
]);

assertNoInterpolation({
  property: 'stroke-dasharray',
  from: 'initial',
  to: '20 20',
});

assertInterpolation({
  property: 'stroke-dasharray',
  from: 'inherit',
  to: '20 20',
}, [
  {at: -0.6, is: '36px, 4px'},
  {at: -0.4, is: '34px, 6px'},
  {at: -0.2, is: '32px, 8px'},
  {at: 0, is: '30px, 10px'},
  {at: 0.2, is: '28px, 12px'},
  {at: 0.4, is: '26px, 14px'},
  {at: 0.6, is: '24px, 16px'},
  {at: 0.8, is: '22px, 18px'},
  {at: 1, is: '20px, 20px'},
  {at: 1.2, is: '18px, 22px'},
]);

assertInterpolation({
  property: 'stroke-dasharray',
  from: 'unset',
  to: '20 20',
}, [
  {at: -0.6, is: '36px, 4px'},
  {at: -0.4, is: '34px, 6px'},
  {at: -0.2, is: '32px, 8px'},
  {at: 0, is: '30px, 10px'},
  {at: 0.2, is: '28px, 12px'},
  {at: 0.4, is: '26px, 14px'},
  {at: 0.6, is: '24px, 16px'},
  {at: 0.8, is: '22px, 18px'},
  {at: 1, is: '20px, 20px'},
  {at: 1.2, is: '18px, 22px'},
]);

// Basic case
assertInterpolation({
  property: 'stroke-dasharray',
  from: '5 10',
  to: '15 20'
}, [
  {at: -0.6, is: ' 0  4'}, // Values must be non-negative.
  {at: -0.4, is: ' 1  6'},
  {at: -0.2, is: ' 3  8'},
  {at:  0,   is: ' 5 10'},
  {at:  0.2, is: ' 7 12'},
  {at:  0.4, is: ' 9 14'},
  {at:  0.6, is: '11 16'},
  {at:  0.8, is: '13 18'},
  {at:  1,   is: '15 20'},
  {at:  1.2, is: '17 22'},
]);

// Zero value
assertInterpolation({
  property: 'stroke-dasharray',
  from: '0 0',
  to: '5 10'
}, [
  {at: -0.2, is: ' 0  0'}, // Values must be non-negative.
  {at:  0,   is: ' 0  0'},
  {at:  0.2, is: ' 1  2'},
  {at:  0.4, is: ' 2  4'},
  {at:  0.6, is: ' 3  6'},
  {at:  0.8, is: ' 4  8'},
  {at:  1.0, is: ' 5 10'},
  {at:  1.2, is: ' 6 12'},
]);

// From none
assertNoInterpolation({
  property: 'stroke-dasharray',
  from: 'none',
  to: '5 10'
});

assertNoInterpolation({
  property: 'stroke-dasharray',
  from: 'none',
  to: '5em 10em'
});

// To none
assertNoInterpolation({
  property: 'stroke-dasharray',
  from: '5 10',
  to: 'none'
});

// Both none
assertNoInterpolation({
  property: 'stroke-dasharray',
  from: 'none',
  to: 'none'
});
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/svg-stroke-dasharray-interpolation-001.html
