[scroll-to-text-fragment] Apply :target CSS pseudo-class to match.

Per the spec, the common ancestor element of the match range becomes the
target element[1] and should have the :target pseudo-class applied.

[1]
https://html.spec.whatwg.org/multipage/browsing-the-web.html#target-element

Bug: 959163
Change-Id: Idb462a17972f4758df9617653f03b88196fd565a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1965273
Reviewed-by: David Bokan <bokan@chromium.org>
Commit-Queue: Nick Burris <nburris@chromium.org>
Cr-Commit-Position: refs/heads/master@{#726031}

scroll-to-text-fragment/scroll-to-text-fragment-target.html

@@ -29,7 +29,21 @@
   else if (isInView(document.getElementById('horizontal-scroll')) && window.scrollX > 0)
     position = 'horizontal-scroll';
 
-  let results = { scrollPosition: position, href: window.location.href };
+  let target = document.querySelector(":target");
+
+  if (!target && position == 'shadow-parent') {
+    let shadow = document.getElementById("shadow-parent").shadowRoot.firstElementChild;
+    if (shadow.matches(":target")) {
+      target = shadow;
+      position = 'shadow';
+    }
+  }
+
+  let results = {
+    scrollPosition: position,
+    href: window.location.href,
+    target: target ? target.id : 'undefined'
+  };
 
   let key = (new URL(document.location)).searchParams.get("key");
   stashResults(key, results);
@@ -54,18 +68,18 @@
   <div id="element" class="scroll-section">Element</div>
   <p id="text" class="scroll-section">This is a test page !$'()*+./:;=?@_~ &,- &#x30cd;&#x30b3;</p>
   <p id="more-text" class="scroll-section">More test page text</p>
-  <div id="cross-node-context" class="scroll-section">
+  <div class="scroll-section">
     <div>
       <p>prefix</p>
-      <p>test page</p>
+      <p id="cross-node-context">test page</p>
     </div>
     <div><p>suffix</p></div>
   </div>
   <p id="text-directive-parameters" class="scroll-section">this,is,test,page</p>
   <div id="shadow-parent" class="scroll-section"></div>
   <script>
     let shadow = document.getElementById("shadow-parent").attachShadow({mode: 'open'});
-    shadow.innerHTML = '<p>shadow text</p>';
+    shadow.innerHTML = '<p id="shadow">shadow text</p>';
   </script>
   <p id="hidden" class="scroll-section">hidden text</p>
   <p id="horizontal-scroll" class="scroll-section">horizontally scrolled text</p>

scroll-to-text-fragment/scroll-to-text-fragment.html

@@ -202,7 +202,7 @@
   // Test text directive within shadow DOM
   {
     fragment: '#:~:text=shadow%20text',
-    expect_position: 'shadow-parent',
+    expect_position: 'shadow',
     description: 'Text directive should match text within shadow DOM'
   },
   // Test text directive within hidden and display none elements. These cases should not scroll into
@@ -236,6 +236,8 @@
 
     fetchResults(key, resolve, reject);
   }).then(data => {
+    // If the position is not 'top', the :target element should be the positioned element.
+    assert_true(data.scrollPosition == 'top' || data.target == data.scrollPosition);
     assert_equals(data.href.indexOf(':~:'), -1, 'Expected fragment directive to be stripped from the URL.');
     assert_equals(data.scrollPosition, test_case.expect_position,
                   `Expected ${test_case.fragment} (${test_case.description}) to scroll to ${test_case.expect_position}.`);