third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-gradientTransform-interpolation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <template id="target-template">
   5 <svg width="90" height="90">
   6 <linearGradient class="target" />
   7 </svg>
   8 </template>
   9 <script src="resources/interpolation-test.js"></script>
  10 <script>
  11 'use strict';
  12
  13 assertAttributeInterpolation({
  14   property: 'gradientTransform',
  15   from: 'translate(10 20)',
  16   to: 'translate(30 60)'
  17 }, [
  18   {at: -0.4, is: 'translate(2,4)'},
  19   {at: 0, is: 'translate(10 20)'},
  20   {at: 0.2, is: 'translate(14,28)'},
  21   {at: 0.6, is: 'translate(22,44)'},
  22   {at: 1, is: 'translate(30 60)'},
  23   {at: 1.4, is: 'translate(38,76)'}
  24 ]);
  25
  26 assertAttributeInterpolation({
  27   property: 'gradientTransform',
  28   from: 'scale(10 20)',
  29   to: 'scale(30 60)'
  30 }, [
  31   {at: -0.4, is: 'scale(2 4)'},
  32   {at: 0, is: 'scale(10 20)'},
  33   {at: 0.2, is: 'scale(14 28)'},
  34   {at: 0.6, is: 'scale(22 44)'},
  35   {at: 1, is: 'scale(30 60)'},
  36   {at: 1.4, is: 'scale(38 76)'}
  37 ]);
  38
  39 assertAttributeInterpolation({
  40   property: 'gradientTransform',
  41   from: 'rotate(10 20 30)',
  42   to: 'rotate(40 80 160)'
  43 }, [
  44   {at: -0.4, is: 'rotate(-2 -4 -22)'},
  45   {at: 0, is: 'rotate(10 20 30)'},
  46   {at: 0.2, is: 'rotate(16 32 56)'},
  47   {at: 0.6, is: 'rotate(28 56 108)'},
  48   {at: 1, is: 'rotate(40 80 160)'},
  49   {at: 1.4, is: 'rotate(52 104 212)'}
  50 ]);
  51
  52 assertAttributeInterpolation({
  53   property: 'gradientTransform',
  54   from: 'skewX(10)',
  55   to: 'skewX(20)'
  56 }, [
  57   {at: -0.4, is: 'skewX(6)'},
  58   {at: 0, is: 'skewX(10)'},
  59   {at: 0.2, is: 'skewX(12)'},
  60   {at: 0.6, is: 'skewX(16)'},
  61   {at: 1, is: 'skewX(20)'},
  62   {at: 1.4, is: 'skewX(24)'}
  63 ]);
  64
  65 assertAttributeInterpolation({
  66   property: 'gradientTransform',
  67   from: 'skewY(10)',
  68   to: 'skewY(20)'
  69 }, [
  70   {at: -0.4, is: 'skewY(6)'},
  71   {at: 0, is: 'skewY(10)'},
  72   {at: 0.2, is: 'skewY(12)'},
  73   {at: 0.6, is: 'skewY(16)'},
  74   {at: 1, is: 'skewY(20)'},
  75   {at: 1.4, is: 'skewY(24)'}
  76 ]);
  77 </script>
  78 </body>
  79 </html>