third_party/WebKit/LayoutTests/compositing/layer-creation/squashing-into-ancestor-clipping-layer-change.html

   1 <!DOCTYPE html>
   2 <style>
   3 #stacking {
   4   position: absolute;
   5   width: 200px;
   6   height: 200px;
   7   background-color: lightgreen;
   8 }
   9
  10 #clipper {
  11   width: 100px;
  12   height: 100px;
  13   background-color: lightblue;
  14   z-index: -1;
  15 }
  16
  17 .clipping {
  18   overflow: hidden;
  19 }
  20
  21 #composited {
  22   position: relative;
  23   top: 50px;
  24   width: 100px;
  25   height: 100px;
  26   transform: translateZ(0);
  27   background-color: salmon;
  28 }
  29
  30 #squashed {
  31   position: relative;
  32   top: -50px;
  33   width: 100px;
  34   height: 100px;
  35   background-color: green;
  36 }
  37 </style>
  38 <div id="stacking">
  39   <div id="clipper">
  40     <div id="composited"></div>
  41     <div id="squashed"></div>
  42   </div>
  43 <div>
  44 <pre></pre>
  45 <script>
  46 if (window.testRunner) {
  47   testRunner.dumpAsText();
  48 } else {
  49   alert('This test require window.testRunner.')
  50 }
  51
  52 window.internals.forceCompositingUpdate(document);
  53 document.querySelector('#clipper').className = 'clipping';
  54 window.internals.forceCompositingUpdate(document);
  55 document.querySelector('#clipper').className = '';
  56 window.internals.forceCompositingUpdate(document);
  57
  58 document.querySelector('#clipper').className = 'clipping';
  59 document.querySelector('pre').textContent = internals.layerTreeAsText(document);
  60 </script>