list-style-image-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  list-style-image: url(../resources/blue-20.png);
}
.target {
  background-color: black;
  width: 100px;
  list-style-image: url(../resources/green-20.png);
}
.expected {
  background-color: green;
}
</style>
<body>
<template id="target-template">
  <ul>
    <li class="target"></li>
  </ul>
</template>
<script src="resources/interpolation-test.js"></script>
<script>
function assertCrossfadeInterpolation(options) {
  var fromComputed = options.fromComputed || options.from;
  assertInterpolation({
    property: 'list-style-image',
    from: options.from,
    to: options.to,
  }, [
    {at: -0.3, is: fromComputed},
    {at: 0, is: fromComputed},
    {at: 0.3, is: 'cross-fade(' + fromComputed + ' 70%, ' + options.to + ')'},
    {at: 0.5, is: 'cross-fade(' + fromComputed + ' 50%, ' + options.to + ')'},
    {at: 0.6, is: 'cross-fade(' + fromComputed + ' 40%, ' + options.to + ')'},
    {at: 1, is: options.to},
    {at: 1.5, is: options.to},
  ]);
}

assertCrossfadeInterpolation({
  from: neutralKeyframe,
  fromComputed: 'url(../resources/green-20.png)',
  to: 'url(../resources/stripes-20.png)',
});

assertNoInterpolation({
  property: 'list-style-image',
  from: 'initial',
  to: 'url(../resources/stripes-20.png)',
});

assertCrossfadeInterpolation({
  from: 'inherit',
  fromComputed: 'url(../resources/blue-20.png)',
  to: 'url(../resources/stripes-20.png)',
});

assertCrossfadeInterpolation({
  from: 'unset',
  fromComputed: 'url(../resources/blue-20.png)',
  to: 'url(../resources/stripes-20.png)',
});

// Constant image
assertCrossfadeInterpolation({
  from: 'url(../resources/stripes-20.png)',
  to: 'url(../resources/stripes-20.png)',
});

// None to image
assertNoInterpolation({
  property: 'list-style-image',
  from: 'none',
  to: 'url(../resources/stripes-20.png)',
});

// Image to image
assertCrossfadeInterpolation({
  from: 'url(../resources/green-20.png)',
  to: 'url(../resources/stripes-20.png)',
});

// Image to gradient
assertCrossfadeInterpolation({
  from: 'url(../resources/green-20.png)',
  to: 'linear-gradient(45deg, blue, orange)',
});

// Gradient to gradient
assertCrossfadeInterpolation({
  from: 'linear-gradient(-45deg, red, yellow)',
  to: 'linear-gradient(45deg, blue, orange)',
});
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/list-style-image-interpolation.html
