testing/web-platform/tests/scroll-to-text-fragment/scroll-to-text-fragment-target.html

   1 <!doctype html>
   2 <title>Navigating to a text fragment anchor</title>
   3 <script src="stash.js"></script>
   4 <script>
   5 function isInView(element) {
   6   let rect = element.getBoundingClientRect();
   7   return rect.top >= 0 && rect.top <= window.innerHeight
   8       && rect.left >= 0 && rect.left <= window.innerWidth;
   9 }
  10
  11 function checkScroll() {
  12   let position = 'unknown';
  13   if (window.scrollY == 0)
  14     position = 'top';
  15   else if (isInView(document.getElementById('element')))
  16     position = 'element';
  17   else if (isInView(document.getElementById('text')))
  18     position = 'text';
  19   else if (isInView(document.getElementById('more-text')))
  20     position = 'more-text';
  21   else if (isInView(document.getElementById('cross-node-context')))
  22     position = 'cross-node-context';
  23   else if (isInView(document.getElementById('text-directive-parameters')))
  24     position = 'text-directive-parameters';
  25   else if (isInView(document.getElementById('shadow-parent')))
  26     position = 'shadow-parent';
  27   else if (isInView(document.getElementById('hidden')))
  28     position = 'hidden';
  29   else if (isInView(document.getElementById('horizontal-scroll')) && window.scrollX > 0)
  30     position = 'horizontal-scroll';
  31
  32   let target = document.querySelector(":target");
  33
  34   if (!target && position == 'shadow-parent') {
  35     let shadow = document.getElementById("shadow-parent").shadowRoot.firstElementChild;
  36     if (shadow.matches(":target")) {
  37       target = shadow;
  38       position = 'shadow';
  39     }
  40   }
  41
  42   let results = {
  43     scrollPosition: position,
  44     href: window.location.href,
  45     target: target ? target.id : 'undefined'
  46   };
  47
  48   let key = (new URL(document.location)).searchParams.get("key");
  49   stashResultsThenClose(key, results);
  50 }
  51
  52 // Ensure two animation frames on load to test the fallback to element anchor,
  53 // which gets queued for the next frame if the text fragment is not found.
  54 window.onload = function() {
  55   window.requestAnimationFrame(function() {
  56     window.requestAnimationFrame(checkScroll);
  57   })
  58 }
  59 </script>
  60 <style>
  61   .scroll-section {
  62     /* 1000px margin on top and bottom so only one section can be in view. */
  63     margin: 1000px 0px;
  64   }
  65   #hidden {
  66     visibility: hidden;
  67   }
  68   #horizontal-scroll {
  69     margin-left: 2000px;
  70   }
  71   #display-none {
  72     display: none;
  73   }
  74 </style>
  75 <body>
  76   <div id="element" class="scroll-section">Element</div>
  77   <p id="text" class="scroll-section">
  78     This is a test page !$'()*+./:;=?@_~ &,- &#x30cd;&#x30b3;
  79     <br>
  80     foo foo foo bar bar bar
  81   </p>
  82   <p id="more-text" class="scroll-section">More test page text</p>
  83   <div class="scroll-section">
  84     <div>
  85       <p>prefix</p>
  86       <p id="cross-node-context">test page</p>
  87     </div>
  88     <div><p>suffix</p></div>
  89   </div>
  90   <p id="text-directive-parameters" class="scroll-section">this,is,test,page</p>
  91   <div id="shadow-parent" class="scroll-section"></div>
  92   <script>
  93     let shadow = document.getElementById("shadow-parent").attachShadow({mode: 'open'});
  94     shadow.innerHTML = '<p id="shadow">shadow text</p>';
  95   </script>
  96   <p id="hidden" class="scroll-section">hidden text</p>
  97   <p id="horizontal-scroll" class="scroll-section">horizontally scrolled text</p>
  98   <p id="display-none" class="scroll-section">display none</p>
  99 </body>