4 <title>Switching layer in and out of preserve-3d</title>
6 <style type="text/css" media="screen">
8 font-family: 'Lucida Grande', Verdana, Arial;
16 border: 2px solid blue;
17 -webkit-perspective: 500;
24 background-color: yellow;
26 -webkit-transform-style: preserve-3d;
27 transform: rotateX(-60deg) rotateY(40deg);
37 -webkit-box-sizing: border-box;
38 font-family: monospace;
42 #parent > :first-child {
43 background-color: green;
45 transform: translateZ(50px) rotateY(-40deg);
48 <script type="text/javascript" charset="utf-8">
49 if (window.testRunner) {
50 testRunner.dumpAsText();
51 testRunner.waitUntilDone();
56 function startProgram()
58 setTimeout(function() {
59 document.getElementById("parent").style.webkitTransformStyle = "flat";
60 setTimeout(function() {
61 document.getElementById("parent").style.webkitTransformStyle = "preserve-3d";
62 if (window.testRunner) {
63 var layerTree = window.internals.layerTreeAsText(document);
64 document.getElementById("layerTree").innerHTML = "<pre>" + layerTree + "</pre>";
65 testRunner.notifyDone();
70 window.addEventListener('load', startProgram, false)
75 <p>The green box appear angled out from the yellow box and embedded in it.</p>
78 <div>transform: translateZ(-100px) rotateY(45deg);</div>
80 <div id="layerTree"></div>