LayoutTests/compositing/compositing-visible-descendant.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6   <title>visibility:hidden on child of compositing layer</title>
   7   <style type="text/css" media="screen">
   8     .box {
   9       height: 100px;
  10       width: 100px;
  11     }
  12
  13     .outer {
  14       position: absolute;
  15       top: 40px;
  16       left: 20px;
  17       height: 100px;
  18       width: 100px;
  19       outline: 2px solid black;
  20       visibility: hidden;
  21       -webkit-transform: translateZ(0);
  22     }
  23
  24     .inner {
  25       position: relative;
  26       height: 100px;
  27       width: 100px;
  28       background-color: green;
  29       visibility: visible;
  30     }
  31
  32     #indicator {
  33       position: absolute;
  34       top: 40px;
  35       left: 20px;
  36       height: 100px;
  37       width: 100px;
  38       background-color: red;
  39     }
  40   </style>
  41 </head>
  42 <body>
  43
  44 <p>You should see one green square below.</p>
  45 <div id="indicator"></div>
  46
  47 <div class="outer box">
  48     <div class="inner box">
  49     </div>
  50 </div>
  51
  52 </body>
  53 </html>