LayoutTests/compositing/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     .preserves3d {
  31       -webkit-transform-style: preserve-3d;
  32     }
  33
  34     .firstRenderSurface {
  35       -webkit-transform: rotateY(180deg);
  36       -webkit-transform-style: flat;
  37     }
  38
  39     .secondRenderSurface {
  40       -webkit-transform: rotateY(0deg);
  41       -webkit-transform-style: flat;
  42     }
  43
  44     .backfaceVisible {
  45       -webkit-backface-visibility: visible;
  46     }
  47
  48     .backfaceHidden {
  49       -webkit-backface-visibility: hidden;
  50     }
  51   </style>
  52 </head>
  53 <body>
  54
  55   <!-- In the pixel results, two green squares should be visible. -->
  56   <!-- This tests whether backface culling is accounting for the hierarchy of transforms -->
  57
  58   <div class="test1location red">
  59   </div>
  60   <div class="test1location">
  61     <div class="preserves3d">
  62       <div class="firstRenderSurface">
  63         <div class="preserves3d">
  64           <div class="secondRenderSurface">
  65             <div class="preserves3d backfaceVisible green">
  66             </div>
  67           </div>
  68         </div>
  69       </div>
  70     </div>
  71   </div>
  72
  73   <div class="test2location green">
  74   </div>
  75   <div class="test2location">
  76     <div class="preserves3d">
  77       <div class="firstRenderSurface">
  78         <div class="preserves3d">
  79           <div class="secondRenderSurface">
  80             <div class="preserves3d backfaceHidden red">
  81             </div>
  82           </div>
  83         </div>
  84       </div>
  85     </div>
  86   </div>
  87
  88   <script>
  89   if (window.layoutTestController) {
  90     layoutTestController.dumpAsText(true);  // This is only useful as a pixel test.
  91     document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
  92   }
  93   </script>
  94 </body>
  95 </html>