src/third_party/WebKit/LayoutTests/compositing/gestures/gesture-tapHighlight-on-promoted-overflow-div-scrolled.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" type="text/css" href="resources/link-highlight-style.css">
   5     <script src="resources/link-highlight-helper.js"></script>
   6     <script>
   7       useMockHighlight();
   8       if (window.internals)
   9         window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
  10
  11       function runTest() {
  12         var targetDiv = document.getElementById('targetDiv');
  13         var resultDiv = document.getElementById('result');
  14
  15         if (window.internals)
  16           window.internals.forceCompositingUpdate(document);
  17
  18         var clientRect = document.getElementById('targetLink').getBoundingClientRect();
  19         x = (clientRect.left + clientRect.right) / 2;
  20         y = (clientRect.top + clientRect.bottom) / 2;
  21         if (window.testRunner) {
  22           testRunner.dumpAsTextWithPixelResults();
  23           testRunner.waitUntilDone();
  24         }
  25
  26         if (window.eventSender) {
  27           eventSender.gestureShowPress(x, y);
  28           targetDiv.scrollTop += 20;
  29           window.setTimeout(function() { window.testRunner.notifyDone(); }, 30);
  30         } else {
  31           debug("This test requires DumpRenderTree.");
  32         }
  33       }
  34     </script>
  35   </head>
  36   <body onload="runTest();">
  37     <div style="-webkit-transform: translateZ(0); position: relative; left: 10px; top: 10px"></div>
  38     <div id="targetDiv" style="position: relative; left: 10px; top: 40px; width: 200px; height: 100px; overflow-y: scroll; overflow-x: scroll;">
  39       <a href="">Link 1</a><br>
  40       <a href="">Link 2</a><br>
  41       <a href="">Link 3</a><br>
  42       <a class="opaqueHighlight" href="" id="targetLink">Target Link.</a><br>
  43       <a href="">Link 4</a><br>
  44       <a href="">Link 5</a><br>
  45     </div>
  46     <div style="position: relative; left: 10px; top: 80px">
  47       This test is successful if "Target Link" above is covered in a green
  48       rectangle with square corners and the list is partially scrolled.
  49     </div>
  50     <div id="result"></div>
  51   </body>
  52 </html>