<!DOCTYPE html>
<html>
  <head>
    <title>Find text in overflow node</title>
    <meta name="viewport" content="width=device-width">
    <script src="../../../../resources/testharness.js"></script>
    <script src="../../../../resources/testharnessreport.js"></script>
    <script type="text/javascript">
      setup({ "explicit_done": true });
      function height(id) {
        return document.getElementById(id).getBoundingClientRect().height;
      }
      function run() {
        if (!window.testRunner || !testRunner.runUIScript)
          return;

        var node = document.getElementById("scrollable");
        test(function() {
          assert_equals(node.scrollTop, 0);
        }, "Initial position of overflow node");
        var afterMatch3 = async_test("Position of overflow node after the three first results");
        var afterMatch4 = async_test("Position of overflow node after the fourth result");
        testRunner.runUIScript(`
          uiController.findString("match", 0, 4); // match
          uiController.findString("match", 0, 4); // match 2
          uiController.findString("match", 0, 4); // match 3
          uiController.uiScriptComplete("Done");
        `, afterMatch3.step_func_done(function() {
          assert_equals(node.scrollTop, 0);
          testRunner.runUIScript(`
            uiController.findString("match", 0, 4); // match 4
            uiController.uiScriptComplete("Done");
          `, afterMatch4.step_func_done(function() {
              assert_greater_than(node.scrollTop, 0);
              var expectedScrollTop = height("divBefore") + height("match4") / 2 - height("scrollable") / 2;
              assert_approx_equals(node.scrollTop, expectedScrollTop, 2);
          }));
        }));

        done();
      }
    </script>
    <style>
      #scrollable {
        border: 1px solid black;
        background: gray;
        width: 200px;
        height: 200px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
    </style>
  </head>
  <body onload="run()">
    <p>Use iOS Find UI to search for the text "match". The following overflow node should scroll to show the fourth result at its center.</p>
    <p>match 2</p>
    <p>match 3</p>
    <div id="scrollable">
      <div id="divBefore" style="height: 300px; background: linear-gradient(135deg, blue, cyan);"></div>
      <div id="match4">match 4</div>
      <div style="height: 300px; background: linear-gradient(135deg, blue, cyan);"></div>
    </div>
  </body>
</html>