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

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