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