third_party/WebKit/LayoutTests/animations/cross-fade-background-image.html

   1 <html>
   2 <head>
   3   <style>
   4     #box {
   5         position: absolute;
   6         left: 100px;
   7         top: 100px;
   8         height: 100px;
   9         width: 100px;
  10         background-color: red;
  11         -webkit-animation: anim 1s linear infinite;
  12     }
  13     #boxShorthand {
  14         position: absolute;
  15         left: 100px;
  16         top: 200px;
  17         height: 100px;
  18         width: 100px;
  19         background-color: red;
  20         -webkit-animation: animShorthand 1s linear infinite;
  21     }
  22     #boxStatic {
  23         position: absolute;
  24         left: 100px;
  25         top: 300px;
  26         height: 100px;
  27         width: 100px;
  28         background-color: red;
  29         background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%);
  30     }
  31     @-webkit-keyframes anim {
  32         from { background-image: url(resources/blue-100.png); }
  33         to   { background-image: url(resources/green-100.png); }
  34     }
  35     @-webkit-keyframes animShorthand {
  36         from { background: url(resources/blue-100.png); }
  37         to   { background: url(resources/green-100.png); }
  38     }
  39   </style>
  40   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  41   <script type="text/javascript" charset="utf-8">
  42     const expectedValues = [
  43       // [time, element-id, property, expected-value, tolerance]
  44       [2.5, ["box", "boxStatic"], "backgroundImage", 0.5, 0.05],
  45       [2.5, ["boxShorthand", "boxStatic"], "backgroundImage", 0.5, 0.05],
  46     ];
  47
  48     var doPixelTest = true;
  49     var disablePauseAPI = false;
  50     runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest);
  51   </script>
  52 </head>
  53 <body>
  54 <div id="box"></div>
  55 <div id="boxStatic"></div>
  56 <div id="boxShorthand"></div>
  57 <div id="result"></div>
  58 </body>
  59 </html>