third_party/WebKit/LayoutTests/css3/images/cross-fade-tiled.html

   1 <html>
   2 <style>
   3 div
   4 {
   5         width: 100px;
   6         height: 80px;
   7         margin: 20px;
   8
   9         transform:translateZ(0);
  10 }
  11 </style>
  12 <!--The 1st cross-fade should appear as a simple tartan, with the pattern clipped to fit.-->
  13 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: repeat;"></div>
  14 <!--The 2nd cross-fade should appear as a simple tartan, not repeated.-->
  15 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: no-repeat;"></div>
  16 <!--The 3rd cross-fade should appear as a simple tartan, with the pattern scaled to fit exactly in both dimensions.-->
  17 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: round;"></div>
  18 <!--The 4th cross-fade should appear as a simple tartan, with the pattern spaced to fit exactly in both dimensions without scaling.-->
  19 <div style="background-image: -webkit-cross-fade(url(resources/red-half-stripe.png), url(resources/green-half-stripe.png), 50%); background-repeat: space;"></div>
  20 </html>