src/third_party/WebKit/LayoutTests/fast/events/touch/compositor-touch-hit-rects-non-composited-scroll.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link rel="stylesheet" href="resources/compositor-touch-hit-rects.css">
   5 <style>
   6 .scroll {
   7   overflow-y: scroll;
   8   overflow-x: hidden;
   9   border: 1px solid lightgrey;
  10   height: 30px;
  11 }
  12 #fixedPositionNestedContent {
  13     position: absolute;
  14     left: 310px;
  15 }
  16 #overflowwithborder {
  17   border: 6px solid lightblue;
  18   padding: 4px;
  19 }
  20 </style>
  21 </head>
  22 <body>
  23 <p id="description" style="height:20px">
  24 This test verifies the hit test regions given to the compositor specifically around non-composited overflow scroll elements.
  25 </p>
  26
  27 <div id="tests">
  28   <div class="scroll" id="scrollContainer">
  29     <div style='height: 10px;'></div>
  30     <div class="testcase" id="scrollContent">Scroll content</div>
  31     <div style='height: 30px;'></div>
  32   </div>
  33   <div class="scroll testcase" id="scrollContainerWithHandler">
  34     <div style='height: 10px;'></div>
  35     <div>Scroll content</div>
  36     <div style='height: 30px;'></div>
  37   </div>
  38   <div id="scroll2" class="scroll" style="margin-bottom: 10px">
  39     <div style='height: 10px;'></div>
  40     <div id="scroll2b" class="scroll">
  41       <div style='height: 10px;'></div>
  42       <div class="testcase" id="nestedContent">Nested content</div>
  43       <div style='height: 30px;'></div>
  44     </div>
  45     <div style='height: 30px;'></div>
  46   </div>
  47   <div id="scroll3" class="scroll" style="margin-bottom: 10px">
  48     <div style='height: 10px;'></div>
  49     <div class="testcase" id="fixedPositionContentContainer">
  50         Container
  51         <div id="fixedPositionNestedContent">Fixed content</div>
  52     </div>
  53     <div style='height: 30px;'></div>
  54   </div>
  55   <div id="scroll4" class="scroll" style="margin-bottom: 10px">
  56     <div style='height: 10px;'></div>
  57     <div id="overflowwithhandler" class="scroll testcase" style="height: 25px;">
  58       <div style='height: 30px;'></div>
  59       <div>overflow div</div>
  60     </div>
  61   </div>
  62   <div id="scroll5" class="scroll" style="margin-bottom: 10px">
  63     <div style='height: 10px;'></div>
  64     <div id="nonCompositedNonScrollableLayer" style="position: relative">
  65       <div style='height: 10px;'></div>
  66       <div class="testcase" id="divInsideNonScrollableLayer">touch handler</div>
  67       <div style='height: 60px;'></div>
  68     </div>
  69     <div style='height: 50px;'></div>
  70   </div>
  71   <div id="scroll6" class="scroll" style="margin-bottom: 10px">
  72     <div style='height: 10px;'></div>
  73     <div id="compositedLayer" style="-webkit-transform: translateZ(0)">
  74       <div style='height: 10px;'></div>
  75       <div class="testcase" id="divInsideCompositedLayer">div in composited</div>
  76     </div>
  77     <div style='height: 30px;'></div>
  78   </div>
  79   <div id="overflowwithborder" class="scroll testcase">
  80     <div style='height: 30px;'></div>
  81     <div>content</div>
  82     <div style='height: 60px;'></div>
  83   </div>
  84 </div>
  85
  86 <div id="console"></div>
  87 <script src="resources/compositor-touch-hit-rects.js"></script>
  88 <script>
  89 // Make fixed-position cases slightly more interesting
  90 window.scrollTo(0, 13);
  91
  92 if (window.internals) {
  93   window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(false);
  94 }
  95 </script>
  96 </body>