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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   div {
   6       height: 100px;
   7       width: 100px;
   8   }
   9
  10   #testCase1 {
  11       position: absolute;
  12       top: 10px;
  13       left: 10px;
  14   }
  15
  16   #testCase2 {
  17       position: absolute;
  18       top: 120px;
  19       left: 10px;
  20   }
  21
  22   #testCase3 {
  23       position: absolute;
  24       top: 230px;
  25       left: 10px;
  26   }
  27
  28   #testCase4 {
  29       position: absolute;
  30       top: 340px;
  31       left: 10px;
  32   }
  33 </style>
  34 </head>
  35 <body>
  36
  37 <!-- This test checks various configurations of backface visibility when there is no 3d
  38      rendering context (i.e. no layer preserves-3d). -->
  39
  40 <!-- No back faces are visible, so we should see the lime div inside the blue narrow div
  41      inside the green div. -->
  42 <div id="testCase1" style="background-color: green">
  43   <div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(80deg)">
  44     <div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(80deg)">
  45     </div>
  46   </div>
  47 </div>
  48
  49 <!-- The lime div has its back facing, so we should see only the blue strip inside the
  50      green div. -->
  51 <div id="testCase2" style="background-color: green">
  52   <div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(80deg)">
  53     <div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(100deg)">
  54     </div>
  55   </div>
  56 </div>
  57
  58 <!-- The blue div should not be visible, but the lime div should be visible, because the
  59      W3C spec says that without a 3d context that they should use their own local
  60      transforms. -->
  61 <div id="testCase3" style="background-color: green">
  62   <div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(100deg)">
  63     <div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(80deg)">
  64     </div>
  65   </div>
  66 </div>
  67
  68 <!-- Only the green div should be visible. -->
  69 <div id="testCase4" style="background-color: green">
  70   <div style="background-color: blue; -webkit-backface-visibility: hidden; transform: rotateY(100deg)">
  71     <div style="background-color: lime; -webkit-backface-visibility: hidden; transform: rotateX(100deg)">
  72     </div>
  73   </div>
  74 </div>
  75
  76 <script>
  77   if (window.testRunner) {
  78       testRunner.dumpAsTextWithPixelResults();  // This is only useful as a pixel test.
  79       document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
  80   }
  81 </script>
  82 </body>
  83 </html>