third_party/WebKit/LayoutTests/animations/interpolation/webkit-background-size-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .target {
   5   width: 80px;
   6   height: 100px;
   7   display: inline-block;
   8   border: 10px solid black;
   9   background-repeat: no-repeat;
  10   background-image: url(../resources/stripes-100.png),
  11                     url(../resources/stripes-100.png),
  12                     url(../resources/blue-100.png),
  13                     url(../resources/green-100.png);
  14   background-position: left top, right top, left bottom, right bottom;
  15 }
  16 .expected {
  17   margin-right: 10px;
  18   border-color: green;
  19 }
  20 </style>
  21 <body>
  22 <script src="resources/interpolation-test.js"></script>
  23 <script>
  24 // Matched keywords in size value list.
  25 assertNoInterpolation({
  26   property: '-webkit-background-size',
  27   from: '0px 0px, 0px 0px, contain, cover',
  28   to: '40px 40px, 40px 40px, contain, cover',
  29 });
  30
  31 // Mismatched keywords in size value list.
  32 assertNoInterpolation({
  33   property: '-webkit-background-size',
  34   from: '0px 0px, 0px 0px, contain, cover',
  35   to: '40px 40px, 40px 40px, cover, contain',
  36 });
  37
  38 // Equal number of size values as background images.
  39 assertInterpolation({
  40   property: '-webkit-background-size',
  41   from: '0px 0px, 0px 0px, 0px 0px, 0px 0px',
  42   to: '20px 20px, 40px 40px, 60px 60px, 100px 100px',
  43 }, [
  44   {at: -0.25, is: ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
  45   {at: 0, is:     ' 0px  0px,  0px  0px,  0px  0px,   0px   0px'},
  46   {at: 0.25, is:  ' 5px  5px, 10px 10px, 15px 15px,  25px  25px'},
  47   {at: 0.5, is:   '10px 10px, 20px 20px, 30px 30px,  50px  50px'},
  48   {at: 0.75, is:  '15px 15px, 30px 30px, 45px 45px,  75px  75px'},
  49   {at: 1, is:     '20px 20px, 40px 40px, 60px 60px, 100px 100px'},
  50   {at: 1.25, is:  '25px 25px, 50px 50px, 75px 75px, 125px 125px'},
  51 ]);
  52
  53 // Single size value repeated over background images.
  54 assertInterpolation({
  55   property: '-webkit-background-size',
  56   from: '0px 0px',
  57   to: '80px 80px',
  58 }, [
  59   {at: -0.25, is: '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
  60   {at: 0, is:     '  0px   0px,   0px   0px,   0px   0px,   0px   0px'},
  61   {at: 0.25, is:  ' 20px  20px,  20px  20px,  20px  20px,  20px  20px'},
  62   {at: 0.5, is:   ' 40px  40px,  40px  40px,  40px  40px,  40px  40px'},
  63   {at: 0.75, is:  ' 60px  60px,  60px  60px,  60px  60px,  60px  60px'},
  64   {at: 1, is:     ' 80px  80px,  80px  80px,  80px  80px,  80px  80px'},
  65   {at: 1.25, is:  '100px 100px, 100px 100px, 100px 100px, 100px 100px'},
  66 ]);
  67
  68 // Mismatched numbers of size values.
  69 assertInterpolation({
  70   property: '-webkit-background-size',
  71   from: '0px 0px, 80px 0px',
  72   to: '40px 40px, 80px 80px, 0px 80px',
  73 }, [
  74   {at: -0.25, is: ' 0px  0px, 80px   0px, 0px   0px, 90px  0px'},
  75   {at: 0, is:     ' 0px  0px, 80px   0px, 0px   0px, 80px  0px'},
  76   {at: 0.25, is:  '10px 10px, 80px  20px, 0px  20px, 70px 10px'},
  77   {at: 0.5, is:   '20px 20px, 80px  40px, 0px  40px, 60px 20px'},
  78   {at: 0.75, is:  '30px 30px, 80px  60px, 0px  60px, 50px 30px'},
  79   {at: 1, is:     '40px 40px, 80px  80px, 0px  80px, 40px 40px'},
  80   {at: 1.25, is:  '50px 50px, 80px 100px, 0px 100px, 30px 50px'},
  81 ]);
  82 </script>
  83 </body>