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