Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test print media emulation.
// Load the test page under .com TLD, to make the inner .org iframe remote with
// Fission.
const TEST_URI = URL_ROOT_COM_SSL + "doc_print_media_emulation.html";
add_task(async function () {
await addTab(TEST_URI);
const { inspector, view } = await openRuleView();
info("Open emulation panel and check that the print emulation switch exists");
await openEmulationPanel(view);
const printEmulationSwitch = inspector.panelDoc.querySelector(
"#print-emulation-enabled"
);
ok(printEmulationSwitch, "The print emulation switch exists");
is(printEmulationSwitch.checked, false, "The print switch is not enabled");
// Helper to retrieve the background-color property of the selected element
// All the test elements are expected to have a single background-color rule
// for this test.
const ruleViewHasColor = async color =>
(await getPropertiesForRuleIndex(view, 1)).has("background-color:" + color);
info("Select a div that will change according to print emulation");
await selectNode("div", inspector);
ok(
await ruleViewHasColor("#f00"),
"The rule view shows the expected initial rule"
);
is(
getRuleViewAncestorRulesDataElementByIndex(view, 1),
null,
"No media query information are displayed initially"
);
info("Click on the switch and wait for print media to be applied");
printEmulationSwitch.click();
await waitFor(() => printEmulationSwitch.checked === true);
ok(true, "The switch is now enabled");
await waitFor(() => ruleViewHasColor("#00f"));
ok(
true,
"The rules view was updated with the rule view from the print media query"
);
is(
getRuleViewAncestorRulesDataTextByIndex(view, 1),
"@media print {",
"Media queries information is displayed"
);
info("Select the node from the remote iframe");
await selectNodeInFrames(["iframe", "html"], inspector);
ok(
await ruleViewHasColor("#0ff"),
"The emulation is also applied on the remote iframe"
);
is(
getRuleViewAncestorRulesDataTextByIndex(view, 1),
"@media print {",
"Media queries information are displayed for the node on the remote iframe as well"
);
info("Select the top level div again");
await selectNode("div", inspector);
info("Click the switch again to disable print emulation");
printEmulationSwitch.click();
await waitFor(() => printEmulationSwitch.checked === false);
ok(true, "The switch is no longer enabledF");
await waitFor(() => ruleViewHasColor("#f00"));
is(
getRuleViewAncestorRulesDataElementByIndex(view, 1),
null,
"The media query is no longer displayed"
);
info("Select the node from the remote iframe again");
await selectNodeInFrames(["iframe", "html"], inspector);
await waitFor(() => ruleViewHasColor("#ff0"));
ok(true, "The emulation stopped on the remote iframe as well");
is(
getRuleViewAncestorRulesDataElementByIndex(view, 1),
null,
"The media query is no longer displayed on the remote iframe as well"
);
});