third_party/WebKit/LayoutTests/animations/interpolation/svg-stroke-dashoffset-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .container {
   5   display: inline-block;
   6 }
   7 .parent {
   8   stroke-dashoffset: 80px;
   9 }
  10 .target {
  11   font-size: 16px;
  12   stroke: black;
  13   stroke-width: 10px;
  14   stroke-dashoffset: 20px;
  15 }
  16 .expected {
  17   stroke: green;
  18 }
  19 </style>
  20 <body>
  21 <template id="target-template">
  22   <svg height="200" width="5">
  23     <path d="M0,0 l0,200" stroke-dasharray="10,20" class="target">
  24   </svg>
  25 </template>
  26 <script src="resources/interpolation-test.js"></script>
  27 <script>
  28 assertInterpolation({
  29   property: 'stroke-dashoffset',
  30   from: '',
  31   to: '40px',
  32 }, [
  33   {at: -0.25, is: '15px'},
  34   {at: 0, is: '20px'},
  35   {at: 0.25, is: '25px'},
  36   {at: 0.5, is: '30px'},
  37   {at: 0.75, is: '35px'},
  38   {at: 1, is: '40px'},
  39   {at: 1.25, is: '45px'},
  40 ]);
  41
  42 assertInterpolation({
  43   property: 'stroke-dashoffset',
  44   from: 'initial',
  45   to: '40px',
  46 }, [
  47   {at: -0.25, is: '-10px'},
  48   {at: 0, is: '0px'},
  49   {at: 0.25, is: '10px'},
  50   {at: 0.5, is: '20px'},
  51   {at: 0.75, is: '30px'},
  52   {at: 1, is: '40px'},
  53   {at: 1.25, is: '50px'},
  54 ]);
  55
  56 assertInterpolation({
  57   property: 'stroke-dashoffset',
  58   from: 'inherit',
  59   to: '40px',
  60 }, [
  61   {at: -0.25, is: '90px'},
  62   {at: 0, is: '80px'},
  63   {at: 0.25, is: '70px'},
  64   {at: 0.5, is: '60px'},
  65   {at: 0.75, is: '50px'},
  66   {at: 1, is: '40px'},
  67   {at: 1.25, is: '30px'},
  68 ]);
  69
  70 assertInterpolation({
  71   property: 'stroke-dashoffset',
  72   from: 'unset',
  73   to: '40px',
  74 }, [
  75   {at: -0.25, is: '90px'},
  76   {at: 0, is: '80px'},
  77   {at: 0.25, is: '70px'},
  78   {at: 0.5, is: '60px'},
  79   {at: 0.75, is: '50px'},
  80   {at: 1, is: '40px'},
  81   {at: 1.25, is: '30px'},
  82 ]);
  83
  84 assertInterpolation({
  85   property: 'stroke-dashoffset',
  86   from: '-10px',
  87   to: '10px'
  88 }, [
  89   {at: -0.25, is: '-15px'},
  90   {at: 0, is: '-10px'},
  91   {at: 0.25, is: '-5px'},
  92   {at: 0.5, is: '0px'},
  93   {at: 0.75, is: '5px'},
  94   {at: 1, is: '10px'},
  95   {at: 1.25, is: '15px'},
  96 ]);
  97
  98 assertInterpolation({
  99   property: 'stroke-dashoffset',
 100   from: '-20px',
 101   to: '30em'
 102 }, [
 103   {at: -0.25, is: '-145px'},
 104   {at: 0, is: '-20px'},
 105   {at: 0.25, is: '105px'},
 106   {at: 0.5, is: '230px'},
 107   {at: 0.75, is: '355px'},
 108   {at: 1, is: '30em'},
 109   {at: 1.25, is: '605px'},
 110 ]);
 111
 112 assertInterpolation({
 113   property: 'stroke-dashoffset',
 114   from: '-10',
 115   to: '10'
 116 }, [
 117   {at: -0.25, is: '-15'},
 118   {at: 0, is: '-10'},
 119   {at: 0.25, is: '-5'},
 120   {at: 0.5, is: '0'},
 121   {at: 0.75, is: '5'},
 122   {at: 1, is: '10'},
 123   {at: 1.25, is: '15'},
 124 ]);
 125 </script>
 126 </body>