src/third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation.html

   1 <!doctype html>
   2 <meta charset="utf-8">
   3 <style>
   4 .target {
   5     border: 3px solid skyblue;
   6     width: 100px;
   7     height: 100px;
   8     background-image: linear-gradient(to right, coral, coral);
   9     background-size: 20px 20px;
  10     background-repeat: no-repeat;
  11     display: inline-block;
  12 }
  13
  14 .replica {
  15     margin-right: 10px;
  16 }
  17 </style>
  18 <body>
  19 <script src="resources/interpolation-test.js"></script>
  20 <script>
  21
  22 // left-top
  23 assertInterpolation({
  24     property: 'background-position',
  25     from: 'center center',
  26     to: 'left 20px top 20px',
  27 }, [
  28     {at: 0, is: '50% 50%'},
  29     {at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + 5px)'},
  30     {at: 0.50, is: 'calc(25% + 10px) calc(25% + 10px)'},
  31     {at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + 15px)'},
  32     {at: 1, is: '20px 20px'},
  33 ]);
  34
  35 // center-top
  36 assertInterpolation({
  37     property: 'background-position',
  38     from: 'center center',
  39     to: 'center top 20px',
  40 }, [
  41     {at: 0, is: '50% 50%'},
  42     {at: 0.25, is: '50% calc(37.5% + 5px)'},
  43     {at: 0.50, is: '50% calc(25% + 10px)'},
  44     {at: 0.75, is: '50% calc(12.5% + 15px)'},
  45     {at: 1, is: '50% 20px'},
  46 ]);
  47
  48 // right-top
  49 assertInterpolation({
  50     property: 'background-position',
  51     from: 'center center',
  52     to: 'right 20px top 20px',
  53 }, [
  54     {at: 0, is: '50% 50%'},
  55     {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + 5px)'},
  56     {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + 10px)'},
  57     {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + 15px)'},
  58     {at: 1, is: 'calc(100% - 20px) 20px'},
  59 ]);
  60
  61 // left-center
  62 assertInterpolation({
  63     property: 'background-position',
  64     from: 'center center',
  65     to: 'left 20px center',
  66 }, [
  67     {at: 0, is: '50% 50%'},
  68     {at: 0.25, is: 'calc(37.5% + 5px) 50%'},
  69     {at: 0.50, is: 'calc(25% + 10px) 50%'},
  70     {at: 0.75, is: 'calc(12.5% + 15px) 50%'},
  71     {at: 1, is: '20px 50%'},
  72 ]);
  73
  74 // center-center
  75 assertInterpolation({
  76     property: 'background-position',
  77     from: 'center center',
  78     to: 'center center',
  79 }, [
  80     {at: 0, is: '50% 50%'},
  81     {at: 0.25, is: '50% 50%'},
  82     {at: 0.50, is: '50% 50%'},
  83     {at: 0.75, is: '50% 50%'},
  84     {at: 1, is: '50% 50%'}
  85 ]);
  86
  87 // right-center
  88 assertInterpolation({
  89     property: 'background-position',
  90     from: 'center center',
  91     to: 'right 20px center',
  92 }, [
  93     {at: 0, is: '50% 50%'},
  94     {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) 50%'},
  95     {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) 50%'},
  96     {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) 50%'},
  97     {at: 1, is: 'calc(100% - 20px) 50%'},
  98 ]);
  99
 100 // left-bottom
 101 assertInterpolation({
 102     property: 'background-position',
 103     from: 'center center',
 104     to: 'left 20px bottom 20px',
 105 }, [
 106     {at: 0, is: '50% 50%'},
 107     {at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + ((100% - 20px) * 0.25))'},
 108     {at: 0.50, is: 'calc(25% + 10px) calc(25% + ((100% - 20px) * 0.5))'},
 109     {at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + ((100% - 20px) * 0.75))'},
 110     {at: 1, is: '20px calc(100% - 20px)'},
 111 ]);
 112
 113 // center-bottom
 114 assertInterpolation({
 115     property: 'background-position',
 116     from: 'center center',
 117     to: 'center bottom 20px',
 118 }, [
 119     {at: 0, is: '50% 50%'},
 120     {at: 0.25, is: '50% calc(37.5% + ((100% - 20px) * 0.25))'},
 121     {at: 0.50, is: '50% calc(25% + ((100% - 20px) * 0.5))'},
 122     {at: 0.75, is: '50% calc(12.5% + ((100% - 20px) * 0.75))'},
 123     {at: 1, is: '50% calc(100% - 20px)'},
 124 ]);
 125
 126 // right-bottom
 127 assertInterpolation({
 128     property: 'background-position',
 129     from: 'center center',
 130     to: 'right 20px bottom 20px',
 131 }, [
 132     {at: 0, is: '50% 50%'},
 133     {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + ((100% - 20px) * 0.25))'},
 134     {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + ((100% - 20px) * 0.5))'},
 135     {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + ((100% - 20px) * 0.75))'},
 136     {at: 1, is: 'calc(100% - 20px) calc(100% - 20px)'},
 137 ]);
 138
 139 </script>
 140 </body>