third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-position-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .container {
   5   display: inline-block;
   6   border: 2px solid black;
   7 }
   8 .parent {
   9   -webkit-mask-position: 30px 10px;
  10 }
  11 .target {
  12   width: 120px;
  13   height: 120px;
  14   background-image: url(../resources/stripes-100.png), url(../resources/blue-100.png);
  15   -webkit-mask-image: radial-gradient(20px circle at 20px 20px, black 18px, transparent),
  16                       radial-gradient(20px circle at 20px 20px, black 18px, transparent),
  17                       radial-gradient(20px circle at 20px 20px, black 18px, transparent),
  18                       radial-gradient(20px circle at 20px 20px, black 18px, transparent);
  19   -webkit-mask-position: 10px 30px;
  20 }
  21 </style>
  22 <body>
  23 <template id="target-template">
  24   <div class="container">
  25     <div class="target"></div>
  26   </div>
  27 </template>
  28 <script src="resources/interpolation-test.js"></script>
  29 <script>
  30 // neutral
  31 assertInterpolation({
  32   property: '-webkit-mask-position',
  33   from: '',
  34   to: '20px 20px',
  35 }, [
  36   {at: -0.25, is: '7.5px 32.5px, 7.5px 32.5px, 7.5px 32.5px, 7.5px 32.5px'},
  37   {at: 0, is: '10px 30px, 10px 30px, 10px 30px, 10px 30px'},
  38   {at: 0.25, is: '12.5px 27.5px, 12.5px 27.5px, 12.5px 27.5px, 12.5px 27.5px'},
  39   {at: 0.5, is: '15px 25px, 15px 25px, 15px 25px, 15px 25px'},
  40   {at: 0.75, is: '17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px'},
  41   {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
  42   {at: 1.25, is: '22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px'},
  43 ]);
  44
  45 // initial
  46 assertInterpolation({
  47   property: '-webkit-mask-position',
  48   from: 'initial',
  49   to: '20px 20px',
  50 }, [
  51   {at: -0.25, is: '-5px -5px, -5px -5px, -5px -5px, -5px -5px'},
  52   {at: 0, is: '0% 0%, 0% 0%, 0% 0%, 0% 0%'},
  53   {at: 0.25, is: '5px 5px, 5px 5px, 5px 5px, 5px 5px'},
  54   {at: 0.5, is: '10px 10px, 10px 10px, 10px 10px, 10px 10px'},
  55   {at: 0.75, is: '15px 15px, 15px 15px, 15px 15px, 15px 15px'},
  56   {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
  57   {at: 1.25, is: '25px 25px, 25px 25px, 25px 25px, 25px 25px'},
  58 ]);
  59
  60 // inherit
  61 assertInterpolation({
  62   property: '-webkit-mask-position',
  63   from: 'inherit',
  64   to: '20px 20px',
  65 }, [
  66   {at: -0.25, is: '32.5px 7.5px, 32.5px 7.5px, 32.5px 7.5px, 32.5px 7.5px'},
  67   {at: 0, is: '30px 10px, 30px 10px, 30px 10px, 30px 10px'},
  68   {at: 0.25, is: '27.5px 12.5px, 27.5px 12.5px, 27.5px 12.5px, 27.5px 12.5px'},
  69   {at: 0.5, is: '25px 15px, 25px 15px, 25px 15px, 25px 15px'},
  70   {at: 0.75, is: '22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px, 22.5px 17.5px'},
  71   {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
  72   {at: 1.25, is: '17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px, 17.5px 22.5px'},
  73 ]);
  74
  75 // unset
  76 assertInterpolation({
  77   property: '-webkit-mask-position',
  78   from: 'unset',
  79   to: '20px 20px',
  80 }, [
  81   {at: -0.25, is: '-5px -5px, -5px -5px, -5px -5px, -5px -5px'},
  82   {at: 0, is: '0% 0%, 0% 0%, 0% 0%, 0% 0%'},
  83   {at: 0.25, is: '5px 5px, 5px 5px, 5px 5px, 5px 5px'},
  84   {at: 0.5, is: '10px 10px, 10px 10px, 10px 10px, 10px 10px'},
  85   {at: 0.75, is: '15px 15px, 15px 15px, 15px 15px, 15px 15px'},
  86   {at: 1, is: '20px 20px, 20px 20px, 20px 20px, 20px 20px'},
  87   {at: 1.25, is: '25px 25px, 25px 25px, 25px 25px, 25px 25px'},
  88 ]);
  89
  90 // Test equal number of position values as background images.
  91 assertInterpolation({
  92   property: '-webkit-mask-position',
  93   from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
  94   to: '80px 80px, 80px 80px, 80px 80px, 80px 80px',
  95 }, [
  96   {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
  97   {at: 0, is:     '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
  98   {at: 0.25, is:  ' 20px  20px,  20px  20px,  20px  20px,  20px  20px'},
  99   {at: 0.5, is:   ' 40px  40px,  40px  40px,  40px  40px,  40px  40px'},
 100   {at: 0.75, is:  ' 60px  60px,  60px  60px,  60px  60px,  60px  60px'},
 101   {at: 1, is:     ' 80px  80px,  80px  80px,  80px  80px,  80px  80px'},
 102   {at: 1.25, is:  '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
 103 ]);
 104
 105 // Test single position value repeated over background images.
 106 assertInterpolation({
 107   property: '-webkit-mask-position',
 108   from: 'top 0px left 0px',
 109   to: 'left 80px top 80px',
 110 }, [
 111   {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'},
 112   {at: 0, is:     '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
 113   {at: 0.25, is:  ' 20px  20px,  20px  20px,  20px  20px,  20px  20px'},
 114   {at: 0.5, is:   ' 40px  40px,  40px  40px,  40px  40px,  40px  40px'},
 115   {at: 0.75, is:  ' 60px  60px,  60px  60px,  60px  60px,  60px  60px'},
 116   {at: 1, is:     ' 80px  80px,  80px  80px,  80px  80px,  80px  80px'},
 117   {at: 1.25, is:  '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
 118 ]);
 119
 120 // Test mismatched numbers of position values.
 121 assertInterpolation({
 122   property: '-webkit-mask-position',
 123   from: '0px 0px, 80px 0px',
 124   to: '40px 40px, 80px 80px, 0px 80px',
 125 }, [
 126   {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'},
 127   {at: 0, is:     '  0px   0px, 80px   0px, 0px   0px, 80px   0px'},
 128   {at: 0.25, is:  ' 10px  10px, 80px  20px, 0px  20px, 70px  10px'},
 129   {at: 0.5, is:   ' 20px  20px, 80px  40px, 0px  40px, 60px  20px'},
 130   {at: 0.75, is:  ' 30px  30px, 80px  60px, 0px  60px, 50px  30px'},
 131   {at: 1, is:     ' 40px  40px, 80px  80px, 0px  80px, 40px  40px'},
 132   {at: 1.25, is:  ' 50px  50px, 80px 100px, 0px 100px, 30px  50px'},
 133 ]);
 134 </script>
 135 </body>