Fixes click on inline element embedded in anchor inside <summary> bre…

…aks anchor. Previous to this CL, clicking on an inline element embedded in an anchor placed inside a <summary> tag will expand the <details> section instead of navigating to the anchor's href. However, when the anchor is placed outside of <summary>, it behaves correctly. The error is caused by DOMActivate event generated by the inline element. As DOMActivate bubbles up, it bypasses the anchor's event handler, reaches the <summary>, and is handled there. Once DOMActivate is handled, the original click event stops propagating and terminates. This behavior, however, differs from when the anchor tag is placed outside of the summary. DOMActivate isn't handled, and the original click event keeps bubbling up till it's handled by the anchor. DOMActivate event is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Element/DOMActivate_event. However, since blink still has code that depends on it, replacing it is outside of the scope for this fix. Instead, this fix is for the anchor element to handle the DOMActivate event as it bubbles up. The anchor event handler checks the underlying event of DOMActivate and handles it if it's a click. I also looked at an alternative fix by trying to prevent the DOMActivate event from bubbling up. But calling event.stopPropagation() doesn't work as the EventDispatcher::DispatchEventPostProcess doesn't check this status. Bug: 538283 Change-Id: I11fb072faa0563279d43a28e5dc19cee89906bf0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1928234 Reviewed-by: Kent Tamura <tkent@chromium.org> Reviewed-by: Mason Freed <masonfreed@chromium.org> Commit-Queue: Yu Han <yuzhehan@chromium.org> Cr-Commit-Position: refs/heads/master@{#718552}
tkntjsdw · Nov 25, 2019 · fa8e9c4 · fa8e9c4
1 parent cce5582
commit fa8e9c4
Showing 1 changed file with 77 additions and 0 deletions.
diff --git a/html/semantics/interactive-elements/the-summary-element/anchor-with-inline-element.html b/html/semantics/interactive-elements/the-summary-element/anchor-with-inline-element.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>summary element: clicking on anchor containing inline element</title>
+<link rel="author" title="Yu Han" href="mailto:yuzhehan@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/C/#the-summary-element">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<details id="details_i">
+  <summary>Anchor text is wrapped with &lt;i&gt; tag <a href="#with_i_tag"><i id="with_i">permalink</i></a></summary>
+  <p>asdf</p>
+</details>
+
+<details id="details_span">
+  <summary>This one uses &lt;span&gt;. <a href="#with_span_tag"><span id="with_span">permalink</span></a></summary>
+  <p>asdf</p>
+</details>
+
+<details id="details_svg">
+  <summary>
+    <svg style="width: 100px;" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+      <a href="#inside_svg_w_circle">
+        <circle id="svg_circle" cx="50" cy="40" r="35"/>
+      </a>
+      <a href="#inside_svg_w_text">
+        <text id="svg_text" x="50" y="90" text-anchor="middle">
+          &lt;circle&gt;
+        </text>
+      </a>
+    </svg>
+  </summary>
+  <p>asdf</p>
+</details>
+
+<script>
+function testClickingOnInlineElement(detailsId, targetId, expected, testName) {
+  const details = document.getElementById(detailsId);
+  const target = document.getElementById(targetId);
+  const test = async_test(testName);
+
+  const promise = new Promise((resolve, reject) => {
+    window.onhashchange = test.step_func_done(() => {
+      assert_false(details.open);
+      assert_true(location.hash === expected);
+      resolve();
+    });
+  });
+
+  if (target.click) {
+    target.click();
+  }
+  else {
+    // svg element don't have click method
+    target.dispatchEvent(new MouseEvent('click', {
+      view: window,
+      bubbles: true,
+      cancelable: true
+    }));
+  }
+  return promise;
+};
+
+async function testAll() {
+  try {
+    await testClickingOnInlineElement("details_i", "with_i", "#with_i_tag", "Expected <a> containing <i> to navigate");
+    await testClickingOnInlineElement("details_span", "with_span", "#with_span_tag", "Expected <a> containing <span> to navigate");
+    await testClickingOnInlineElement("details_svg", "svg_circle", "#inside_svg_w_circle", "Expected <a>, inside svg, containing <circle> to navigate");
+    await testClickingOnInlineElement("details_svg", "svg_text", "#inside_svg_w_text", "Expected <a>, inside svg, containing <text> to navigate");
+  } catch (exception) {
+    assert_unreached("should NOT-THROW exception");
+  }
+};
+
+var allTests = async_test("Clicking on anchor with embedded inline element should navigate instead of opening details");
+testAll().then(()=>{ allTests.done(); });
+</script>