Same-page anchor: Account for <a> nested in <svg>

Follow-up to [#1285][]

While an `<a>` element is typically represented by an
[HTMLAnchorElement][], an `<a>` nested inside an `<svg>` element is
instead an [SVGAElement][].

Similarly, while [HTMLAnchorElement.href][] returns a `String`, the
[SVGAElement.href][] returns an instance of [SVGAnimatedString][], which
cannot be supported by neither calls to [String.startsWith][] nor
[RegExp.test][].

This commit adds explicit test coverage for a same-page navigation from
an `<a>` nested within an `<svg>`. To ensure that the value is a
`String`, replace `.href` with `getAttribute("href")`. This restores the
implementation to be closer to what was defined in [e591ea9][].

[#1285]: #1285
[HTMLAnchorElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
[SVGAElement]: https://developer.mozilla.org/en-US/docs/Web/API/SVGAElement
[HTMLAnchorElement.href]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement/href
[SVGAElement.href]: https://developer.mozilla.org/en-US/docs/Web/API/SVGAElement/href
[SVGAnimatedString]: https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedString
[String.startsWith]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
[RegExp.test]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
[e591ea9]: e591ea9#diff-9c0ec1b0a889e599f3ff81590864dd9dc65684a86b41f1da75acc53fafed12e3R251-R256

Author: seanpdoyle

src/tests/fixtures/navigation.html

@@ -47,6 +47,8 @@ <h1>Navigation</h1>
       <p><a id="bare-target-link" href="/src/tests/fixtures/one.html" target>Bare target attribute link</a></p>
       <p><a id="same-origin-download-link" href="/intentionally_missing_fake_download.html" download="x.html">Same-origin download link</a></p>
       <svg width="600" height="100" viewbox="-300 -50 600 100"><text><a id="same-origin-link-inside-svg-element" href="/src/tests/fixtures/one.html">Same-origin link inside SVG element</a></text></svg>
+      <svg width="600" height="100" viewbox="-300 -50 600 100"><text><a id="same-origin-targeted-link-inside-svg-element" href="/src/tests/fixtures/one.html" target="_blank">Same-origin targeted link inside SVG element</a></text></svg>
+      <svg width="600" height="100" viewbox="-300 -50 600 100"><text><a id="same-page-link-inside-svg-element" href="#main">Same-page link inside SVG element</a></text></svg>
       <svg width="600" height="100" viewbox="-300 -50 600 100"><text><a id="cross-origin-link-inside-svg-element" href="about:blank">Cross-origin link inside SVG element</a></text></svg>
       <p><a id="same-origin-get-link-form" href="/src/tests/fixtures/navigation.html?a=one&b=two" data-turbo-method="get">Same-origin data-turbo-method=get link</a></p>
       <p><a id="same-origin-replace-post-link" href="/__turbo/redirect" data-turbo-method="post" data-turbo-action="replace">Same-origin data-turbo-action=replace link with post method</a></p>

src/tests/functional/navigation_tests.js

@@ -258,6 +258,18 @@ test("following a same-origin [target] link", async ({ page }) => {
   expect(await visitAction(page)).toEqual("load")
 })
 
+test("following a same-origin [target] link inside an SVG", async ({ page }) => {
+  const errors = []
+  await page.on("pageerror", e => errors.push(e))
+  const link = page.locator("#same-origin-targeted-link-inside-svg-element")
+  await link.focus()
+  const [popup] = await Promise.all([page.waitForEvent("popup"), page.keyboard.press("Enter")])
+
+  expect(pathname(popup.url())).toEqual("/src/tests/fixtures/one.html")
+  expect(await visitAction(page)).toEqual("load")
+  expect(errors, "raised an error").toHaveLength(0)
+})
+
 test("following a _self [target] link", async ({ page }) => {
   await page.click("#self-targeted-link")
 
@@ -301,6 +313,18 @@ test("following a same-origin link inside an SVG element", async ({ page }) => {
   expect(await visitAction(page)).toEqual("load")
 })
 
+test("following a same-page link inside an SVG element", async ({ page }) => {
+  const errors = []
+  await page.on("pageerror", e => errors.push(e))
+  const link = page.locator("#same-page-link-inside-svg-element")
+  await link.focus()
+  await page.keyboard.press("Enter")
+
+  await expect(page).toHaveURL(withHash("#main"))
+  expect(await isScrolledToSelector(page, "#main"), "scrolled to #main").toEqual(true)
+  expect(errors, "raised an error").toHaveLength(0)
+})
+
 test("following a cross-origin link inside an SVG element", async ({ page }) => {
   const link = page.locator("#cross-origin-link-inside-svg-element")
   await link.focus()

src/util.js

@@ -248,12 +248,13 @@ export function findLinkFromClickTarget(target) {
   const link = findClosestRecursively(target, "a[href], a[xlink\\:href]")
 
   if (!link) return null
-  if (link.href.startsWith("#")) return null
   if (link.hasAttribute("download")) return null
 
   const linkTarget = link.getAttribute("target")
   if (linkTarget && linkTarget !== "_self") return null
 
+  if (/\A#/.test(link.getAttribute("href"))) return null
+
   return link
 }