diff options
Diffstat (limited to 'devtools/server/tests/browser/browser_accessibility_tabbing_order_highlighter.js')
-rw-r--r-- | devtools/server/tests/browser/browser_accessibility_tabbing_order_highlighter.js | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/devtools/server/tests/browser/browser_accessibility_tabbing_order_highlighter.js b/devtools/server/tests/browser/browser_accessibility_tabbing_order_highlighter.js new file mode 100644 index 0000000000..fb99534318 --- /dev/null +++ b/devtools/server/tests/browser/browser_accessibility_tabbing_order_highlighter.js @@ -0,0 +1,101 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +// Checks for the TabbingOrderHighlighter. + +add_task(async function () { + await BrowserTestUtils.withNewTab( + { + gBrowser, + url: MAIN_DOMAIN + "doc_accessibility_infobar.html", + }, + async function (browser) { + await SpecialPowers.spawn(browser, [], async function () { + const { require } = ChromeUtils.importESModule( + "resource://devtools/shared/loader/Loader.sys.mjs" + ); + const { + HighlighterEnvironment, + } = require("resource://devtools/server/actors/highlighters.js"); + const { + TabbingOrderHighlighter, + } = require("resource://devtools/server/actors/highlighters/tabbing-order.js"); + + // Start testing. First, create highlighter environment and initialize. + const env = new HighlighterEnvironment(); + env.initFromWindow(content.window); + + // Wait for loading highlighter environment content to complete before + // creating the highlighter. + await new Promise(resolve => { + const doc = env.document; + + function onContentLoaded() { + if ( + doc.readyState === "interactive" || + doc.readyState === "complete" + ) { + resolve(); + } else { + doc.addEventListener("DOMContentLoaded", onContentLoaded, { + once: true, + }); + } + } + + onContentLoaded(); + }); + + // Now, we can test the Infobar's index content. + const node = content.document.createElement("div"); + content.document.body.append(node); + const highlighter = new TabbingOrderHighlighter(env); + await highlighter.isReady; + + info("Showing tabbing order highlighter for all tabbable nodes"); + const { contentDOMReference, index } = await highlighter.show( + content.document, + { + index: 0, + } + ); + + is( + contentDOMReference, + null, + "No current element when at the end of the tab order" + ); + is(index, 2, "Current index is correct"); + is( + highlighter._highlighters.size, + 2, + "Number of node tabbing order highlighters is correct" + ); + for (let i = 0; i < highlighter._highlighters.size; i++) { + const nodeHighlighter = [...highlighter._highlighters.values()][i]; + const infoBarText = nodeHighlighter.getElement("infobar-text"); + + is( + parseInt(infoBarText.getTextContent(), 10), + i + 1, + "infobar text content is correct" + ); + } + + info("Showing focus highlighting"); + const input = content.document.getElementById("input"); + highlighter.updateFocus({ node: input, focused: true }); + const nodeHighlighter = highlighter._highlighters.get(input); + const { classList } = nodeHighlighter.getElement("root"); + ok(classList.contains("focused"), "Focus styling is applied"); + highlighter.updateFocus({ node: input, focused: false }); + ok(!classList.contains("focused"), "Focus styling is removed"); + + highlighter.hide(); + }); + } + ); +}); |