summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/markup/test
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/inspector/markup/test')
-rw-r--r--devtools/client/inspector/markup/test/browser.toml2
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_events_03.js6
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_links_07.js26
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js110
-rw-r--r--devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js18
-rw-r--r--devtools/client/inspector/markup/test/doc_markup_events_03.html2
-rw-r--r--devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html22
-rw-r--r--devtools/client/inspector/markup/test/resources/doc_markup_links_base.html12
8 files changed, 161 insertions, 37 deletions
diff --git a/devtools/client/inspector/markup/test/browser.toml b/devtools/client/inspector/markup/test/browser.toml
index 0b566f5e18..4f08fd10f2 100644
--- a/devtools/client/inspector/markup/test/browser.toml
+++ b/devtools/client/inspector/markup/test/browser.toml
@@ -1,5 +1,4 @@
[DEFAULT]
-prefs = ["devtools.chrome.enabled=false"] # Bug 1520383 - Force devtools.chrome.enabled to false regardless of whether we're in an official build so we don't show event bubbles from chrome event listeners in the inspector on unprivileged test pages.
tags = "devtools"
subsuite = "devtools"
support-files = [
@@ -76,6 +75,7 @@ support-files = [
"lib_react_with_addons_15.3.1_min.js",
"lib_react_with_addons_15.4.1.js",
"react_external_listeners.js",
+ "resources/*",
"shadowdom_open_debugger.min.js",
"!/devtools/client/debugger/test/mochitest/shared-head.js",
"!/devtools/client/inspector/test/head.js",
diff --git a/devtools/client/inspector/markup/test/browser_markup_events_03.js b/devtools/client/inspector/markup/test/browser_markup_events_03.js
index bebffec066..b0de4561e0 100644
--- a/devtools/client/inspector/markup/test/browser_markup_events_03.js
+++ b/devtools/client/inspector/markup/test/browser_markup_events_03.js
@@ -17,7 +17,7 @@ const TEST_DATA = [
expected: [
{
type: "click",
- filename: TEST_URL + ":69:17",
+ filename: TEST_URL + ":70:17",
attributes: ["Bubbling"],
handler:
"es6Method(foo, bar) {\n" + ' alert("obj.es6Method");\n' + "}",
@@ -29,7 +29,7 @@ const TEST_DATA = [
expected: [
{
type: "click",
- filename: TEST_URL + ":89:25",
+ filename: TEST_URL + ":91:25",
attributes: ["Bubbling"],
handler: "function* generator() {\n" + ' alert("generator");\n' + "}",
},
@@ -40,7 +40,7 @@ const TEST_DATA = [
expected: [
{
type: "click",
- filename: TEST_URL + ":46:58",
+ filename: TEST_URL + ":47:58",
attributes: ["Bubbling"],
handler: "function*() {\n" + ' alert("anonGenerator");\n' + "}",
},
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_07.js b/devtools/client/inspector/markup/test/browser_markup_links_07.js
index 2a86f3b1d9..830d370b03 100644
--- a/devtools/client/inspector/markup/test/browser_markup_links_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_07.js
@@ -7,6 +7,7 @@
// do follows the link.
const TEST_URL = URL_ROOT_SSL + "doc_markup_links.html";
+const TEST_URL_BASE = URL_ROOT_SSL + "resources/doc_markup_links_base.html";
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
@@ -70,6 +71,31 @@ add_task(async function () {
await followLinkNoNewNode(linkEl, true, inspector);
});
+add_task(async function testDocumentWithBaseAttribute() {
+ const { inspector } = await openInspectorForURL(TEST_URL_BASE);
+
+ info("Select a node with a URI attribute");
+ await selectNode("img", inspector);
+
+ info("Find the link element from the markup-view");
+ const { editor } = await getContainerForSelector("img", inspector);
+ const linkEl = editor.attrElements.get("src").querySelector(".link");
+
+ info("Follow the link with middle-click and wait for the new tab to open");
+ await followLinkWaitForTab(
+ linkEl,
+ false,
+ URL_ROOT_SSL + "doc_markup_tooltip.png"
+ );
+
+ info("Follow the link with meta/ctrl-click and wait for the new tab to open");
+ await followLinkWaitForTab(
+ linkEl,
+ true,
+ URL_ROOT_SSL + "doc_markup_tooltip.png"
+ );
+});
+
function performMouseDown(linkEl, metactrl) {
const evt = linkEl.ownerDocument.createEvent("MouseEvents");
diff --git a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
index 1f50ae6b88..6d02f214ae 100644
--- a/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
+++ b/devtools/client/inspector/markup/test/browser_markup_links_aria_attributes.js
@@ -16,42 +16,84 @@ const TEST_DATA = [
{
selector: "#aria-activedescendant",
attributeName: "aria-activedescendant",
- links: ["activedescendant01"],
+ links: [{ id: "activedescendant01" }],
},
{
selector: "#aria-controls",
attributeName: "aria-controls",
- links: ["controls01", "controls02"],
+ links: [{ id: "controls01" }, { id: "controls02" }],
},
{
selector: "#aria-describedby",
attributeName: "aria-describedby",
- links: ["describedby01", "describedby02"],
+ links: [{ id: "describedby01" }, { id: "describedby02" }],
},
{
selector: "#aria-details",
attributeName: "aria-details",
- links: ["details01", "details02"],
+ links: [{ id: "details01" }, { id: "details02" }],
},
{
selector: "#aria-errormessage",
attributeName: "aria-errormessage",
- links: ["errormessage01"],
+ links: [{ id: "errormessage01" }],
},
{
selector: "#aria-flowto",
attributeName: "aria-flowto",
- links: ["flowto01", "flowto02"],
+ links: [{ id: "flowto01" }, { id: "flowto02" }],
},
{
selector: "#aria-labelledby",
attributeName: "aria-labelledby",
- links: ["labelledby01", "labelledby02"],
+ links: [{ id: "labelledby01" }, { id: "labelledby02" }],
},
{
selector: "#aria-owns",
attributeName: "aria-owns",
- links: ["owns01", "owns02"],
+ links: [{ id: "owns01" }, { id: "owns02" }],
+ },
+ {
+ getContainer: async inspector => {
+ info("Find and expand the test-component shadow DOM host.");
+ const hostFront = await getNodeFront("test-component", inspector);
+ const hostContainer = inspector.markup.getContainer(hostFront);
+ await expandContainer(inspector, hostContainer);
+
+ info("Expand the shadow root");
+ const shadowRootContainer = hostContainer.getChildContainers()[0];
+ await expandContainer(inspector, shadowRootContainer);
+
+ info("Expand the slot");
+ const slotContainer = shadowRootContainer.getChildContainers()[0];
+
+ is(
+ slotContainer.elt
+ .querySelector(`[data-attr="id"]`)
+ .getAttribute("data-value"),
+ "aria-describedby-shadow-dom",
+ `This is the container for button#aria-describedby-shadow-dom`
+ );
+
+ // The test expect the node to be selected
+ const updated = inspector.once("inspector-updated");
+ inspector.selection.setNodeFront(slotContainer.node, { reason: "test" });
+ await updated;
+
+ return slotContainer;
+ },
+ attributeName: "aria-describedby",
+ links: [{ id: "describedby01", valid: false }, { id: "describedbyshadow" }],
+ },
+ {
+ selector: "#empty-attributes",
+ attributeName: "aria-activedescendant",
+ links: [],
+ },
+ {
+ selector: "#empty-attributes",
+ attributeName: "aria-details",
+ links: [],
},
];
@@ -59,11 +101,16 @@ add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
for (const test of TEST_DATA) {
- info("Selecting test node " + test.selector);
- await selectNode(test.selector, inspector);
+ let editor;
+ if (typeof test.getContainer === "function") {
+ ({ editor } = await test.getContainer(inspector));
+ } else {
+ info("Selecting test node " + test.selector);
+ await selectNode(test.selector, inspector);
+ info("Finding the popupNode to anchor the context-menu to");
+ ({ editor } = await getContainerForSelector(test.selector, inspector));
+ }
- info("Finding the popupNode to anchor the context-menu to");
- const { editor } = await getContainerForSelector(test.selector, inspector);
const attributeEl = editor.attrElements.get(test.attributeName);
const linksEl = attributeEl.querySelectorAll(".link");
@@ -79,8 +126,6 @@ add_task(async function () {
const linkEl = linksEl[i];
ok(linkEl, "Found the link");
- const expectedReferencedNodeId = test.links[i];
-
info("Simulating a context click on the link");
const allMenuItems = openContextMenuAndGetAllItems(inspector, {
target: linkEl,
@@ -95,6 +140,7 @@ add_task(async function () {
is(linkFollow.visible, true, "The follow-link item is visible");
is(linkCopy.visible, false, "The copy-link item is not visible");
+ const { id: expectedReferencedNodeId } = test.links[i];
const linkFollowItemLabel = INSPECTOR_L10N.getFormatStr(
"inspector.menu.selectElement.label",
expectedReferencedNodeId
@@ -114,16 +160,32 @@ add_task(async function () {
"Button has expected title"
);
- info("Check that clicking on button selects the associated node");
- const onSelection = inspector.selection.once("new-node-front");
- buttonEl.click();
- await onSelection;
-
- is(
- inspector.selection.nodeFront.id,
- expectedReferencedNodeId,
- "The expected new node was selected"
- );
+ if (test.links[i].valid !== false) {
+ info("Check that clicking on button selects the associated node");
+ const onSelection = inspector.selection.once("new-node-front");
+ buttonEl.click();
+ await onSelection;
+
+ is(
+ inspector.selection.nodeFront.id,
+ expectedReferencedNodeId,
+ "The expected new node was selected"
+ );
+ } else {
+ info(
+ "Check that clicking on button triggers idref-attribute-link-failed event"
+ );
+ const onIdrefAttributeLinkFailed = inspector.markup.once(
+ "idref-attribute-link-failed"
+ );
+ const onSelection = inspector.selection.once("new-node-front");
+ const onTimeout = wait(500).then(() => "TIMEOUT");
+ buttonEl.click();
+ await onIdrefAttributeLinkFailed;
+ ok(true, "Got expected idref-attribute-link-failed event");
+ const res = await Promise.race([onSelection, onTimeout]);
+ is(res, "TIMEOUT", "Clicking the button did not select a new node");
+ }
}
}
});
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
index 38f7361725..563863d614 100644
--- a/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_07.js
@@ -59,7 +59,7 @@ var TEST_DATA = [
expectedAttributes: {
style: DATA_URL_INLINE_STYLE,
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("style")
@@ -75,7 +75,7 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("data-long")
@@ -91,7 +91,7 @@ var TEST_DATA = [
expectedAttributes: {
src: DATA_URL_ATTRIBUTE,
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("src")
@@ -107,17 +107,17 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
- setUp(inspector) {
+ setUp() {
Services.prefs.setBoolPref("devtools.markup.collapseAttributes", false);
},
- validate: (container, inspector) => {
+ validate: container => {
const editor = container.editor;
const visibleAttrText = editor.attrElements
.get("data-long")
.querySelector(".attr-value").textContent;
is(visibleAttrText, LONG_ATTRIBUTE);
},
- tearDown(inspector) {
+ tearDown() {
Services.prefs.clearUserPref("devtools.markup.collapseAttributes");
},
},
@@ -127,10 +127,10 @@ var TEST_DATA = [
expectedAttributes: {
"data-long": LONG_ATTRIBUTE,
},
- setUp(inspector) {
+ setUp() {
Services.prefs.setIntPref("devtools.markup.collapseAttributeLength", 2);
},
- validate: (container, inspector) => {
+ validate: container => {
const firstChar = LONG_ATTRIBUTE[0];
const lastChar = LONG_ATTRIBUTE[LONG_ATTRIBUTE.length - 1];
const collapsed = firstChar + "\u2026" + lastChar;
@@ -140,7 +140,7 @@ var TEST_DATA = [
.querySelector(".attr-value").textContent;
is(visibleAttrText, collapsed);
},
- tearDown(inspector) {
+ tearDown() {
Services.prefs.clearUserPref("devtools.markup.collapseAttributeLength");
},
},
diff --git a/devtools/client/inspector/markup/test/doc_markup_events_03.html b/devtools/client/inspector/markup/test/doc_markup_events_03.html
index a0c067e33e..deb3730d32 100644
--- a/devtools/client/inspector/markup/test/doc_markup_events_03.html
+++ b/devtools/client/inspector/markup/test/doc_markup_events_03.html
@@ -43,6 +43,7 @@
generatorNode.addEventListener("click", generator);
const anonGenerator = document.getElementById("anon-generator");
+ // eslint-disable-next-line require-yield
anonGenerator.addEventListener("click", function* () {
alert("anonGenerator");
});
@@ -86,6 +87,7 @@
}
};
+ // eslint-disable-next-line require-yield
function* generator() {
alert("generator");
}
diff --git a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
index 0e3bf0a57f..d4fc13042f 100644
--- a/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
+++ b/devtools/client/inspector/markup/test/doc_markup_links_aria_attributes.html
@@ -3,6 +3,24 @@
<head>
<meta charset="utf-8">
<title>Markup-view Linkify ARIA attributes</title>
+ <script>
+ "use strict";
+ class TestComponent extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({mode: 'open'});
+
+ this.shadowRoot.innerHTML = `
+ <button
+ id="aria-describedby-shadow-dom"
+ aria-describedby="describedby01 describedbyshadow"
+ ></button>
+ <div id="describedbyshadow">#describedbyshadow</div>
+ `;
+ }
+ }
+ customElements.define('test-component', TestComponent);
+ </script>
</head>
<body>
<div id="aria-activedescendant"
@@ -40,5 +58,9 @@
<div id="aria-owns" aria-owns="owns01 owns02">aria-owns test</div>
<div id="owns01">#owns01</div>
<div id="owns02">#owns02</div>
+
+ <test-component></test-component>
+
+ <div id="empty-attributes" aria-activedescendant=" " aria-details=" "></div>
</body>
</html>
diff --git a/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html
new file mode 100644
index 0000000000..55b5350ab5
--- /dev/null
+++ b/devtools/client/inspector/markup/test/resources/doc_markup_links_base.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Markup-view links with base attribute</title>
+ <base href="../">
+ </head>
+ <body>
+ <img src="doc_markup_tooltip.png">
+ Test relative links with base attributes.
+ </body>
+</html>