third_party/WebKit/LayoutTests/compositing/geometry/preserve-3d-switching.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <title>Switching layer in and out of preserve-3d</title>
   5
   6   <style type="text/css" media="screen">
   7     body {
   8       font-family: 'Lucida Grande', Verdana, Arial;
   9       font-size: 12px;
  10     }
  11     #container {
  12       position: relative;
  13       height: 300px;
  14       width: 300px;
  15       margin: 50px 100px;
  16       border: 2px solid blue;
  17       -webkit-perspective: 500;
  18     }
  19
  20     #parent {
  21       margin: 10px;
  22       width: 280px;
  23       height: 280px;
  24       background-color: yellow;
  25       opacity: 0.8;
  26       -webkit-transform-style: preserve-3d;
  27       transform: rotateX(-60deg) rotateY(40deg);
  28     }
  29
  30     #parent > div {
  31       position: absolute;
  32       top: 40px;
  33       left: 40px;
  34       width: 200px;
  35       height: 200px;
  36       padding: 10px;
  37       -webkit-box-sizing: border-box;
  38       font-family: monospace;
  39       font-size: 12pt;
  40     }
  41
  42     #parent > :first-child {
  43       background-color: green;
  44       opacity:0.7;
  45       transform: translateZ(50px) rotateY(-40deg);
  46     }
  47   </style>
  48   <script type="text/javascript" charset="utf-8">
  49     if (window.testRunner) {
  50       testRunner.dumpAsText();
  51       testRunner.waitUntilDone();
  52     }
  53
  54     timeout = 100;
  55
  56     function startProgram()
  57     {
  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();
  66                 }
  67             }, timeout);
  68         }, timeout);
  69     }
  70     window.addEventListener('load', startProgram, false)
  71     </script>
  72 </head>
  73 <body>
  74
  75   <p>The green box appear angled out from the yellow box and embedded in it.</p>
  76   <div id="container">
  77     <div id="parent">
  78       <div>transform: translateZ(-100px) rotateY(45deg);</div>
  79     </div>
  80     <div id="layerTree"></div>
  81   </div>
  82
  83 </body>
  84 </html>