third_party/WebKit/LayoutTests/compositing/backface-visibility-transformed.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     .container {
   6         -webkit-perspective: 1000;
   7     }
   8     .frame {
   9         -webkit-transform-style: preserve-3d;
  10         transform: translateX(200px) rotateY(85deg);
  11     }
  12     .front {
  13         position:absolute;
  14         background-color: red;
  15     }
  16
  17     .back {
  18         position:absolute;
  19         background-color: green;
  20         transform: rotateY(180deg);
  21     }
  22     div {
  23       height: 200px;
  24       width: 200px;
  25     }
  26
  27     .backfaceHidden {
  28       -webkit-backface-visibility: hidden;
  29     }
  30   </style>
  31 </head>
  32 <body>
  33   <!-- In the pixel results, the green side should be visible. -->
  34   <div class="container">
  35       <div class="frame">
  36           <div class="backfaceHidden front"></div>
  37           <div class="backfaceHidden back"></div>
  38       </div>
  39   </div>
  40   <script>
  41   if (window.testRunner) {
  42     testRunner.dumpAsTextWithPixelResults();  // This is only useful as a pixel test.
  43     document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
  44   }
  45   </script>
  46 </body>
  47 </html>