src/third_party/WebKit/LayoutTests/compositing/layer-creation/squashing-into-ancestor-clipping-layer-change-removal.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   overflow: scroll;
  24   top: 50px;
  25   width: 100px;
  26   height: 100px;
  27   transform: translateZ(0);
  28   background-color: salmon;
  29 }
  30
  31 #tall {
  32   width: 50px;
  33   height: 500px;
  34   background-color: yellow;
  35 }
  36
  37 #squashed {
  38   position: relative;
  39   top: -50px;
  40   width: 100px;
  41   height: 100px;
  42   background-color: green;
  43 }
  44 </style>
  45 <div id="stacking">
  46   <div id="clipper">
  47     <div id="composited">
  48       <div id="tall"></div>
  49     </div>
  50     <div id="squashed"></div>
  51   </div>
  52 <div>
  53 This test passes if it doesn't crash.
  54 <script>
  55 if (window.testRunner) {
  56     testRunner.dumpAsText();
  57     internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
  58     internals.settings.setLayerSquashingEnabled(true);
  59 } else {
  60     alert('This test require window.testRunner.')
  61 }
  62
  63 window.internals.forceCompositingUpdate(document);
  64 document.querySelector('#clipper').className = 'clipping';
  65 window.internals.forceCompositingUpdate(document);
  66 document.querySelector('#composited').remove();
  67 window.internals.forceCompositingUpdate(document);
  68 </script>