<!DOCTYPE html>

<html>
<head>
  <style>
    .container {
      position: relative;
    }
    .box {
      position: absolute;
      height: 150px;
      width: 100px;
      background-color: gray;
    }
    .green {
      height: 100px;
      background-color: green;
    }
    .box-container {
      position: absolute;
      -webkit-perspective: 200;
      -webkit-perspective-origin: 50px 50px;
     }
     .rotate-3d-start {
        -webkit-transform: scale(0.5) rotateX(45deg) rotateY(45deg);
        -webkit-transform-origin: 50px 50px;
        -webkit-transform-style: preserve-3d;
     }
     .rotate-3d-end {
        -webkit-transform: scale(1.0) rotateX(45deg) rotateY(45deg);
      }
    .top {
      top: 0px;
    }
    .bottom {
      top: 150px;
    }
    .left {
      left: 0px;
    }
    .right {
      left: 200px;
    }
    .center {
      left: 100px;
      top: 100px;
    }
    #layers {
      position: absolute;
      top: 350px;
    }
    .side {
      position: absolute;
      width: 98px;
      height: 88px;
      text-align: center;
      padding-top: 10px;
      background: rgba(0, 255, 0, 0.8);
      font-weight: bold;
      border: 1px solid green;
      -webkit-transform-origin: 50% 50%;
    }
    .side-1 {
      -webkit-transform: translateZ(50px);
    }
    .side-2 {
      -webkit-transform: rotateY(90deg) translateZ(50px);
    }
    .side-3 {
      -webkit-transform: rotateY(180deg) translateZ(50px);
    }
    .side-4 {
      -webkit-transform: rotateY(270deg) translateZ(50px);
    }
    .side-5 {
      -webkit-transform: rotateX(90deg) translateZ(50px);
    }
    .side-6 {
      -webkit-transform: rotateX(-90deg) translateZ(50px);
    }
  </style>
  <script>
    if (window.testRunner)
      testRunner.dumpAsText();

    function runTest()
    {
      var layerTrees = "";

      if (window.testRunner)
        layerTrees = "Before:\n" + window.internals.layerTreeAsText(document);

      // Rotate the first green box, so that it overlaps the first gray box in the container.
      // That should force the creation of composited layers for all the other green boxes.
      document.getElementById("camera").classList.add("rotate-3d-end");

      if (window.testRunner) {
        layerTrees += "\nAfter:\n" + window.internals.layerTreeAsText(document);
        document.getElementById('layers').innerText = layerTrees;
        testRunner.notifyDone();
      }
    }
    window.addEventListener('load', runTest, false);
  </script>
</head>
<body>
  <!--  
    Testing that 3D transforms are not forcing layers to become composited without checking for overlapping areas first.
    In the first state, the green box is not rotated, so it doesn't overlap the gray ones, meaning that only the gray box
    will become composited.
    In the second state, the green box is rotated and will overlap the following layers, meaning that they are all forced to
    get composited.
    In the end there should be one rotated green box in the middle and two gray bars on the margins. Gray boxes
    should display in front.
  -->
  <div class="container">
    <div id="green-box" class="center box-container">
      <div id="camera" class="rotate-3d-start">
        <div class="side side-1">1</div>
        <div class="side side-2">2</div>
        <div class="side side-3">3</div>
        <div class="side side-4">4</div>
        <div class="side side-5">5</div>
        <div class="side side-6">6</div>
      </div>
    </div>
      <div class="box top left"></div>
      <div class="box top right"></div>
      <div class="box bottom left"></div>
      <div class="box bottom right"></div>
    </div>
  <pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>