src/third_party/WebKit/LayoutTests/compositing/layer-creation/overlap-animation-container.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .container {
   7       width: 120px;
   8       position: relative;
   9       left: 50px;
  10       z-index: 0; /* create stacking context */
  11       border: 1px solid black;
  12       background-color: white;
  13     }
  14
  15     .box {
  16       position: relative;
  17       width: 100px;
  18       height: 100px;
  19       margin: 10px;
  20       background-color: blue;
  21     }
  22
  23     .force-layer {
  24       transform: translateZ(-1px);
  25     }
  26
  27     .rotate-45deg {
  28       transform: rotate(45deg);
  29     }
  30
  31     .yellow {
  32       background-color: yellow;
  33     }
  34
  35     .gray {
  36       background-color: gray;
  37     }
  38
  39     .green {
  40       background-color: green;
  41       outline: 1px solid black;
  42     }
  43
  44     .animating1 {
  45       -webkit-animation: translate1 2s linear infinite alternate;
  46     }
  47
  48     @-webkit-keyframes translate1 {
  49       from { transform: translate(0px, -110px); }
  50       to   { transform: translate(0px, 700px); }
  51     }
  52   </style>
  53   <script>
  54     if (window.testRunner) {
  55       testRunner.dumpAsText();
  56       testRunner.waitUntilDone();
  57     }
  58
  59     function queueBoxForAnimation(elementId, animationClass, callback) {
  60       var box = document.getElementById(elementId);
  61       box.addEventListener('webkitAnimationStart', callback, false);
  62       box.classList.add(animationClass);
  63     }
  64
  65     function runTest()
  66     {
  67       queueBoxForAnimation("to-animate1", "animating1", animationStarted);
  68     }
  69
  70     function animationStarted()
  71     {
  72       var layerTrees = "";
  73
  74       if (window.testRunner) {
  75         var layersElement = document.getElementById('layers');
  76         // Make sure we don't include the #layers element in the tree. The text size
  77         // might differ between platforms.
  78         layersElement.style.display = "none";
  79         var layerText = window.internals.layerTreeAsText(document);
  80         // The animation can progress before the start event is handled, so remove the
  81         // effects as they can vary.
  82         layerText = layerText.replace(/\[.*,.*,.*,.*\]/g, '[...]');
  83         layerTrees = "Before:\n" + layerText;
  84       }
  85
  86       // Rotate the first green box, so that it overlaps the first gray box in the container.
  87       // That should force the creation of composited layers for all the other green boxes.
  88       document.getElementById("first-green-box").classList.add("rotate-45deg");
  89
  90       if (window.testRunner) {
  91         var layerText = window.internals.layerTreeAsText(document);
  92         // The animation can progress before the start event is handled, so remove the
  93         // effects as they can vary.
  94         layerText = layerText.replace(/\[.*,.*,.*,.*\]/g, '[...]');
  95         layerTrees += "\nAfter:\n" + layerText;
  96         layersElement.style.display = "block";
  97         layersElement.innerText = layerTrees;
  98         testRunner.notifyDone();
  99       }
 100     }
 101     window.addEventListener('load', runTest, false);
 102   </script>
 103 </head>
 104 <body>
 105   <!-- Testing that compositor doesn't create unnecessary composited layers when they could be drawn in parents backing texture.
 106        The green boxes should not have composited layers.
 107   -->
 108   <!-- This div will not get a layer -->
 109   <div class="box gray"></div>
 110   <div id="to-animate1" class="box"></div>
 111   <div class="container">
 112     <!-- Force a composited box inside the container. The fact that there's an animation going behind the parent container,
 113     should not force the remaining children of this element create their own composited layers. -->
 114     <div class="box gray force-layer"></div>
 115     <!-- This following have no reason to get a layer, as the parent will get one. -->
 116     <div id="first-green-box" class="box green"></div>
 117     <div class="box green rotate-45deg"></div>
 118     <div class="box green"></div>
 119   </div>
 120   <!-- This div will also get a layer -->
 121   <div class="box yellow"></div>
 122   <pre id="layers">Layer tree goes here in DRT</pre>
 123 </body>
 124 </html>