LayoutTests/fast/transforms/transform-positioned-ancestor.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>Transform and positioned ancestor</title>
   8   <style type="text/css" media="screen">
   9
  10     #wrapper {
  11       border: 1px solid black;
  12       position: relative;
  13       width: 300px;
  14     }
  15     .container {
  16       height: 200px;
  17       width: 200px;
  18       margin: 50px;
  19       background-color: gray;
  20       -webkit-transform: rotate(0);
  21     }
  22     .box {
  23       position: absolute;
  24       left: 50px;
  25       top: 50px;
  26       height: 100px;
  27       width: 100px;
  28       background-color: red;
  29     }
  30
  31     .green-box {
  32       position: absolute;
  33       left: 100px;
  34       top: 100px;
  35       height: 100px;
  36       width: 100px;
  37       background-color: green;
  38     }
  39
  40   </style>
  41 </head>
  42 <body>
  43
  44 <p>You should see a green box inside a gray box. If you see red, the test has failed. <a href="https://bugs.webkit.org/show_bug.cgi?id=18885">https://bugs.webkit.org/show_bug.cgi?id=18885</a>
  45 </p>
  46 <div id="wrapper">
  47
  48   <div class="container">
  49     <div class="box"></div>
  50   </div>
  51   <div class="green-box"></div>
  52 </div>
  53
  54 </body>
  55 </html>