src/third_party/WebKit/LayoutTests/svg/custom/fragment-navigation-02.html

   1 <!DOCTYPE html>
   2 <style>
   3 html, body {
   4   margin: 0;
   5 }
   6 .spacer {
   7   background-color: blue;
   8   width: 100px;
   9   height: 10000px;
  10 }
  11 #test {
  12   background-color: green;
  13   width: 100px;
  14   height: 100px;
  15 }
  16 </style>
  17 <div>
  18   <p>Clicking the red rectangle should attempt a navigation to the fragment identifier.</p>
  19   <svg width="300" height="200" onload="runTest()">
  20     <a xlink:href="#test">
  21       <rect width="100" height="100" fill="red"/>
  22     </a>
  23   </svg>
  24 </div>
  25 <div class="spacer"></div>
  26 <div id="test"></div>
  27 <div class="spacer"></div>
  28 <script>
  29 if (window.testRunner) {
  30   testRunner.waitUntilDone();
  31   testRunner.dumpAsText();
  32 }
  33
  34 function runTest() {
  35   var evt = document.createEvent("MouseEvents");
  36   var oldScrollOffset = window.scrollY;
  37   evt.initMouseEvent("click", true, true, window,
  38         0, 0, 0, 0, 0, false, false, false, false, 0, null);
  39   document.querySelector('a').dispatchEvent(evt);
  40   window.setTimeout(function checkNavigation() {
  41     var hasHash = location.hash === '#test';
  42     var didScrollDown = oldScrollOffset < window.scrollY;
  43     var didNotScrollToDocBottom = window.scrollY + window.innerHeight < document.body.offsetHeight;
  44     var result = hasHash && didScrollDown && didNotScrollToDocBottom ? 'PASS' : 'FAIL';
  45     document.documentElement.appendChild(document.createTextNode(result));
  46     if (window.testRunner)
  47       testRunner.notifyDone();
  48   }, 0);
  49 }
  50 </script>