third_party/WebKit/LayoutTests/compositing/backface-visibility/backface-visibility-hierarchical-transform.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     div {
   6       height: 100px;
   7       width: 100px;
   8     }
   9
  10     .red {
  11         background-color: red;
  12     }
  13
  14     .green {
  15         background-color: green;
  16     }
  17
  18     .test1location {
  19         position: absolute;
  20         top: 10px;
  21         left: 10px;
  22     }
  23
  24     .test2location {
  25         position: absolute;
  26         top: 120px;
  27         left: 10px;
  28     }
  29
  30     .test3location {
  31         position: absolute;
  32         top: 230px;
  33         left: 10px;
  34     }
  35
  36     .preserves3d {
  37       -webkit-transform-style: preserve-3d;
  38     }
  39
  40     .flat {
  41       -webkit-transform-style: flat;
  42     }
  43
  44     .rotated180 {
  45       transform: rotateY(180deg);
  46     }
  47
  48     .backfaceVisible {
  49       -webkit-backface-visibility: visible;
  50     }
  51
  52     .backfaceHidden {
  53       -webkit-backface-visibility: hidden;
  54     }
  55   </style>
  56 </head>
  57 <body>
  58
  59   <!-- In the pixel results, two green squares should be visible. This tests whether
  60        backface culling is accounting for the hierarchy of transforms.
  61        http://dev.w3.org/csswg/css3-transforms/#backface-visibility-property
  62     -->
  63
  64
  65   <!-- Case 1: the inner-most div remains 3d, and inherits a 180-degree rotation from
  66        higher up the hierarchy. The inner-most div should remain visible.
  67        -->
  68   <div class="test1location red">
  69   </div>
  70   <div class="test1location">
  71     <div class="preserves3d">
  72       <div class="preserves3d rotated180">
  73         <div class="preserves3d">
  74           <div class="backfaceVisible green">
  75           </div>
  76         </div>
  77       </div>
  78     </div>
  79   </div>
  80
  81
  82   <!-- Case 2: same as Case 1, except now the inner-most div has backface-visibility: hidden. -->
  83   <div class="test2location green">
  84   </div>
  85   <div class="test2location">
  86     <div class="preserves3d">
  87       <div class="preserves3d rotated180">
  88         <div class="preserves3d">
  89           <div class="backfaceHidden red">
  90           </div>
  91         </div>
  92       </div>
  93     </div>
  94   </div>
  95
  96
  97   <!-- Case 3: the inner-most div flattens to its container div, with its front face
  98        showing. Then higher in the hierarchy, that flattened container gets rotated so its
  99        back face is showing. However, because it was already flattened, the inner-most div
 100        should also remain visible, because the flattened layer is implicitly backface visible. -->
 101   <div class="test3location red">
 102   </div>
 103   <div class="test3location">
 104     <div class="preserves3d">
 105       <div class="flat rotated180">
 106         <div class="preserves3d">
 107           <div class="flat">
 108             <div class="backfaceHidden green">
 109             </div>
 110           </div>
 111         </div>
 112       </div>
 113     </div>
 114   </div>
 115
 116   <script>
 117   if (window.testRunner) {
 118     testRunner.dumpAsTextWithPixelResults();  // This is only useful as a pixel test.
 119     document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
 120   }
 121   </script>
 122 </body>
 123 </html>