src/third_party/WebKit/LayoutTests/compositing/squashing/opacity-squashed-owner.html

   1 <!DOCTYPE html>
   2 <style>
   3   .set {
   4     position: absolute;
   5     top: 8px;
   6   }
   7   .box {
   8     height: 100px;
   9     width: 100px;
  10     background-color: lightblue;
  11   }
  12   .squashed {
  13     height: 40px;
  14     width: 40px;
  15     background-color: lightgreen;
  16     position: absolute;
  17     left: 16px;
  18   }
  19   .composited {
  20     transform: translateZ(0px);
  21   }
  22   .opaque {
  23     opacity: 0.5;
  24   }
  25 </style>
  26 <!-- This test checks that setting the opacity of the owner of a squashed layer only affects that layer, and not the squashed layers. -->
  27
  28 <!-- This div will be the "owner" of the squashing layer -->
  29 <div id="target" class="composited box"></div>
  30 <!-- These divs will be squashed into a layer containing them and the owner -->
  31 <div class="squashed" style="top: 4px"></div>
  32 <div class="squashed" style="top: 54px"></div>
  33 <pre id="layers">Layer tree goes here in DRT</pre>
  34 <script>
  35     if (window.testRunner)
  36         testRunner.dumpAsText();
  37
  38     if (window.testRunner) {
  39       internals.settings.setLayerSquashingEnabled(true);
  40     }
  41     document.getElementById("target").classList.add("opaque");
  42
  43     var layersResult = document.getElementById('layers');
  44     if (window.testRunner)
  45         layersResult.innerText = window.internals.layerTreeAsText(document);
  46 </script>