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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
/* 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 anchor alignment changes with the anchor direction.
* - should be aligned to the right of RTL anchors
* - should be aligned to the left of LTR anchors
*/
const HTML_NS = "http://www.w3.org/1999/xhtml";
const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css"?>
<?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
htmlns="http://www.w3.org/1999/xhtml"
title="Tooltip test">
<hbox style="padding: 90px 0;" flex="1">
<hbox id="box1" flex="1" style="background:red; direction: rtl;">test1</hbox>
<hbox id="box2" flex="1" style="background:blue; direction: rtl;">test2</hbox>
<hbox id="box3" flex="1" style="background:red; direction: ltr;">test3</hbox>
<hbox id="box4" flex="1" style="background:blue; direction: ltr;">test4</hbox>
</hbox>
</window>`;
const {HTMLTooltip} = require("devtools/client/shared/widgets/tooltip/HTMLTooltip");
loadHelperScript("helper_html_tooltip.js");
const TOOLBOX_WIDTH = 500;
const TOOLTIP_WIDTH = 150;
const TOOLTIP_HEIGHT = 30;
add_task(function* () {
// Force the toolbox to be 500px wide (min width is 465px);
yield pushPref("devtools.toolbox.sidebar.width", TOOLBOX_WIDTH);
let [,, doc] = yield createHost("side", TEST_URI);
info("Test a tooltip is not closed when clicking inside itself");
let tooltip = new HTMLTooltip(doc, {useXulWrapper: false});
let div = doc.createElementNS(HTML_NS, "div");
div.textContent = "tooltip";
div.style.cssText = "box-sizing: border-box; border: 1px solid black";
tooltip.setContent(div, {width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT});
yield testRtlAnchors(doc, tooltip);
yield testLtrAnchors(doc, tooltip);
yield hideTooltip(tooltip);
tooltip.destroy();
});
function* testRtlAnchors(doc, tooltip) {
/*
* The layout of the test page is as follows:
* _______________________________
* | toolbox |
* | _____ _____ _____ _____ |
* || | | | | | | ||
* || box1| | box2| | box3| | box4||
* ||_____| |_____| |_____| |_____||
* |_______________________________|
*
* - box1 is aligned with the left edge of the toolbox
* - box2 is displayed right after box1
* - total toolbox width is 500px so each box is 125px wide
*/
let box1 = doc.getElementById("box1");
let box2 = doc.getElementById("box2");
info("Display the tooltip on box1.");
yield showTooltip(tooltip, box1, {position: "bottom"});
let panelRect = tooltip.container.getBoundingClientRect();
let anchorRect = box1.getBoundingClientRect();
// box1 uses RTL direction, so the tooltip should be aligned with the right edge of the
// anchor, but it is shifted to the right to fit in the toolbox.
is(panelRect.left, 0, "Tooltip is aligned with left edge of the toolbox");
is(panelRect.top, anchorRect.bottom, "Tooltip aligned with the anchor bottom edge");
is(panelRect.height, TOOLTIP_HEIGHT, "Tooltip height is at 100px as expected");
info("Display the tooltip on box2.");
yield showTooltip(tooltip, box2, {position: "bottom"});
panelRect = tooltip.container.getBoundingClientRect();
anchorRect = box2.getBoundingClientRect();
// box2 uses RTL direction, so the tooltip is aligned with the right edge of the anchor
is(panelRect.right, anchorRect.right, "Tooltip is aligned with right edge of anchor");
is(panelRect.top, anchorRect.bottom, "Tooltip aligned with the anchor bottom edge");
is(panelRect.height, TOOLTIP_HEIGHT, "Tooltip height is at 100px as expected");
}
function* testLtrAnchors(doc, tooltip) {
/*
* The layout of the test page is as follows:
* _______________________________
* | toolbox |
* | _____ _____ _____ _____ |
* || | | | | | | ||
* || box1| | box2| | box3| | box4||
* ||_____| |_____| |_____| |_____||
* |_______________________________|
*
* - box3 is is displayed right after box2
* - box4 is aligned with the right edge of the toolbox
* - total toolbox width is 500px so each box is 125px wide
*/
let box3 = doc.getElementById("box3");
let box4 = doc.getElementById("box4");
info("Display the tooltip on box3.");
yield showTooltip(tooltip, box3, {position: "bottom"});
let panelRect = tooltip.container.getBoundingClientRect();
let anchorRect = box3.getBoundingClientRect();
// box3 uses LTR direction, so the tooltip is aligned with the left edge of the anchor.
is(panelRect.left, anchorRect.left, "Tooltip is aligned with left edge of anchor");
is(panelRect.top, anchorRect.bottom, "Tooltip aligned with the anchor bottom edge");
is(panelRect.height, TOOLTIP_HEIGHT, "Tooltip height is at 100px as expected");
info("Display the tooltip on box4.");
yield showTooltip(tooltip, box4, {position: "bottom"});
panelRect = tooltip.container.getBoundingClientRect();
anchorRect = box4.getBoundingClientRect();
// box4 uses LTR direction, so the tooltip should be aligned with the left edge of the
// anchor, but it is shifted to the left to fit in the toolbox.
is(panelRect.right, TOOLBOX_WIDTH, "Tooltip is aligned with right edge of toolbox");
is(panelRect.top, anchorRect.bottom, "Tooltip aligned with the anchor bottom edge");
is(panelRect.height, TOOLTIP_HEIGHT, "Tooltip height is at 100px as expected");
}
|
