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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
// Test that the eyedropper works on a page with iframes.
const TOP_LEVEL_BACKGROUND_COLOR = "#ff0000";
const SAME_ORIGIN_FRAME_BACKGROUND_COLOR = "#00ee00";
const REMOTE_FRAME_BACKGROUND_COLOR = "#0000dd";
const HTML = `
<style>
body {
height: 100vh;
background: ${TOP_LEVEL_BACKGROUND_COLOR};
margin: 0;
}
div, iframe {
border: none;
display: block;
height: 100px;
text-align: center;
}
</style>
<div>top-level element</div>
<iframe src="https://example.com/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
SAME_ORIGIN_FRAME_BACKGROUND_COLOR
)};text-align: center;}</style><body>same origin iframe</body>"></iframe>
<iframe src="https://example.org/document-builder.sjs?html=<style>body {background:${encodeURIComponent(
REMOTE_FRAME_BACKGROUND_COLOR
)};text-align: center;}</style><body>remote iframe</body>"></iframe>
`;
const TEST_URI = `https://example.com/document-builder.sjs?html=${encodeURIComponent(
HTML
)}`;
add_task(async function () {
const { inspector, highlighterTestFront } = await openInspectorForURL(
TEST_URI
);
const toggleButton = inspector.panelDoc.querySelector(
"#inspector-eyedropper-toggle"
);
toggleButton.click();
await TestUtils.waitForCondition(() =>
highlighterTestFront.isEyeDropperVisible()
);
ok(true, "Eye dropper is visible");
const checkColorAt = (...args) =>
checkEyeDropperColorAt(highlighterTestFront, ...args);
// The content page has the following layout:
//
// +------------------------------------+
// | top level div (#ff0000) | 100px
// +------------------------------------+
// | same origin iframe (#00ee00) | 100px
// +------------------------------------+
// | remote iframe (#0000dd) | 100px
// +------------------------------------+
await checkColorAt(
50,
50,
TOP_LEVEL_BACKGROUND_COLOR,
"The eyedropper holds the expected color for the top-level element"
);
await checkColorAt(
50,
150,
SAME_ORIGIN_FRAME_BACKGROUND_COLOR,
"The eyedropper holds the expected color for the same-origin iframe"
);
await checkColorAt(
50,
250,
REMOTE_FRAME_BACKGROUND_COLOR,
"The eyedropper holds the expected color for the remote iframe"
);
info("Hide the eyedropper");
toggleButton.click();
await TestUtils.waitForCondition(async () => {
const visible = await highlighterTestFront.isEyeDropperVisible();
return !visible;
});
});
|
