1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"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='https://example.com/document-builder.sjs?html=${encodeURIComponent(
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])
.find(t => t.url.startsWith("https://example.com"));
// 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 });
});
|
