src/third_party/WebKit/LayoutTests/fast/events/touch/compositor-touch-hit-rects-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: 50px;
  11 }
  12 #overflowwithborder {
  13   border: 6px solid lightblue;
  14   padding: 4px;
  15 }
  16 #transformed {
  17   -webkit-transform: translate3d(10px, 10px, 0);
  18 }
  19 .relative {
  20   position: relative;
  21   /* ensure it doesn't interfere with subsequent layer promotions */
  22   z-index: -1;
  23 }
  24 </style>
  25 </head>
  26 <body>
  27 <p id="description">
  28 This test verifies the hit test regions given to the compositor specifically around composited
  29 overflow scroll elements.
  30 </p>
  31
  32 <div id="tests">
  33   <div id="scroll1" class="scroll">
  34     <div style='height: 13px;'></div>
  35     <div class="testcase" id="scrollContent">Scroll content</div>
  36     <div style='height: 50px;'></div>
  37   </div>
  38   <div id="scroll5" class="scroll">
  39     <div>
  40       <div style='height: 13px;'></div>
  41       <div class="testcase" id="scrollContent5">Scroll content 5</div>
  42       <div id="scroll5spacer" style='height: 50px;'></div>
  43     </div>
  44   </div>
  45   <div id="scroll6" class="scroll">
  46     <div>
  47       <div style='height: 13px;'></div>
  48       <div class="testcase relative" id="scrollContent6">Scroll content 6</div>
  49       <div id="scroll6spacer" style='height: 50px;'></div>
  50     </div>
  51   </div>
  52   <div id="scroll2" class="scroll">
  53     <div style='height: 10px;'></div>
  54     <div id="scroll2b" class="scroll">
  55       <div style='height: 30px;'></div>
  56       <div class="testcase" id="nestedContent">Nested content</div>
  57       <div style='height: 30px;'></div>
  58     </div>
  59     <div style='height: 50px;'></div>
  60   </div>
  61   <div id="scroll4" class="scroll">
  62     <div style='height: 10px;'></div>
  63     <div id="overflowwithhandler" class="scroll testcase">
  64       <div style='height: 30px;'></div>
  65       <div>overflow div with a touch handler</div>
  66       <div style='height: 60px;'></div>
  67     </div>
  68     <div style='height: 50px;'></div>
  69   </div>
  70   <div id="overflowwithborder" class="scroll testcase">
  71     <div style='height: 30px;'></div>
  72     <div>overflow div with a touch handler and large border</div>
  73     <div style='height: 60px;'></div>
  74   </div>
  75   <!-- Note this case needs to be last because the transform can disable
  76        accelerated overflow scrolling of any following elements -->
  77   <div id="scroll3" class="scroll">
  78     <div style='height: 13px;'></div>
  79     <div class="testcase" id="withTransform">
  80       <div id="transformed">Transformed</div>
  81     </div>
  82     <div style='height: 50px;'></div>
  83   </div>
  84
  85 </div>
  86
  87 <div id="console"></div>
  88 <script src="resources/compositor-touch-hit-rects.js"></script>
  89 <script>
  90
  91 // Scroll after layout has finished.
  92 preRunHandlerForTest['scrollContent'] = function(e) {
  93     // Scroll so the rect is visible but slighly clipped.
  94     document.getElementById('scroll1').scrollTop = 15;
  95 };
  96
  97 preRunHandlerForTest['scrollContent5'] = function(e) {
  98     document.getElementById('scroll5').scrollTop = 5;
  99     // force layout after scroll position changed
 100     document.getElementById('scroll5spacer').style.height="60px";
 101 };
 102
 103 preRunHandlerForTest['scrollContent6'] = function(e) {
 104     document.getElementById('scroll6').scrollTop = 5;
 105     // force layout after scroll position changed
 106     document.getElementById('scroll6spacer').style.height="60px";
 107 };
 108
 109 preRunHandlerForTest['nestedContent'] = function(e) {
 110     document.getElementById('scroll2').scrollTop = 20;
 111     document.getElementById('scroll2b').scrollTop = 18;
 112 };
 113
 114 preRunHandlerForTest['withTransform'] = function(e) {
 115     document.getElementById('scroll3').scrollTop = 20;
 116 };
 117
 118 preRunHandlerForTest['overflowWithHandler'] = function(e) {
 119     document.getElementById('scroll4').scrollTop = 20;
 120     document.getElementById('overflowWithHandler').scrollTop = 18;
 121 };
 122
 123 preRunHandlerForTest['overflowwithborder'] = function(e) {
 124     document.getElementById('overflowwithborder').scrollTop = 18;
 125 };
 126
 127 if (window.internals) {
 128     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
 129 }
 130 </script>
 131 </body>