transform-origin-z-change.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
  body {
    margin: 0;
  }

  .container {
    top: 10px;
    left: 10px;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 500px;
    outline: 1px solid black;
  }
  
  .box {
    position: absolute;
    width: 100px;
    height: 100px;
  }
  
  .intermediate {
    transform: rotateY(-90deg);
    -webkit-transform-style: preserve-3d;
  }
  
  .inner {
    transform: rotateY(-90deg);
    background: green;
  }
  
  .indicator {
    top: 10px;
    left: 110px;
    background-color: red;
  }
  </style>
  <script src="../../../resources/run-after-layout-and-paint.js"></script>
  <script type="text/javascript" charset="utf-8">
    function doTest()
    {
      runAfterLayoutAndPaint(function() {
        document.getElementById('target').style.webkitTransformOriginZ = '100px';
      }, true);
    }

    window.addEventListener('load', doTest, false);
  </script>
</head>
<body>
  <!-- The gren box should snap to the right, obscuring the red box. -->
  <div class="indicator box"></div>
  <div class="container box">
    <div id="target" class="intermediate box">
      <div class="inner box">
      </div>
    </div>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/transforms/3d/general/transform-origin-z-change.html