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

        var findOptions = 1 << 6; // show find indicator
        var maxCount = 4;
        var node = document.getElementById("scrollable").contentWindow;
        test(function() {
          assert_equals(node.scrollY, 0);
        }, "Initial position of iframe node");
        var afterMatch3 = async_test("Position of iframe node after the three first results");
        var afterMatch4 = async_test("Position of iframe node after the fourth result");
        testRunner.runUIScript(`
          uiController.findString("match", ${findOptions}, ${maxCount}); // match
          uiController.findString("match", ${findOptions}, ${maxCount}); // match 2
          uiController.findString("match", ${findOptions}, ${maxCount}); // match 3
          uiController.uiScriptComplete("Done");
        `, afterMatch3.step_func_done(function() {
          assert_equals(node.scrollY, 0);
          testRunner.runUIScript(`
            uiController.findString("match", ${findOptions}, ${maxCount}); // match 4
            uiController.uiScriptComplete("Done");
          `, afterMatch4.step_func_done(function() {
              assert_greater_than(node.scrollY, 0);
              var expectedScrollY = height(node, "divBefore") + height(node, "match4") / 2 - height(window, "scrollable") / 2;
              assert_approx_equals(node.scrollY, expectedScrollY, 2);
          }));
        }));

        done();
      }
    </script>
    <style>
      iframe {
        border: 1px solid black;
        background: gray;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <p>Use iOS Find UI to search for the text "match". The following iframe node should scroll to show the fourth result at its center.</p>
    <p>match 2</p>
    <p>match 3</p>
    <iframe onload="run()" id="scrollable" srcdoc="<body style='margin: 0'><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></body>"></iframe>
  </body>
</html>