Bug 1037709 - Part 2: Make element in a shadow DOM also handling accesskey; r=smaug

This is tracked by https://github.com/whatwg/html/issues/4385 standards-wise and
the tentative outcome from the standards discussion is that accesskey should work
across tree boundaries.

Differential Revision: https://phabricator.services.mozilla.com/D110426
This commit is contained in:
Edgar Chen 2021-04-01 17:52:40 +00:00
Родитель 01fd3e83a9
Коммит 96e56b9597
5 изменённых файлов: 134 добавлений и 4 удалений

Просмотреть файл

@ -4486,7 +4486,7 @@ void Element::RegUnRegAccessKey(bool aDoReg) {
} }
// We have an access key, so get the ESM from the pres context. // We have an access key, so get the ESM from the pres context.
if (nsPresContext* presContext = GetPresContext(eForUncomposedDoc)) { if (nsPresContext* presContext = GetPresContext(eForComposedDoc)) {
EventStateManager* esm = presContext->EventStateManager(); EventStateManager* esm = presContext->EventStateManager();
// Register or unregister as appropriate. // Register or unregister as appropriate.

Просмотреть файл

@ -438,8 +438,11 @@ nsresult nsGenericHTMLElement::BindToTree(BindContext& aContext,
nsresult rv = nsGenericHTMLElementBase::BindToTree(aContext, aParent); nsresult rv = nsGenericHTMLElementBase::BindToTree(aContext, aParent);
NS_ENSURE_SUCCESS(rv, rv); NS_ENSURE_SUCCESS(rv, rv);
if (IsInUncomposedDoc()) { if (IsInComposedDoc()) {
RegUnRegAccessKey(true); RegUnRegAccessKey(true);
}
if (IsInUncomposedDoc()) {
if (HasName() && CanHaveName(NodeInfo()->NameAtom())) { if (HasName() && CanHaveName(NodeInfo()->NameAtom())) {
aContext.OwnerDoc().AddToNameTable( aContext.OwnerDoc().AddToNameTable(
this, GetParsedAttr(nsGkAtoms::name)->GetAtomValue()); this, GetParsedAttr(nsGkAtoms::name)->GetAtomValue());
@ -477,7 +480,7 @@ nsresult nsGenericHTMLElement::BindToTree(BindContext& aContext,
} }
void nsGenericHTMLElement::UnbindFromTree(bool aNullParent) { void nsGenericHTMLElement::UnbindFromTree(bool aNullParent) {
if (IsInUncomposedDoc()) { if (IsInComposedDoc()) {
RegUnRegAccessKey(false); RegUnRegAccessKey(false);
} }
@ -2407,7 +2410,7 @@ bool nsGenericHTMLElement::IsHTMLFocusable(bool aWithMouse, bool* aIsFocusable,
bool nsGenericHTMLElement::PerformAccesskey(bool aKeyCausesActivation, bool nsGenericHTMLElement::PerformAccesskey(bool aKeyCausesActivation,
bool aIsTrustedEvent) { bool aIsTrustedEvent) {
nsPresContext* presContext = GetPresContext(eForUncomposedDoc); nsPresContext* presContext = GetPresContext(eForComposedDoc);
if (!presContext) { if (!presContext) {
return false; return false;
} }

Просмотреть файл

@ -14,3 +14,4 @@ support-files =
test_upgrade_page.html test_upgrade_page.html
upgrade_tests.js upgrade_tests.js
[test_xul_custom_element.xhtml] [test_xul_custom_element.xhtml]
[test_xul_shadowdom_accesskey.xhtml]

Просмотреть файл

@ -0,0 +1,60 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<window title="XUL ShadowDOM accesskey"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"/>
<body xmlns="http://www.w3.org/1999/xhtml">
<a target="_blank" rel="opener"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=1037709"
title="XUL ShadowDOM accesskey">
Mozilla Bug 1037709
</a>
<div id="container" style="position: relative"></div>
</body>
<!-- Tests code -->
<script type="application/javascript">
<![CDATA[
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
const container = document.getElementById("container");
function pressAccessKey(accessKey){
synthesizeKey(accessKey, navigator.platform.includes("Mac") ? { altKey: true, ctrlKey: true }
: { altKey: true, shiftKey: true });
}
function testAccesskeyInShadowTree(mode) {
add_task(async () => {
const host = document.createXULElement("div");
container.appendChild(host);
const shadowRoot = host.attachShadow({mode})
const button = document.createXULElement("button");
button.innerText = "Click Me";
button.setAttribute("accesskey", "g");
shadowRoot.appendChild(button);
// Trigger frame construction which is constructed lazily on XUL Element.
button.getBoundingClientRect();
let isClickFired = false;
button.addEventListener("click", function(e) {
isClickFired = true;
}, { once: true });
pressAccessKey("g");
ok(isClickFired, `button element with accesskey in the shadow tree of ${mode} mode`);
host.remove();
});
}
testAccesskeyInShadowTree("open");
testAccesskeyInShadowTree("closed");
]]>
</script>
</window>

Просмотреть файл

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM: accesskey</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/shadow-dom.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
</head>
<body>
<div id="log"></div>
<div id="container" style="position: relative"></div>
<script>
const container = document.getElementById('container');
function pressAccessKey(accessKey){
let controlKey = '\uE009'; // left Control key
let altKey = '\uE00A'; // left Alt key
let optionKey = altKey; // left Option key
let shiftKey = '\uE008'; // left Shift key
// There are differences in using accesskey across browsers and OS's.
// See: // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey
let isMacOSX = navigator.userAgent.indexOf("Mac") != -1;
let osAccessKey = isMacOSX ? [controlKey, optionKey] : [shiftKey, altKey];
let actions = new test_driver.Actions();
// Press keys.
for (let key of osAccessKey) {
actions = actions.keyDown(key);
}
actions = actions
.keyDown(accessKey)
.addTick()
.keyUp(accessKey);
osAccessKey.reverse();
for (let key of osAccessKey) {
actions = actions.keyUp(key);
}
return actions.send();
}
function testAccesskeyInShadowTree(mode) {
promise_test(async t => {
const host = document.createElement('div');
container.appendChild(host);
t.add_cleanup(() => host.remove());
const shadowRoot = host.attachShadow({mode});
shadowRoot.innerHTML = '<button id="button" accesskey="g">Click Me with Shift+Alt+g or on Mac with Control+Option+g</button>';
let el = shadowRoot.getElementById("button");
let eventWatcher = new EventWatcher(t, el, ['click']);
let waitForClick = eventWatcher.wait_for('click');
await pressAccessKey("g");
await waitForClick;
}, `button element with accesskey in the shadow tree of ${mode} mode`);
}
testAccesskeyInShadowTree("open");
testAccesskeyInShadowTree("closed");
</script>
</body>