third_party/WebKit/LayoutTests/animations/cross-fade-webkit-mask-box-image-expected.html

   1 <html>
   2 <head>
   3   <style>
   4     #box {
   5         position: absolute;
   6         left: 100px;
   7         top: 100px;
   8         height: 200px;
   9         width: 200px;
  10         background-color: red;
  11         -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%) 50 stretch;
  12     }
  13     #boxStatic {
  14         position: absolute;
  15         left: 100px;
  16         top: 300px;
  17         height: 200px;
  18         width: 200px;
  19         background-color: red;
  20         -webkit-mask-box-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 25%) 50 stretch;
  21     }
  22     @-webkit-keyframes anim {
  23         from { -webkit-mask-box-image: url(resources/stripes-100.png) 50 stretch; }
  24         to   { -webkit-mask-box-image: url(resources/green-100.png) 50 stretch; }
  25     }
  26   </style>
  27 </head>
  28 <body>
  29 <img id="box" src="resources/green-100.png"/>
  30 <img id="boxStatic" src="resources/stripes-100.png"/>
  31 <div id="result">
  32 PASS - "webkitMaskBoxImage" property for "box" and "boxStatic" elements at 2.25s are close enough to each other
  33 </div>
  34 </body>
  35 </html>