third_party/WebKit/LayoutTests/transitions/background-transitions.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       height: 100px;
   8       width: 100px;
   9       margin: 10px;
  10       -webkit-transition-duration: 1s;
  11       -webkit-transition-timing-function: linear;
  12     }
  13
  14     #box {
  15       background: url('../fast/backgrounds/repeat/resources/gradient.gif') repeat 0 0;
  16       -webkit-transition-property: background-position;
  17     }
  18
  19     #box.final {
  20       background-position: 20px 20px;
  21     }
  22
  23     #box2 {
  24       background: url('../fast/backgrounds/repeat/resources/gradient.gif') repeat 0 0;
  25       -webkit-transition-property: -webkit-background-size;
  26       -webkit-background-size: 10px 10px;
  27     }
  28
  29     #box2.final {
  30       -webkit-background-size: 30px 30px;
  31     }
  32
  33   </style>
  34   <script src="../animations/resources/animation-test-helpers.js" type="text/javascript"></script>
  35   <script>
  36
  37     const expectedValues = [
  38       // [time, element-id, property, expected-value, tolerance]
  39       [0.5, 'box', 'background-position', [10, 10], 2],
  40       [0.5, 'box2', '-webkit-background-size', [20, 20], 2],
  41     ];
  42
  43     function setupTest()
  44     {
  45       document.getElementById('box').className = 'box final';
  46       document.getElementById('box2').className = 'box final';
  47     }
  48
  49     runTransitionTest(expectedValues, setupTest);
  50   </script>
  51 </head>
  52 <body>
  53
  54   <div id="box" class="box"></div>
  55   <div id="box2" class="box"></div>
  56
  57   <div id="result">
  58   </div>
  59
  60 </body>
  61 </html>