third_party/WebKit/LayoutTests/css3/images/cross-fade-overflow-position.html

   1 <html>
   2 <head>
   3     <title>The crossfade should appear as two *bottom* halves of a green circle, with a paler green background.</title>
   4     <style>
   5     #image {
   6         background-image: -webkit-cross-fade(url(resources/half-circles.svg), url(resources/green-100.png), 50%);
   7         width: 100px; height: 100px;
   8         background-repeat: no-repeat;
   9     }
  10
  11     #tiledImage {
  12         background-image: -webkit-cross-fade(url(resources/half-circles.svg), url(resources/green-100.png), 50%);
  13         width: 300px; height: 300px;
  14     }
  15
  16     div.container {
  17         overflow: hidden;
  18         height: 50px;
  19         width: 100px;
  20         margin: 10px;
  21     }
  22     </style>
  23     <script>
  24     function load()
  25     {
  26         var normalContainer = document.getElementById("normal");
  27         normalContainer.scrollTop = normalContainer.scrollHeight;
  28         var tiledContainer = document.getElementById("tiled");
  29         tiledContainer.scrollTop = tiledContainer.scrollHeight;
  30     }
  31     </script>
  32 </head>
  33 <body onload="load()">
  34     <div id="normal" class="container">
  35         <div id="image"></div>
  36     </div>
  37     <div id="tiled" class="container">
  38         <div id="tiledImage"></div>
  39     </div>
  40 </body>
  41 </html>