preserve-3d-switching.html | Explore in Territory

<!DOCTYPE>
<html>
<head>
  <title>Switching layer in and out of preserve-3d</title>

  <style type="text/css" media="screen">
    body {
      font-family: 'Lucida Grande', Verdana, Arial;
      font-size: 12px;
    }
    #container {
      position: relative;
      height: 300px;
      width: 300px;
      margin: 50px 100px;
      border: 2px solid blue;
      -webkit-perspective: 500;
    }

    #parent {
      margin: 10px;
      width: 280px;
      height: 280px;
      background-color: yellow;
      -webkit-transform-style: preserve-3d;
      transform: rotateX(-60deg) rotateY(40deg);
    }
    
    #parent > div {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 200px;
      height: 200px;
      padding: 10px;
      -webkit-box-sizing: border-box;
      font-family: monospace;
      font-size: 12pt;
    }

    #parent > :first-child {
      background-color: green;
      opacity:0.7;
      transform: translateZ(50px) rotateY(-40deg);
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.waitUntilDone();
    }
    
    timeout = 100;
    
    function startProgram()
    {
        setTimeout(function() {
            document.getElementById("parent").style.webkitTransformStyle = "flat";
            setTimeout(function() {
                document.getElementById("parent").style.webkitTransformStyle = "preserve-3d";
                if (window.testRunner) {
                    var layerTree = internals.layerTreeAsText(document);
                    document.getElementById("layerTree").innerHTML = "<pre>" + layerTree + "</pre>";
                    testRunner.notifyDone();
                }
            }, timeout);
        }, timeout);
    }
    window.addEventListener('load', startProgram, false)
    </script>
</head>
<body>

  <p>The green box appear angled out from the yellow box and embedded in it.</p>
  <div id="container">
    <div id="parent">
      <div>transform: translateZ(-100px) rotateY(45deg);</div>
    </div>
    <div id="layerTree"></div>
  </div>

</body>
</html>
chromium/third_party/blink/web_tests/compositing/geometry/preserve-3d-switching.html
