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

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .container {
   7       -webkit-perspective: 500px;
   8     }
   9     .set {
  10       position: absolute;
  11       top: 8px;
  12     }
  13     .box {
  14       height: 100px;
  15       width: 100px;
  16     }
  17
  18     .hidden {
  19       visibility: hidden;
  20     }
  21
  22     .visible {
  23       visibility: visible;
  24     }
  25
  26     .should-be-visible {
  27       background-color: green !important;
  28     }
  29     .composited {
  30       transform: rotate3d(0, 0, 1, 45deg);
  31     }
  32
  33     .hidden-indicator {
  34       background-color: red;
  35     }
  36
  37     .intermediate {
  38       transform: rotate3d(0, 0, 1, -45deg);
  39       -webkit-transform-style: preserve-3d;
  40       background-color: red;
  41     }
  42   </style>
  43 </head>
  44 <body>
  45   <!-- Tests that a transform on a hidden div affects its visible children. -->
  46   <!-- You should see a single green box, with no red. -->
  47
  48   <div class="set">
  49     <div class="hidden-indicator box"></div>
  50   </div>
  51
  52   <div class="set">
  53     <div class="container">
  54       <div class="hidden intermediate">
  55         <div class="visible composited box should-be-visible"></div>
  56       </div>
  57     </div>
  58
  59   </div>
  60 </body>
  61 </html>