text-decoration-color-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.container {
  display: inline-block;
}
.parent {
  text-decoration-color: blue;
}
.target {
  font-size: 40px;
  color: black;
  text-decoration-line: underline;
  -webkit-text-fill-color: steelblue;
  text-decoration-color: orange;
}
.expected {
  color: green;
  margin-right: 10px;
}
</style>
<body>
<template id="target-template">
  <span>Target</span>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: 'text-decoration-color',
  from: neutralKeyframe,
  to: 'green',
}, [
  {at: -5, is: 'rgb(255, 255, 0)'},
  {at: -0.4, is: 'rgb(255, 180, 0)'},
  {at: 0, is: 'rgb(255, 165, 0)'},
  {at: 0.2, is: 'rgb(204, 158, 0)'},
  {at: 0.6, is: 'rgb(102, 143, 0)'},
  {at: 1, is: 'rgb(0, 128, 0)'},
  {at: 1.5, is: 'rgb(0, 110, 0)'},
]);

assertInterpolation({
  property: 'text-decoration-color',
  from: 'initial',
  to: 'green',
}, [
  {at: -5, is: 'rgb(255, 140, 255)'},
  {at: -0.4, is: 'rgb(98, 131, 252)'},
  {at: 0, is: 'rgb(70, 130, 180)'},
  {at: 0.2, is: 'rgb(56, 130, 144)'},
  {at: 0.6, is: 'rgb(28, 129, 72)'},
  {at: 1, is: 'rgb(0, 128, 0)'},
  {at: 1.5, is: 'rgb(0, 127, 0)'},
]);

assertInterpolation({
  property: 'text-decoration-color',
  from: 'inherit',
  to: 'green',
}, [
  {at: -5, is: 'rgb(0, 0, 255)'},
  {at: -0.4, is: 'rgb(0, 0, 255)'},
  {at: 0, is: 'rgb(0, 0, 255)'},
  {at: 0.2, is: 'rgb(0, 26, 204)'},
  {at: 0.6, is: 'rgb(0, 77, 102)'},
  {at: 1, is: 'rgb(0, 128, 0)'},
  {at: 1.5, is: 'rgb(0, 192, 0)'},
]);

assertInterpolation({
  property: 'text-decoration-color',
  from: 'unset',
  to: 'green',
}, [
  {at: -5, is: 'rgb(255, 140, 255)'},
  {at: -0.4, is: 'rgb(98, 131, 252)'},
  {at: 0, is: 'rgb(70, 130, 180)'},
  {at: 0.2, is: 'rgb(56, 130, 144)'},
  {at: 0.6, is: 'rgb(28, 129, 72)'},
  {at: 1, is: 'rgb(0, 128, 0)'},
  {at: 1.5, is: 'rgb(0, 127, 0)'},
]);

assertInterpolation({
  property: 'text-decoration-color',
  from: 'orange',
  to: 'blue'
}, [
  {at: -5, is: '#ffff00'},
  {at: -0.4, is: '#ffe700'},
  {at: 0, is: 'orange'}, // ffa500
  {at: 0.2, is: '#cc8433'},
  {at: 0.6, is: '#664299'},
  {at: 1, is: 'blue'}, // 0000ff
  {at: 1.5, is: 'blue'}
]);

assertInterpolation({
  property: 'text-decoration-color',
  from: 'currentColor',
  to: 'red'
}, [
  {at: -5, is: '#00ffff'},
  {at: -0.4, is: '#00b6fc'},
  {at: 0, is: 'steelblue'}, // 4682b4
  {at: 0.2, is: '#6B6890'},
  {at: 0.6, is: '#b53448'},
  {at: 1, is: 'red'}, // ff0000
  {at: 1.5, is: 'red'}
]);
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/text-decoration-color-interpolation.html
