<!DOCTYPE html>

<html>
<head>
  <style>
    #container, #container2 {
      height: 100px;
      width: 100px;
      margin: 10px 0;
      -webkit-perspective: 1000px;
    }
    
    #container.transformed, #container2.transformed {
      -webkit-transform: translateX(0);
    }
    
    .box {
      margin-bottom: 5px;
      height: 100px;
      width: 100px;
      background-color: green;
      opacity: 0.5;
    }
  </style>
  <script>
    function doTest()
    {
      window.setTimeout(function() {
        document.getElementById('container').className = 'transformed';
        document.getElementById('container2').className = '';
        
        if (window.layoutTestController)
          layoutTestController.notifyDone();
      }, 100);
    }
    window.addEventListener('load', doTest, false);
  </script>
</head>
<body>
  <p>All squares should have the same pale green color></p>
  <div class="box"></div>
  <div id="container">
    <div class="box">
    </div>
  </div>

  <div id="container2" class="transformed">
    <div class="box">
    </div>
  </div>
</body>
</html>