From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../markup/test/browser_markup_display_node_02.js | 216 +++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 devtools/client/inspector/markup/test/browser_markup_display_node_02.js (limited to 'devtools/client/inspector/markup/test/browser_markup_display_node_02.js') diff --git a/devtools/client/inspector/markup/test/browser_markup_display_node_02.js b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js new file mode 100644 index 0000000000..7fc2e1d807 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_display_node_02.js @@ -0,0 +1,216 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that markup display node are updated when their display changes. + +const TEST_URI = ` + +
Grid
+ +
Block
+`; + +const TEST_DATA = [ + { + desc: "Hiding the #grid display node by changing its style property", + selector: "#grid", + before: { + textContent: "grid", + visible: true, + interactive: true, + }, + async changeStyle() { + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + const node = content.document.getElementById("grid"); + node.style.display = "block"; + }); + }, + after: { + visible: false, + }, + }, + { + desc: "Reusing the 'grid' node, updating the display to 'grid again", + selector: "#grid", + before: { + visible: false, + }, + async changeStyle() { + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + const node = content.document.getElementById("grid"); + node.style.display = "grid"; + }); + }, + after: { + textContent: "grid", + visible: true, + interactive: true, + }, + }, + { + desc: "Showing a 'contents' node by changing its style property", + selector: "#grid", + before: { + textContent: "grid", + visible: true, + interactive: true, + }, + async changeStyle() { + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + const node = content.document.getElementById("grid"); + node.style.display = "contents"; + }); + }, + after: { + textContent: "contents", + visible: true, + interactive: false, + }, + }, + { + desc: "Showing a 'grid' node by changing its style property", + selector: "#block", + before: { + visible: false, + }, + async changeStyle() { + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + const node = content.document.getElementById("block"); + node.style.display = "grid"; + }); + }, + after: { + textContent: "grid", + visible: true, + interactive: true, + }, + }, + { + desc: "Showing a 'flex' node by removing its hidden attribute", + selector: "#flex", + before: { + visible: false, + }, + async changeStyle() { + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => + content.document.getElementById("flex").removeAttribute("hidden") + ); + }, + after: { + textContent: "flex", + visible: true, + interactive: true, + }, + }, +]; + +add_task(async function () { + const { inspector } = await openInspectorForURL( + "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI) + ); + + for (const data of TEST_DATA) { + info("Running test case: " + data.desc); + await runTestData(inspector, data); + } +}); + +async function runTestData( + inspector, + { selector, before, changeStyle, after } +) { + await selectNode(selector, inspector); + const container = await getContainerForSelector(selector, inspector); + + const beforeBadge = container.elt.querySelector( + ".inspector-badge[data-display]" + ); + is( + !!beforeBadge, + before.visible, + `Display badge is visible as expected for ${selector}: ${before.visible}` + ); + if (before.visible) { + is( + beforeBadge.textContent, + before.textContent, + `Got the correct before display type for ${selector}: ${beforeBadge.textContent}` + ); + checkBadgeInteractiveState(beforeBadge, before.interactive, selector); + } + + info("Listening for the display-change event"); + const onDisplayChanged = inspector.markup.walker.once("display-change"); + info("Making style changes"); + await changeStyle(); + const nodes = await onDisplayChanged; + + info("Verifying that the list of changed nodes include our container"); + ok(nodes.length, "The display-change event was received with a nodes"); + let foundContainer = false; + for (const node of nodes) { + if (getContainerForNodeFront(node, inspector) === container) { + foundContainer = true; + break; + } + } + ok(foundContainer, "Container is part of the list of changed nodes"); + + const afterBadge = container.elt.querySelector( + ".inspector-badge[data-display]" + ); + is( + !!afterBadge, + after.visible, + `Display badge is visible as expected for ${selector}: ${after.visible}` + ); + if (after.visible) { + is( + afterBadge.textContent, + after.textContent, + `Got the correct after display type for ${selector}: ${afterBadge.textContent}` + ); + + checkBadgeInteractiveState(afterBadge, after.interactive, selector); + } +} + +function checkBadgeInteractiveState(badgeEl, interactive, selector) { + if (interactive) { + ok( + !badgeEl.hasAttribute("role"), + `${badgeEl.textContent} badge for ${selector} does not override the default role` + ); + is( + badgeEl.getAttribute("aria-pressed"), + "false", + `${badgeEl.textContent} badge for ${selector} has the expected aria-pressed attribute` + ); + } else { + is( + badgeEl.getAttribute("role"), + "presentation", + `${badgeEl.textContent} badge for ${selector} is not interactive` + ); + ok( + !badgeEl.hasAttribute("aria-pressed"), + `${badgeEl.textContent} badge for ${selector} does not have an aria-pressed attribute` + ); + } +} -- cgit v1.2.3