webkit-mask-size-interpolation.html

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
  -webkit-mask-size: 300px 300px;
}
.target {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: black;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url(../resources/blue-100.png),
                      url(../resources/stripes-100.png),
                      url(../resources/stripes-100.png),
                      url(../resources/green-100.png);
  -webkit-mask-position: 20% 20%, 20% 80%, 80% 20%, 80% 80%;
  -webkit-mask-size: 100px 100px;
  margin-bottom: 100px;
}
.expected {
  background-color: green;
  margin-right: 100px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
  property: '-webkit-mask-size',
  from: neutralKeyframe,
  to: '200px 250px',
}, [
  {at: -0.25, is: '75px 62.5px, 75px 62.5px, 75px 62.5px, 75px 62.5px'},
  {at: 0, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
  {at: 0.25, is: '125px 137.5px, 125px 137.5px, 125px 137.5px, 125px 137.5px'},
  {at: 0.5, is: '150px 175px, 150px 175px, 150px 175px, 150px 175px'},
  {at: 0.75, is: '175px 212.5px, 175px 212.5px, 175px 212.5px, 175px 212.5px'},
  {at: 1, is: '200px 250px, 200px 250px, 200px 250px, 200px 250px'},
  {at: 1.25, is: '225px 287.5px, 225px 287.5px, 225px 287.5px, 225px 287.5px'},
]);

assertNoInterpolation({
  property: '-webkit-mask-size',
  from: 'initial',
  to: '200px 250px',
});

assertInterpolation({
  property: '-webkit-mask-size',
  from: 'inherit',
  to: '200px 250px',
}, [
  {at: -0.25, is: '325px 312.5px, 325px 312.5px, 325px 312.5px, 325px 312.5px'},
  {at: 0, is: '300px 300px, 300px 300px, 300px 300px, 300px 300px'},
  {at: 0.25, is: '275px 287.5px, 275px 287.5px, 275px 287.5px, 275px 287.5px'},
  {at: 0.5, is: '250px 275px, 250px 275px, 250px 275px, 250px 275px'},
  {at: 0.75, is: '225px 262.5px, 225px 262.5px, 225px 262.5px, 225px 262.5px'},
  {at: 1, is: '200px 250px, 200px 250px, 200px 250px, 200px 250px'},
  {at: 1.25, is: '175px 237.5px, 175px 237.5px, 175px 237.5px, 175px 237.5px'},
]);

assertNoInterpolation({
  property: '-webkit-mask-size',
  from: 'unset',
  to: '200px 250px',
});

// Matched keywords in size value list.
assertInterpolation({
  property: '-webkit-mask-size',
  from: '0px 0px, 0px 0px, contain, cover',
  to: '40px 40px, 40px 40px, contain, cover',
}, [
  {at: -0.25, is: ' 0px  0px,  0px  0px, contain, cover'},
  {at: 0, is:     ' 0px  0px,  0px  0px, contain, cover'},
  {at: 0.25, is:  '10px 10px, 10px 10px, contain, cover'},
  {at: 0.5, is:   '20px 20px, 20px 20px, contain, cover'},
  {at: 0.75, is:  '30px 30px, 30px 30px, contain, cover'},
  {at: 1, is:     '40px 40px, 40px 40px, contain, cover'},
  {at: 1.25, is:  '50px 50px, 50px 50px, contain, cover'},
]);

// Mismatched keywords in size value list.
assertNoInterpolation({
  property: '-webkit-mask-size',
  from: '0px 0px, 0px 0px, contain, cover',
  to: '20px 20px, 20px 20px, cover, contain',
});

// Equal number of size values as mask images.
assertInterpolation({
  property: '-webkit-mask-size',
  from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
  to: '20px 20px, 40px 40px, 60px 60px, 100px 100px',
}, [
  {at: -0.25, is: ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
  {at: 0, is:     ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
  {at: 0.25, is:  ' 5px  5px, 10px 10px, 15px 15px,  25px  25px'},
  {at: 0.5, is:   '10px 10px, 20px 20px, 30px 30px,  50px  50px'},
  {at: 0.75, is:  '15px 15px, 30px 30px, 45px 45px,  75px  75px'},
  {at: 1, is:     '20px 20px, 40px 40px, 60px 60px, 100px 100px'},
  {at: 1.25, is:  '25px 25px, 50px 50px, 75px 75px, 125px 125px'},
]);

// Single size value repeated over mask images.
assertInterpolation({
  property: '-webkit-mask-size',
  from: '0px 0px',
  to: '80px 80px',
}, [
  {at: -0.25, is: '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
  {at: 0, is:     '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
  {at: 0.25, is:  ' 20px  20px,  20px  20px,  20px  20px,  20px  20px'},
  {at: 0.5, is:   ' 40px  40px,  40px  40px,  40px  40px,  40px  40px'},
  {at: 0.75, is:  ' 60px  60px,  60px  60px,  60px  60px,  60px  60px'},
  {at: 1, is:     ' 80px  80px,  80px  80px,  80px  80px,  80px  80px'},
  {at: 1.25, is:  '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
]);

// Mismatched numbers of size values.
assertInterpolation({
  property: '-webkit-mask-size',
  from: '0px 0px, 80px 0px',
  to: '40px 40px, 80px 80px, 0px 80px',
}, [
  {at: -0.25, is: ' 0px  0px, 80px   0px, 0px   0px, 90px  0px'},
  {at: 0, is:     ' 0px  0px, 80px   0px, 0px   0px, 80px  0px'},
  {at: 0.25, is:  '10px 10px, 80px  20px, 0px  20px, 70px 10px'},
  {at: 0.5, is:   '20px 20px, 80px  40px, 0px  40px, 60px 20px'},
  {at: 0.75, is:  '30px 30px, 80px  60px, 0px  60px, 50px 30px'},
  {at: 1, is:     '40px 40px, 80px  80px, 0px  80px, 40px 40px'},
  {at: 1.25, is:  '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
]);
</script>
</body>
chromium/third_party/blink/web_tests/animations/interpolation/webkit-mask-size-interpolation.html
