src/third_party/WebKit/LayoutTests/compositing/backface-visibility/backface-visibility-3d.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   .large {
   6       width: 100px;
   7       height: 100px;
   8   }
   9
  10   .medium {
  11       width: 65px;
  12       height: 65px;
  13   }
  14
  15   .small {
  16       width: 30px;
  17       height: 30px;
  18   }
  19
  20   .backfaceHidden {
  21       -webkit-backface-visibility: hidden;
  22   }
  23
  24   .green {
  25       background-color: green
  26   }
  27
  28   .blue {
  29       background-color: blue
  30   }
  31
  32   .lime {
  33       background-color: lime
  34   }
  35
  36   #testCase1 {
  37       position: absolute;
  38       top: 50px;
  39       left: 10px;
  40   }
  41
  42   #testCase2 {
  43       position: absolute;
  44       top: 160px;
  45       left: 10px;
  46   }
  47
  48   #testCase3 {
  49       position: absolute;
  50       top: 270px;
  51       left: 10px;
  52   }
  53
  54   #testCase4 {
  55       position: absolute;
  56       top: 380px;
  57       left: 10px;
  58   }
  59 </style>
  60 </head>
  61 <body>
  62
  63 <!-- This test checks various configurations of backface visibility when there is a 3d
  64      rendering context. -->
  65
  66 <!-- The blue div is a 3d rendering context, containing the lime div. No back faces are
  67      visible, so we should see all three divs. -->
  68 <div class="large green" id="testCase1">
  69   <div class="medium blue" style="-webkit-backface-visibility: hidden; transform: rotateY(0deg); -webkit-transform-style: preserve-3d">
  70     <div class="small lime" style="-webkit-backface-visibility: hidden; transform: rotateX(0deg)">
  71     </div>
  72   </div>
  73 </div>
  74
  75 <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
  76      inherit the blue div's transform, so both divs are showing their backface and both
  77      should disappear. -->
  78 <div class="large green" id="testCase2">
  79   <div class="medium blue" style="-webkit-backface-visibility: hidden; transform: rotateY(180deg); -webkit-transform-style: preserve-3d">
  80     <div class="small lime" style="-webkit-backface-visibility: hidden; transform: rotateX(0deg)">
  81     </div>
  82   </div>
  83 </div>
  84
  85 <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
  86      become invisible when it shows its backface. -->
  87 <div class="large green" id="testCase3">
  88   <div class="medium blue" style="-webkit-backface-visibility: hidden; transform: rotateY(0deg); -webkit-transform-style: preserve-3d">
  89     <div class="small lime" style="-webkit-backface-visibility: hidden; transform: rotateX(180deg)">
  90     </div>
  91   </div>
  92 </div>
  93
  94 <!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
  95      inherit the blue div's transform, but because it flips twice (once around Y, once
  96      around X), its shows its front face and should be visible. This happens BEFORE the
  97      lime div flattens to the rendering context, so the lime div should remain visible. -->
  98 <div id="testCase4" class="large green">
  99   <div class="medium blue" style="-webkit-backface-visibility: hidden; transform: rotateY(180deg); -webkit-transform-style: preserve-3d">
 100     <div class="small lime" style="-webkit-backface-visibility: hidden; transform: rotateX(180deg)">
 101     </div>
 102   </div>
 103 </div>
 104
 105 <script>
 106   if (window.testRunner) {
 107       testRunner.dumpAsTextWithPixelResults();  // This is only useful as a pixel test.
 108       document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
 109   }
 110 </script>
 111 </body>
 112 </html>