LayoutTests/transitions/cross-fade-background-image.html

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