third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-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     #boxStatic {
  14         position: absolute;
  15         left: 100px;
  16         top: 200px;
  17         height: 100px;
  18         width: 100px;
  19         background-color: red;
  20         -webkit-mask-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%);
  21     }
  22     @-webkit-keyframes anim {
  23         from { -webkit-mask-image: url(resources/stripes-100.png); }
  24         to   { -webkit-mask-image: url(resources/green-100.png); }
  25     }
  26   </style>
  27   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  28   <script type="text/javascript" charset="utf-8">
  29   // This test was flaky because it would start before the images were loaded.
  30   var imagesLoaded = 0;
  31   function imageLoaded() {
  32     ++imagesLoaded;
  33     if (imagesLoaded == 2) {
  34       const expectedValues = [
  35         // [time, element-id, property, expected-value, tolerance]
  36         [2.25, ["box", "boxStatic"], "webkitMaskImage", 0.25, 0.05]
  37       ];
  38
  39       var doPixelTest = true;
  40       var disablePauseAPI = false;
  41       var startTestImmediately = true;
  42       runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest, startTestImmediately);
  43     }
  44   }
  45   </script>
  46 </head>
  47 <body>
  48 <img id="box" src="resources/green-100.png" onLoad="imageLoaded()";/>
  49 <img id="boxStatic" src="resources/stripes-100.png" onLoad="imageLoaded();"/>
  50 <div id="result"></div>
  51 </body>
  52 </html>