| <!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> |
