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