third_party/WebKit/LayoutTests/compositing/overflow/overflow-positioning.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>25052 testcase</title>
   8   <style type="text/css" media="screen">
   9   body {
  10       margin: 100px;
  11   }
  12
  13   #container {
  14     position: relative;
  15     overflow: hidden;
  16     height: 200px;
  17     width: 200px;
  18     border: 1px solid black;
  19     z-index: 0;
  20   }
  21
  22   #header {
  23     position: relative;
  24     width: 100%;
  25     height: 100px;
  26     background-color: rgba(128, 128, 0, 0.2);
  27   }
  28
  29   #hanger {
  30     position: absolute;
  31     left: -200px;
  32     height: 100px;
  33     width: 150px;
  34     background-color: blue;
  35   }
  36
  37   #mover {
  38     position: absolute;
  39     top: 0;
  40     height: 150px;
  41     width: 150px;
  42     background-color: green;
  43     -webkit-transition: -webkit-transform 1000s;
  44   }
  45
  46   #mover:hover {
  47     transform: translate(0px, 100px);
  48   }
  49   #mover.moving {
  50     transform: translate(0px, 100px);
  51   }
  52   </style>
  53   <script type="text/javascript" charset="utf-8">
  54     if (window.testRunner)
  55       testRunner.waitUntilDone();
  56
  57     function startTest()
  58     {
  59       window.setTimeout(function() {
  60         var mover = document.getElementById('mover');
  61         mover.className = 'moving';
  62
  63         window.setTimeout(function() {
  64           if (window.testRunner)
  65             testRunner.notifyDone();
  66         }, 0);
  67
  68       }, 0);
  69     }
  70
  71     window.addEventListener('load', startTest, false);
  72   </script>
  73 </head>
  74 <body>
  75
  76 <p>Things should not jump around when the green square starts the transition.</p>
  77 <div id="container">
  78   <div id="header">
  79     <div id="hanger"></div>
  80   </div>
  81   <div id="mover">
  82   </div>
  83 </div>
  84
  85 </body>
  86 </html>