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

   1 <!DOCTYPE HTML>
   2 <!--
   3   This test creates a scenario where we have a squashing containment layer
   4   directly below a layer that applies perspective. We must ensure that the
   5   perspective transform is correctly propagated.
   6 -->
   7 <style>
   8 body {
   9     height: 100%;
  10     margin: 0;
  11 }
  12
  13 #container {
  14     height: 100vh;
  15     overflow-x: hidden;
  16     overflow-y: auto;
  17     perspective: 200px;
  18     perspective-origin: top left;
  19 }
  20
  21 .scrolled {
  22     position: absolute;
  23 }
  24
  25 #fg {
  26     width: 100px;
  27     height: 100px;
  28     background: blue;
  29     left: 100px;
  30     top: 100px;
  31 }
  32
  33 #bg {
  34     transform: translateZ(-100px);
  35     background: green;
  36     width: 800px;
  37     height: 800px;
  38 }
  39
  40 #tall {
  41     width: 10px;
  42     height: 8000px;
  43     background: white;
  44 }
  45 </style>
  46 <script>
  47 if (window.internals)
  48     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  49 </script>
  50 <div id="container">
  51   <div class="scrolled" id="bg"></div>
  52   <div class="scrolled" id="fg"></div>
  53   <div id="tall"></div>
  54 </div>
  55