test_bug66619.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=66619

-->

<head>

  <title>Test for Bug 66619</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

</head>

<body onload="run()">

<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=66619">Mozilla Bug 66619</a>

<p id="display"></p>

<div id="content" style="display: none">

</div>

<pre id="test">

<script class="testbody" type="text/javascript">

/** Test for Bug 66619 */

SimpleTest.waitForExplicitFinish();

function assert_fully_in_view(element) {

  let rect = element.getBoundingClientRect();

  ok(rect.top >= 0, `${element.id} top`);

  ok(rect.bottom <= window.innerHeight, `${element.id} bottom`);

function run() {

  is(window.scrollY, 0, "window should initially be at top");

  let first = document.getElementById("first");

  let second = document.getElementById("second");

  let third = document.getElementById("third");

  first.focus();

  let firstOffset = window.scrollY;

  isnot(firstOffset, 0, "we scrolled to first anchor");

  ok(firstOffset + window.innerHeight > 4000,

     "we scrolled enough to show the anchor");

  assert_fully_in_view(first);

  window.scrollTo(0, 0);

  second.focus();

  let secondOffset = window.scrollY;

  assert_fully_in_view(second);

  window.scrollTo(0, 0);

  third.focus();

  let thirdOffset = window.scrollY;

  assert_fully_in_view(third);

  ok(secondOffset > firstOffset, "we scrolled the second line of the anchor into view");

  ok(thirdOffset > secondOffset, "we scrolled the second line of the anchor into view");

  window.scrollTo(0, 0); // make the results visible

  SimpleTest.finish();

</script>

</pre>

<div style="height:4000px"></div>

<a id="first"  href="http://www.mozilla.org/">first<br>link</a>

<a id="second" href="http://www.mozilla.org/">second link</a>

<a id="third"  href="http://www.mozilla.org/">third<br>link</a>

<div style="height:4000px"></div>

</body>

</html>