third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-transformed-preserved-3d.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .container {
   7       position: relative;
   8     }
   9     .box {
  10       position: absolute;
  11       height: 150px;
  12       width: 100px;
  13       background-color: gray;
  14     }
  15     .green {
  16       height: 100px;
  17       background-color: green;
  18     }
  19     .box-container {
  20       position: absolute;
  21       -webkit-perspective: 200;
  22       -webkit-perspective-origin: 50px 50px;
  23      }
  24      .rotate-3d-start {
  25         transform: scale(0.5) rotateX(45deg) rotateY(45deg);
  26         -webkit-transform-origin: 50px 50px;
  27         -webkit-transform-style: preserve-3d;
  28      }
  29      .rotate-3d-end {
  30         transform: scale(1.0) rotateX(45deg) rotateY(45deg);
  31       }
  32     .top {
  33       top: 0px;
  34     }
  35     .bottom {
  36       top: 150px;
  37     }
  38     .left {
  39       left: 0px;
  40     }
  41     .right {
  42       left: 200px;
  43     }
  44     .center {
  45       left: 100px;
  46       top: 100px;
  47     }
  48     #layers {
  49       position: absolute;
  50       top: 350px;
  51     }
  52     .side {
  53       position: absolute;
  54       width: 98px;
  55       height: 88px;
  56       text-align: center;
  57       padding-top: 10px;
  58       background: rgba(0, 255, 0, 0.8);
  59       font-weight: bold;
  60       border: 1px solid green;
  61       -webkit-transform-origin: 50% 50%;
  62     }
  63     .side-1 {
  64       transform: translateZ(50px);
  65     }
  66     .side-2 {
  67       transform: rotateY(90deg) translateZ(50px);
  68     }
  69     .side-3 {
  70       transform: rotateY(180deg) translateZ(50px);
  71     }
  72     .side-4 {
  73       transform: rotateY(270deg) translateZ(50px);
  74     }
  75     .side-5 {
  76       transform: rotateX(90deg) translateZ(50px);
  77     }
  78     .side-6 {
  79       transform: rotateX(-90deg) translateZ(50px);
  80     }
  81   </style>
  82   <script>
  83     if (window.testRunner)
  84       testRunner.dumpAsText();
  85
  86     function runTest()
  87     {
  88       var layerTrees = "";
  89
  90       if (window.testRunner)
  91         layerTrees = "Before:\n" + window.internals.layerTreeAsText(document);
  92
  93       // Rotate the first green box, so that it overlaps the first gray box in the container.
  94       // That should force the creation of composited layers for all the other green boxes.
  95       document.getElementById("camera").classList.add("rotate-3d-end");
  96
  97       if (window.testRunner) {
  98         layerTrees += "\nAfter:\n" + window.internals.layerTreeAsText(document);
  99         document.getElementById('layers').innerText = layerTrees;
 100         testRunner.notifyDone();
 101       }
 102     }
 103     window.addEventListener('load', runTest, false);
 104   </script>
 105 </head>
 106 <body>
 107   <!--
 108     Testing that 3D transforms are not forcing layers to become composited without checking for overlapping areas first.
 109     In the first state, the green box is not rotated, so it doesn't overlap the gray ones, meaning that only the gray box
 110     will become composited.
 111     In the second state, the green box is rotated and will overlap the following layers, meaning that they are all forced to
 112     get composited.
 113     In the end there should be one rotated green box in the middle and two gray bars on the margins. Gray boxes
 114     should display in front.
 115   -->
 116   <div class="container">
 117     <div id="green-box" class="center box-container">
 118       <div id="camera" class="rotate-3d-start">
 119         <div class="side side-1">1</div>
 120         <div class="side side-2">2</div>
 121         <div class="side side-3">3</div>
 122         <div class="side side-4">4</div>
 123         <div class="side side-5">5</div>
 124         <div class="side side-6">6</div>
 125       </div>
 126     </div>
 127       <div class="box top left"></div>
 128       <div class="box top right"></div>
 129       <div class="box bottom left"></div>
 130       <div class="box bottom right"></div>
 131     </div>
 132   <pre id="layers">Layer tree goes here in DRT</pre>
 133 </body>
 134 </html>