<!DOCTYPE html>
<html>
<head>
<style>
  .large {
      width: 100px;
      height: 100px;
  }

  .medium {
      width: 65px;
      height: 65px;
  }

  .small {
      width: 30px;
      height: 30px;
  }

  .backfaceHidden {
      -webkit-backface-visibility: hidden;
  }

  .green {
      background-color: green
  }

  .blue {
      background-color: blue
  }

  .lime {
      background-color: lime
  }

  #testCase1 {
      position: absolute;
      top: 50px;
      left: 10px;
  }

  #testCase2 {
      position: absolute;
      top: 160px;
      left: 10px;
  }

  #testCase3 {
      position: absolute;
      top: 270px;
      left: 10px;
  }

  #testCase4 {
      position: absolute;
      top: 380px;
      left: 10px;
  }
</style>
</head>
<body>

<!-- This test checks various configurations of backface visibility when there is a 3d
     rendering context. -->

<!-- The blue div is a 3d rendering context, containing the lime div. No back faces are
     visible, so we should see all three divs. -->
<div class="large green" id="testCase1">
  <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(0deg); -webkit-transform-style: preserve-3d">
    <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(0deg)">
    </div>
  </div>
</div>

<!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
     inherit the blue div's transform, so both divs are showing their backface and both
     should disappear. -->
<div class="large green" id="testCase2">
  <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d">
    <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(0deg)">
    </div>
  </div>
</div>

<!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
     become invisible when it shows its backface. -->
<div class="large green" id="testCase3">
  <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(0deg); -webkit-transform-style: preserve-3d">
    <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(180deg)">
    </div>
  </div>
</div>

<!-- The blue div is a 3d rendering context, containing the lime div. The lime div should
     inherit the blue div's transform, but because it flips twice (once around Y, once
     around X), its shows its front face and should be visible. This happens BEFORE the
     lime div flattens to the rendering context, so the lime div should remain visible. -->
<div id="testCase4" class="large green">
  <div class="medium blue" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateY(180deg); -webkit-transform-style: preserve-3d">
    <div class="small lime" style="-webkit-backface-visibility: hidden; -webkit-transform: rotateX(180deg)">
    </div>
  </div>
</div>

<script>
  if (window.testRunner) {
      testRunner.dumpAsText(true);  // This is only useful as a pixel test.
      document.write("<span style='position:absolute; top:-5000px'>This test is only useful as a pixel test</span>");
  }
</script>
</body>
</html>