third_party/WebKit/LayoutTests/compositing/gestures/gesture-tapHighlight-on-promoted-overflow-div-scrolled-expected.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       function runTest() {
   8         var targetDiv = document.getElementById('targetDiv');
   9         targetDiv.scrollTop += 20;
  10
  11         var highlight = createCompositedHighlight(document.getElementById('targetLink'));
  12
  13         if (window.testRunner) {
  14           testRunner.dumpAsTextWithPixelResults();
  15         }
  16       }
  17     </script>
  18     <script src="resources/link-highlight-helper.js"></script>
  19   </head>
  20   <body onload="runTest();">
  21     <div style="transform: translateZ(0); position: relative; left: 10px; top: 10px"></div>
  22     <div id="targetDiv" style="position: relative; left: 10px; top: 40px; width: 200px; height: 100px; overflow-y: scroll; overflow-x: scroll;">
  23       <a href="">Link 1</a><br>
  24       <a href="">Link 2</a><br>
  25       <a href="">Link 3</a><br>
  26       <a href="" class="activeLink" id="targetLink">Target Link.</a><br>
  27       <a href="">Link 4</a><br>
  28       <a href="">Link 5</a><br>
  29     </div>
  30     <div style="position: relative; left: 10px; top: 80px">
  31       This test is successful if "Target Link" above is covered in a green
  32       rectangle with square corners and the list is partially scrolled.
  33     </div>
  34     <div id="result"></div>
  35   </body>
  36 </html>