src/third_party/WebKit/LayoutTests/compositing/sibling-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>Initial backing position</title>
   8   <style type="text/css" media="screen">
   9     #parent {
  10       position: relative;
  11       height: 200px;
  12       width: 200px;
  13       border: 1px solid black;
  14     }
  15
  16     #panel {
  17       position: absolute;
  18       height: 100px;
  19       width: 100px;
  20       left: -50px;
  21       top: -50px;
  22       opacity: 0.2;
  23       background-color: gray;
  24     }
  25
  26     #piece {
  27       position: absolute;
  28       left: 50px;
  29       top: 50px;
  30       height: 60px;
  31       width: 60px;
  32       background-color: green;
  33     }
  34
  35     #piece:hover {
  36       transform: translate3d(0, 0, 0);
  37     }
  38
  39     #piece.moved {
  40       transform: translate3d(0, 0, 0);
  41     }
  42
  43   </style>
  44   <script type="text/javascript" charset="utf-8">
  45     if (window.testRunner)
  46       testRunner.waitUntilDone();
  47
  48     function startTest()
  49     {
  50       window.setTimeout(function() {
  51         var mover = document.getElementById('piece');
  52         mover.className = 'moved';
  53
  54         window.setTimeout(function() {
  55           if (window.testRunner)
  56             testRunner.notifyDone();
  57         }, 0);
  58
  59       }, 0);
  60     }
  61
  62     window.addEventListener('load', startTest, false);
  63   </script>
  64 </head>
  65 <body>
  66
  67   <div id="parent">
  68       <div id="piece"></div>
  69       <div id="panel"></div>
  70   </div>
  71   <p><a href="https://bugs.webkit.org/show_bug.cgi?id=26430">https://bugs.webkit.org/show_bug.cgi?id=26430</a></p>
  72   <p>Green box should not move when hovered</p>
  73 </body>
  74 </html>