third_party/WebKit/LayoutTests/compositing/overflow/content-gains-scrollbars.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/run-after-layout-and-paint.js"></script>
   3 <style>
   4 .container {
   5 width: 100px;
   6 height:100px;
   7 position:absolute;
   8 transform:translateZ(0);
   9 overflow:auto;
  10 }
  11
  12 .content {
  13 transform: translateZ(0);
  14 position:absolute;
  15 width:10px;
  16 height:10px;
  17 }
  18
  19 .tall {
  20 height:200px;
  21 }
  22
  23 .wide {
  24 width:200px;
  25 }
  26
  27 .resizeWidget {
  28 resize: both;
  29 }
  30
  31 </style>
  32 <pre id="layerTree"></pre>
  33 <div class="container">
  34   <div id="vertical" class="content"></div>
  35 </div>
  36 <div class="container">
  37   <div id="horizontal" class="content"></div>
  38 </div>
  39 <div class="container">
  40   <div id="both" class="content"></div>
  41 </div>
  42 <div id="corner" class="container">
  43   <div class="content"></div>
  44 </div>
  45 <script>
  46 function finishTest() {
  47     document.getElementById("vertical").classList.add("tall"); // topmost div gets a vertical scrollbar
  48     document.getElementById("horizontal").classList.add("wide"); // second div gets a horizontal scrollbar
  49     document.getElementById("both").classList.add("wide"); // third div gets both
  50     document.getElementById("both").classList.add("tall"); // vertical and horizontal scrollbars
  51     document.getElementById("corner").classList.add("resizeWidget"); // bottom div gets a resize corner but no scrollbars
  52     if (window.testRunner) {
  53         document.getElementById("layerTree").innerText = window.internals.layerTreeAsText(document);
  54         testRunner.notifyDone();
  55     }
  56 }
  57
  58 if (window.testRunner) {
  59     testRunner.dumpAsText();
  60     testRunner.waitUntilDone();
  61 }
  62
  63 runAfterLayoutAndPaint(finishTest);
  64 </script>