third_party/WebKit/LayoutTests/compositing/visibility/visibility-composited.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .set {
   7       position: absolute;
   8       top: 8px;
   9     }
  10     .box {
  11       height: 100px;
  12       width: 100px;
  13       background-color: blue;
  14     }
  15
  16     .hidden {
  17       visibility: hidden;
  18     }
  19
  20     .container.hidden {
  21       outline: 4px solid red;
  22     }
  23
  24     .visible {
  25       visibility: visible;
  26     }
  27     .should-be-hidden {
  28       background-color: red !important;
  29     }
  30     .should-be-visible {
  31       background-color: green !important;
  32     }
  33     .composited {
  34       transform: translateZ(1px);
  35     }
  36
  37     .visible-indicator {
  38       background-color: green;
  39     }
  40
  41     .hidden-indicator {
  42       background-color: red;
  43     }
  44   </style>
  45 </head>
  46 <body>
  47   <!-- Tests various configurations of visibility:hidden and visible compositing layers. -->
  48   <!-- You should see a green vertical bar, with no red. -->
  49   <div class="set">
  50     <div class="visible-indicator box"></div>
  51     <div class="visible-indicator box"></div>
  52     <div class="hidden-indicator box"></div>
  53   </div>
  54
  55   <div class="set">
  56     <div class="container">
  57       <div class="hidden composited box should-be-hidden">
  58       </div>
  59     </div>
  60
  61     <div class="hidden container">
  62       <div class="composited box should-be-hidden">
  63       </div>
  64     </div>
  65
  66     <div class="hidden container">
  67       <div class="visible composited box should-be-visible">
  68       </div>
  69     </div>
  70   </div>
  71 </body>
  72 </html>