src/third_party/WebKit/LayoutTests/css3/images/cross-fade-background-size.html

   1 <html>
   2 <head>
   3 <title>There should be four bars, equivalent except for the length of the bar.</title>
   4 <style>
   5
   6 div
   7 {
   8     width: 200px;
   9     height: 50px;
  10 }
  11
  12 #compositeTiledNormal
  13 {
  14     background-image: url(resources/stripes-large.png);
  15     transform: translateZ(0);
  16     background-size: 10px 50px;
  17 }
  18
  19 #compositeTiledCrossfade
  20 {
  21     background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(resources/stripes-small.png), 1%);
  22     transform: translateZ(0);
  23     background-size: 10px 50px;
  24 }
  25
  26
  27 #normal
  28 {
  29     background-image: url(resources/stripes-large.png);
  30     background-size: 10px 50px;
  31     background-repeat: no-repeat;
  32 }
  33
  34 #crossfade
  35 {
  36     background-image: -webkit-cross-fade(url(resources/stripes-large.png), url(resources/stripes-small.png), 1%);
  37     background-size: 10px 50px;
  38     background-repeat: no-repeat;
  39 }
  40
  41
  42 </style>
  43 </head>
  44 <body>
  45 <div id="compositeTiledNormal"></div><br/>
  46 <div id="compositeTiledCrossfade"></div>
  47 <br/><br/>
  48 <div id="normal"></div><br/>
  49 <div id="crossfade"></div>
  50 </body>
  51 </html>