<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  -webkit-mask-box-image-slice: 30%;
}
.target {
  width: 50px;
  height: 50px;
  background-color: black;
  display: inline-block;
  border: 25px;
  -webkit-mask-box-image-source: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  -webkit-mask-box-image-slice: 10%;
}
.expected {
  background-color: green;
  margin-right: 2px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: neutralKeyframe,
  to: '20%',
}, [
  {at: -0.3, is: '7%'},
  {at: 0, is: '10%'},
  {at: 0.4, is: '14%'},
  {at: 0.6, is: '16%'},
  {at: 1, is: '20%'},
  {at: 1.5, is: '25%'},
  {at: 10, is: '110%'},
]);

assertNoInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: 'initial',
  to: '20%',
});

assertInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: 'inherit',
  to: '20%',
}, [
  {at: -0.3, is: '33%'},
  {at: 0, is: '30%'},
  {at: 0.4, is: '26%'},
  {at: 0.6, is: '24%'},
  {at: 1, is: '20%'},
  {at: 1.5, is: '15%'},
  {at: 10, is: '0%'},
]);

assertNoInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: 'unset',
  to: '20%',
});


assertInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: '0%',
  to: '50%',
}, [
  {at: -0.3, is: '0%'}, // CSS -webkit-mask-box-image-slice can't be negative.
  {at: 0, is: '0%'},
  {at: 0.4, is: '20%'},
  {at: 0.6, is: '30%'},
  {at: 1, is: '50%'},
  {at: 1.5, is: '75%'},
  {at: 10, is: '500%'},
]);

assertNoInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: '0%',
  to: '50% fill',
});

assertInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: '0% 10 20% 30 fill',
  to: '40% 50 60% 70 fill',
}, [
  {at: -0.5, is: '0% 0 0% 10 fill'}, // CSS -webkit-mask-box-image-slice can't be negative.
  {at: 0, is: '0% 10 20% 30 fill'},
  {at: 0.3, is: '12% 22 32% 42 fill'},
  {at: 0.5, is: '20% 30 40% 50 fill'},
  {at: 0.6, is: '24% 34 44% 54 fill'},
  {at: 1, is: '40% 50 60% 70 fill'},
  {at: 1.5, is: '60% 70 80% 90 fill'},
]);

assertNoInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: '0% 10 20% 30 fill',
  to: '40% 50 60% 70',
});

assertNoInterpolation({
  property: '-webkit-mask-box-image-slice',
  from: '0% 10 20 30 fill',
  to: '40 50 60% 70',
});
</script>
</body>