third_party/WebKit/LayoutTests/animations/interpolation/text-shadow-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   text-shadow: 30px 10px 30px orange;
   6 }
   7 .target {
   8   display: inline-block;
   9   font-size: 60pt;
  10   margin-right: 20px;
  11   margin-bottom: 30px;
  12   color: green;
  13   text-shadow: 10px 30px 10px orange;
  14 }
  15 .expected {
  16   margin-right: 40px;
  17 }
  18 </style>
  19 <body>
  20 <template id="target-template">T</template>
  21 <script src="resources/interpolation-test.js"></script>
  22 <script>
  23 assertInterpolation({
  24   property: 'text-shadow',
  25   from: '',
  26   to: '20px 20px 20px green',
  27 }, [
  28   {at: -0.3, is: 'rgb(255, 176, 0) 7px 33px 7px'},
  29   {at: 0, is: 'rgb(255, 165, 0) 10px 30px 10px'},
  30   {at: 0.3, is: 'rgb(179, 154, 0) 13px 27px 13px'},
  31   {at: 0.6, is: 'rgb(102, 143, 0) 16px 24px 16px'},
  32   {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
  33   {at: 1.5, is: 'rgb(0, 110, 0) 25px 15px 25px'},
  34 ]);
  35
  36 assertInterpolation({
  37   property: 'text-shadow',
  38   from: 'initial',
  39   to: '20px 20px 20px green',
  40 }, [
  41   {at: -0.3, is: 'rgba(0, 0, 0, 0) -6px -6px 0px'},
  42   {at: 0, is: 'none'},
  43   {at: 0.3, is: 'rgba(0, 125, 0, 0.3) 6px 6px 6px'},
  44   {at: 0.6, is: 'rgba(0, 128, 0, 0.6) 12px 12px 12px'},
  45   {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
  46   {at: 1.5, is: 'rgb(0, 192, 0) 30px 30px 30px'},
  47 ]);
  48
  49 assertInterpolation({
  50   property: 'text-shadow',
  51   from: 'inherit',
  52   to: '20px 20px 20px green',
  53 }, [
  54   {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'},
  55   {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'},
  56   {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'},
  57   {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'},
  58   {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
  59   {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'},
  60 ]);
  61
  62 assertInterpolation({
  63   property: 'text-shadow',
  64   from: 'unset',
  65   to: '20px 20px 20px green',
  66 }, [
  67   {at: -0.3, is: 'rgb(255, 176, 0) 33px 7px 33px'},
  68   {at: 0, is: 'rgb(255, 165, 0) 30px 10px 30px'},
  69   {at: 0.3, is: 'rgb(179, 154, 0) 27px 13px 27px'},
  70   {at: 0.6, is: 'rgb(102, 143, 0) 24px 16px 24px'},
  71   {at: 1, is: 'rgb(0, 128, 0) 20px 20px 20px'},
  72   {at: 1.5, is: 'rgb(0, 110, 0) 15px 25px 15px'},
  73 ]);
  74
  75 assertInterpolation({
  76   property: 'text-shadow',
  77   from: '15px 10px 5px black',
  78   to: '-15px -10px 25px orange'
  79 }, [
  80   {at: -0.3, is: '24px 16px 0px black'},
  81   {at: 0, is: '15px 10px 5px black'},
  82   {at: 0.3, is: '6px 4px 11px rgb(77, 50, 0)'},
  83   {at: 0.6, is: '-3px -2px 17px rgb(153, 99, 0)'},
  84   {at: 1, is: '-15px -10px 25px orange'},
  85   {at: 1.5, is: '-30px -20px 35px rgb(255, 248, 0)'},
  86 ]);
  87
  88 assertInterpolation({
  89   property: 'text-shadow',
  90   from: '10px 10px 10px black',
  91   to: '10px 10px 10px currentColor'
  92 }, [
  93   {at: -0.3, is: '10px 10px 10px black'},
  94   {at: 0, is: '10px 10px 10px black'},
  95   {at: 0.3, is: '10px 10px 10px rgb(0, 38, 0)'},
  96   {at: 0.6, is: '10px 10px 10px rgb(0, 77, 0)'},
  97   {at: 1, is: '10px 10px 10px green'},
  98   {at: 1.5, is: '10px 10px 10px rgb(0, 192, 0)'},
  99 ]);
 100 </script>
 101 </body>