/* 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
Flex
Block
`;
const TEST_DATA = [
{
desc: "Hiding the #grid display node by changing its style property",
selector: "#grid",
before: {
textContent: "grid",
visible: 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,
},
},
{
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,
},
},
{
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,
},
},
];
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.interactive[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}`
);
}
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.interactive[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}`
);
}
}