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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/* import-globals-from helper_html_tooltip.js */
"use strict";
/**
* Test the HTMLTooltip can be resized.
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = CHROME_URL_ROOT + "doc_html_tooltip.xhtml";
const {
HTMLTooltip,
} = require("resource://devtools/client/shared/widgets/tooltip/HTMLTooltip.js");
loadHelperScript("helper_html_tooltip.js");
const TOOLBOX_WIDTH = 500;
add_task(async function () {
await pushPref("devtools.toolbox.sidebar.width", TOOLBOX_WIDTH);
// Open the host on the right so that the doorhangers hang right.
const { doc } = await createHost("right", TEST_URI);
info("Test resizing of a tooltip");
const tooltip = new HTMLTooltip(doc, {
useXulWrapper: true,
type: "doorhanger",
});
const div = doc.createElementNS(HTML_NS, "div");
div.textContent = "tooltip";
div.style.cssText = "width: 100px; height: 40px";
tooltip.panel.appendChild(div);
const box1 = doc.getElementById("box1");
await showTooltip(tooltip, box1, { position: "top" });
// Get the original position of the panel and arrow.
const originalPanelBounds = tooltip.panel
.getBoxQuads({ relativeTo: doc })[0]
.getBounds();
const originalArrowBounds = tooltip.arrow
.getBoxQuads({ relativeTo: doc })[0]
.getBounds();
// Resize the content
div.style.cssText = "width: 200px; height: 30px";
tooltip.show(box1, { position: "top" });
// The panel should have moved 100px to the left and 10px down
const updatedPanelBounds = tooltip.panel
.getBoxQuads({ relativeTo: doc })[0]
.getBounds();
const panelXMovement =
`panel right: ${originalPanelBounds.right} -> ` + updatedPanelBounds.right;
Assert.strictEqual(
Math.round(updatedPanelBounds.right - originalPanelBounds.right),
100,
`Panel should have moved 100px to the right (actual: ${panelXMovement})`
);
const panelYMovement =
`panel top: ${originalPanelBounds.top} -> ` + updatedPanelBounds.top;
Assert.strictEqual(
Math.round(updatedPanelBounds.top - originalPanelBounds.top),
10,
`Panel should have moved 10px down (actual: ${panelYMovement})`
);
// The arrow should be in the same position
const updatedArrowBounds = tooltip.arrow
.getBoxQuads({ relativeTo: doc })[0]
.getBounds();
const arrowXMovement =
`arrow left: ${originalArrowBounds.left} -> ` + updatedArrowBounds.left;
Assert.strictEqual(
Math.round(updatedArrowBounds.left - originalArrowBounds.left),
0,
`Arrow should not have moved (actual: ${arrowXMovement})`
);
const arrowYMovement =
`arrow top: ${originalArrowBounds.top} -> ` + updatedArrowBounds.top;
Assert.strictEqual(
Math.round(updatedArrowBounds.top - originalArrowBounds.top),
0,
`Arrow should not have moved (actual: ${arrowYMovement})`
);
await hideTooltip(tooltip);
tooltip.destroy();
});
|
