Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that iframes are correctly highlighted.
const IFRAME_SRC = `<style>
body {
margin:0;
height:100%;
background-color:tomato;
}
</style>
<body class=remote>hello from iframe</body>`;
const DOCUMENT_SRC = `<style>
iframe {
height:200px;
border: 11px solid black;
padding: 13px;
}
body,iframe,h1 {
margin:0;
padding: 0;
}
</style>
<body>
IFRAME_SRC
)}'></iframe>
</body>`;
const TEST_URI = "data:text/html;charset=utf-8," + DOCUMENT_SRC;
add_task(async function () {
const { inspector, toolbox, highlighterTestFront } =
await openInspectorForURL(TEST_URI);
info("Waiting for box mode to show.");
const topLevelBodyNodeFront = await getNodeFront("body", inspector);
await inspector.highlighters.showHighlighterTypeForNode(
inspector.highlighters.TYPES.BOXMODEL,
topLevelBodyNodeFront
);
info("Waiting for element picker to become active.");
await startPicker(toolbox);
info("Check that hovering iframe padding does highlight the iframe element");
// the iframe has 13px of padding, so hovering at [1,1] should be enough.
await hoverElement(inspector, "iframe", 1, 1);
await isNodeCorrectlyHighlighted(highlighterTestFront, "iframe");
info("Scrolling the document");
await setContentPageElementProperty(
"iframe",
"style",
"margin-bottom: 2000px"
);
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
content.scrollBy(0, 40)
);
// target the body within the iframe
const iframeBodySelector = ["iframe", "body"];
let iframeHighlighterTestFront = highlighterTestFront;
let bodySelectorWithinHighlighterEnv = iframeBodySelector;
if (isFissionEnabled() || isEveryFrameTargetEnabled()) {
const target = toolbox.commands.targetCommand
.getAllTargets([toolbox.commands.targetCommand.TYPES.FRAME])
// We need to retrieve the highlighterTestFront for the frame target.
iframeHighlighterTestFront = await getHighlighterTestFront(toolbox, {
target,
});
bodySelectorWithinHighlighterEnv = ["body"];
}
info("Check that hovering the iframe <body> highlights the expected element");
await hoverElement(inspector, iframeBodySelector, 40, 40);
ok(
await iframeHighlighterTestFront.assertHighlightedNode(
bodySelectorWithinHighlighterEnv
),
"highlighter is shown on the iframe body"
);
await isNodeCorrectlyHighlighted(
iframeHighlighterTestFront,
iframeBodySelector
);
info("Scrolling the document up");
// scroll up so we can inspect the top level document again
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
content.scrollTo(0, 0)
);
info("Check that hovering iframe padding again does work");
// the iframe has 13px of padding, so hovering at [1,1] should be enough.
await hoverElement(inspector, "iframe", 1, 1);
await isNodeCorrectlyHighlighted(highlighterTestFront, "iframe");
info("And finally check that hovering the iframe <body> again does work");
info("Check that hovering the iframe <body> highlights the expected element");
await hoverElement(inspector, iframeBodySelector, 40, 40);
ok(
await iframeHighlighterTestFront.assertHighlightedNode(
bodySelectorWithinHighlighterEnv
),
"highlighter is shown on the iframe body"
);
await isNodeCorrectlyHighlighted(
iframeHighlighterTestFront,
iframeBodySelector
);
info("Stop the element picker.");
await toolbox.nodePicker.stop({ canceled: true });
});