third_party/WebKit/LayoutTests/compositing/geometry/transfrom-origin-on-zero-size-layer.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6   <title>Transform-clipping bug</title>
   7   <style type="text/css" media="screen">
   8     body {
   9       margin: 0;
  10     }
  11
  12     .zero-size-item {
  13       position: absolute;
  14       top: 10px;
  15       left: 10px;
  16       height: 0px;
  17       width: 0px;
  18       -webkit-transform-origin: 0 100px;
  19       transform: scale3d(0.5, 0.5, 1);
  20     }
  21
  22     .box {
  23       position: absolute;
  24       width: 100px;
  25       height: 100px;
  26       background-color: green;
  27       transform: translateZ(10px);
  28     }
  29
  30     #indicator {
  31       position: absolute;
  32       top: 60px;
  33       left: 10px;
  34       width: 50px;
  35       height: 50px;
  36       background-color: red;
  37     }
  38   </style>
  39 </head>
  40 <body>
  41
  42 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=29495">29495</a>. You should see one green box below, with no red.</p>
  43 <div id="indicator"></div>
  44
  45 <div class="zero-size-item">
  46   <div class="box"></div>
  47 </div>
  48
  49 </body>
  50 </html>