border-image-source-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>border-image-source interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-source">
<meta name="assert" content="border-image-source has discrete animation">

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>

<style>
.parent {
  border-image-source: url(../support/green.png);
}
.target {
  width: 50px;
  height: 50px;
  background-color: black;
  display: inline-block;
  border: 5px solid aqua;
  border-image-source: url(../support/blue_color.png);
  border-image-slice: 10%;
}
.expected {
  background-color: green;
  margin-right: 2px;
}
</style>

<body></body>

<script>
// initial
test_no_interpolation({
  property: 'border-image-source',
  from: 'initial',
  to: 'url(../support/orange_color.png)',
});

// inherit
test_no_interpolation({
  property: 'border-image-source',
  from: 'inherit',
  to: 'url(../support/orange_color.png)',
});

// unset
test_no_interpolation({
  property: 'border-image-source',
  from: 'unset',
  to: 'url(../support/orange_color.png)',
});

// None to image
test_no_interpolation({
  property: 'border-image-source',
  from: 'none',
  to: 'url(../support/orange_color.png)',
});

// Image to image
test_no_interpolation({
  property: 'border-image-source',
  from: 'url(../support/aqua_color.png)',
  to: 'url(../support/orange_color.png)',
});

// Image to gradient
test_no_interpolation({
  property: 'border-image-source',
  from: 'url(../support/aqua_color.png)',
  to: 'linear-gradient(45deg, blue, orange)',
});

// Gradient to gradient
test_no_interpolation({
  property: 'border-image-source',
  from: 'linear-gradient(-45deg, red, yellow)',
  to: 'linear-gradient(45deg, blue, orange)',
});
</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/border-image-source-interpolation.html
