src/third_party/WebKit/LayoutTests/compositing/squashing/squashing-does-not-stop-transform-propagation-expected.html

   1 <!DOCTYPE HTML>
   2 <style>
   3 body {
   4     height: 100%;
   5     margin: 0;
   6 }
   7
   8 #container {
   9     height: 100vh;
  10     overflow-x: hidden;
  11     overflow-y: auto;
  12     perspective: 200px;
  13     perspective-origin: top left;
  14 }
  15
  16 .scrolled {
  17     position: absolute;
  18 }
  19
  20 #fg {
  21     width: 100px;
  22     height: 100px;
  23     background: blue;
  24     left: 100px;
  25     top: 100px;
  26     /* This causes fg to be separately composited, removing the need for the
  27        squashing containment layer. Should have no visible effect. */
  28     will-change: transform;
  29 }
  30
  31 #bg {
  32     transform: translateZ(-100px);
  33     background: green;
  34     width: 800px;
  35     height: 800px;
  36 }
  37
  38 #tall {
  39     width: 10px;
  40     height: 8000px;
  41     background: white;
  42 }
  43 </style>
  44 <script>
  45 if (window.internals)
  46     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  47 </script>
  48 <div id="container">
  49   <div class="scrolled" id="bg"></div>
  50   <div class="scrolled" id="fg"></div>
  51   <div id="tall"></div>
  52 </div>
  53