Google Git
Sign in
chromium / external / w3c / web-platform-tests / cef0f785d29fdc0df093f4551c4759ab00d1b0bf / . / scroll-to-text-fragment / scroll-to-text-fragment-target.html
blob: bc9ee9e6bc550d4e149354e8a989ef7ba29520ca [file] [log] [blame]
Nick Burris3c56e312019-08-22 14:48:48[diff] [blame]1<!doctype html>
2<title>Navigating to a text fragment anchor</title>
Nick Burris97e6b872019-12-11 19:06:38[diff] [blame]3<script src="stash.js"></script>
Nick Burris3c56e312019-08-22 14:48:48[diff] [blame]4<script>
Nick Burris603a2712019-09-06 21:16:47[diff] [blame]5function isInView(element) {
Nick Burrisc1c27e22019-11-04 23:46:41[diff] [blame]6 let rect = element.getBoundingClientRect();
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]7 return rect.top >= 0 && rect.top <= window.innerHeight
8 && rect.left >= 0 && rect.left <= window.innerWidth;
Nick Burris603a2712019-09-06 21:16:47[diff] [blame]9}
10
Nick Burris3c56e312019-08-22 14:48:48[diff] [blame]11function checkScroll() {
Nick Burrisc1c27e22019-11-04 23:46:41[diff] [blame]12 let position = 'unknown';
Nick Burris603a2712019-09-06 21:16:47[diff] [blame]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';
Nick Burris186457c2019-11-06 17:55:01[diff] [blame]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';
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]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';
Nick Burris603a2712019-09-06 21:16:47[diff] [blame]31
Nick Burris7139b3d2019-12-18 18:58:12[diff] [blame]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 };
Nick Burris97e6b872019-12-11 19:06:38[diff] [blame]47
48 let key = (new URL(document.location)).searchParams.get("key");
49 stashResults(key, results);
Nick Burris3c56e312019-08-22 14:48:48[diff] [blame]50}
51</script>
52<style>
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]53 .scroll-section {
54 /* 1000px margin on top and bottom so only one section can be in view. */
55 margin: 1000px 0px;
Nick Burris3c56e312019-08-22 14:48:48[diff] [blame]56 }
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]57 #hidden {
58 visibility: hidden;
Nick Burris29beb462019-08-27 20:02:08[diff] [blame]59 }
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]60 #horizontal-scroll {
61 margin-left: 2000px;
Nick Burris186457c2019-11-06 17:55:01[diff] [blame]62 }
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]63 #display-none {
64 display: none;
Nick Burris186457c2019-11-06 17:55:01[diff] [blame]65 }
Nick Burris3c56e312019-08-22 14:48:48[diff] [blame]66</style>
Nick Burris603a2712019-09-06 21:16:47[diff] [blame]67<body onload="window.requestAnimationFrame(checkScroll)">
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]68 <div id="element" class="scroll-section">Element</div>
69 <p id="text" class="scroll-section">This is a test page !$'()*+./:;=?@_~ &,- &#x30cd;&#x30b3;</p>
70 <p id="more-text" class="scroll-section">More test page text</p>
Nick Burris7139b3d2019-12-18 18:58:12[diff] [blame]71 <div class="scroll-section">
Nick Burris186457c2019-11-06 17:55:01[diff] [blame]72 <div>
73 <p>prefix</p>
Nick Burris7139b3d2019-12-18 18:58:12[diff] [blame]74 <p id="cross-node-context">test page</p>
Nick Burris186457c2019-11-06 17:55:01[diff] [blame]75 </div>
76 <div><p>suffix</p></div>
77 </div>
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]78 <p id="text-directive-parameters" class="scroll-section">this,is,test,page</p>
79 <div id="shadow-parent" class="scroll-section"></div>
80 <script>
81 let shadow = document.getElementById("shadow-parent").attachShadow({mode: 'open'});
Nick Burris7139b3d2019-12-18 18:58:12[diff] [blame]82 shadow.innerHTML = '<p id="shadow">shadow text</p>';
Nick Burrisfb6ccd52019-11-12 03:34:29[diff] [blame]83 </script>
84 <p id="hidden" class="scroll-section">hidden text</p>
85 <p id="horizontal-scroll" class="scroll-section">horizontally scrolled text</p>
86 <p id="display-none" class="scroll-section">display none</p>
Nick Burris3c56e312019-08-22 14:48:48[diff] [blame]87</body>