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.setPreferCompositingToLCDTextEnabled(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           // FIXME: This is needed to make link highlighting work by marking paint as dirty. crbug.com/415702
  29           document.querySelector("#targetLink").style.color = "red";
  30           targetDiv.scrollTop += 20;
  31           window.setTimeout(function() { window.testRunner.notifyDone(); }, 30);
  32         } else {
  33           debug("This test requires DumpRenderTree.");
  34         }
  35       }
  36     </script>
  37   </head>
  38   <body onload="runTest();">
  39     <div style="transform: translateZ(0); position: relative; left: 10px; top: 10px"></div>
  40     <div id="targetDiv" style="position: relative; left: 10px; top: 40px; width: 200px; height: 100px; overflow-y: scroll; overflow-x: scroll;">
  41       <a href="">Link 1</a><br>
  42       <a href="">Link 2</a><br>
  43       <a href="">Link 3</a><br>
  44       <a class="opaqueHighlight" href="" id="targetLink">Target Link.</a><br>
  45       <a href="">Link 4</a><br>
  46       <a href="">Link 5</a><br>
  47     </div>
  48     <div style="position: relative; left: 10px; top: 80px">
  49       This test is successful if "Target Link" above is covered in a green
  50       rectangle with square corners and the list is partially scrolled.
  51     </div>
  52     <div id="result"></div>
  53   </body>
  54 </html>