fragment-navigation-02.html | Explore in Territory

<!DOCTYPE html>
<style>
html, body {
  margin: 0;
}
.spacer {
  background-color: blue;
  width: 100px;
  height: 10000px;
}
#test {
  background-color: green;
  width: 100px;
  height: 100px;
}
</style>
<div>
  <p>Clicking the red rectangle should attempt a navigation to the fragment identifier.</p>
  <svg width="300" height="200" onload="runTest()">
    <a xlink:href="#test">
      <rect width="100" height="100" fill="red"/>
    </a>
  </svg>
</div>
<div class="spacer"></div>
<div id="test"></div>
<div class="spacer"></div>
<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
  testRunner.dumpAsText();
}

function runTest() {
  var evt = document.createEvent("MouseEvents");
  var oldScrollOffset = window.scrollY;
  evt.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null); 
  document.querySelector('a').dispatchEvent(evt);
  window.setTimeout(function checkNavigation() {
    var hasHash = location.hash === '#test';
    var didScrollDown = oldScrollOffset < window.scrollY;
    var didNotScrollToDocBottom = window.scrollY + window.innerHeight < document.body.offsetHeight;
    var result = hasHash && didScrollDown && didNotScrollToDocBottom ? 'PASS' : 'FAIL';
    document.documentElement.appendChild(document.createTextNode(result));
    if (window.testRunner)
      testRunner.notifyDone();
  }, 0);
}
</script>
chromium/third_party/blink/web_tests/svg/custom/fragment-navigation-02.html
