third_party/WebKit/LayoutTests/compositing/squashing/do-not-squash-non-self-painting-layer.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4   <head>
   5     <script>
   6       if (window.testRunner)
   7         testRunner.dumpAsText();
   8
   9       window.onload = function() {
  10         document.getElementById("item-body").style.display = "block";
  11
  12         function runTest() {
  13           var pre = document.createElement('pre');
  14           if (!window.internals) {
  15             var description = "This test ensures non-self-painting elements don't"
  16               + "get squashed.";
  17             pre.innerHTML = description;
  18           } else {
  19             document.body.offsetTop;
  20             pre.innerHTML = internals.layerTreeAsText(document);
  21           }
  22           document.body.appendChild(pre);
  23         }
  24
  25         runTest();
  26       };
  27     </script>
  28     <style>
  29       .container {
  30         overflow: auto;
  31       }
  32
  33       #floated-container {
  34         float: left;
  35         height: 100px;
  36         overflow: auto;
  37       }
  38
  39       #composited-container {
  40         backface-visibility: hidden;
  41       }
  42
  43       #empty-block {
  44         height: 200px;
  45       }
  46
  47       #item-body {
  48         display: none;
  49         background-color: blue;
  50         height: 40px;
  51         width: 40px;
  52       }
  53     </style>
  54   </head>
  55
  56   <body>
  57
  58     <div id="composited-container">
  59       <div id="floated-container">
  60         <div id="empty-block"></div>
  61       </div>
  62     </div>
  63
  64     <div id="content-container" class="container">
  65       <div id="item-title">Item 1</div>
  66       <div id="item-body"></div>
  67     </div>
  68
  69   </body>
  70 </html>