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
|
/* vim: set ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the regions in the box model view have tooltips, and that individual
// values too. Also test that values that are set from a css rule have tooltips
// referencing the rule.
const TEST_URI = "<style>" +
"#div1 { color: red; margin: 3em; }\n" +
"#div2 { border-bottom: 1px solid black; background: red; }\n" +
"html, body, #div3 { box-sizing: border-box; padding: 0 2em; }" +
"</style>" +
"<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
// Test data for the tooltips over individual values.
// Each entry should contain:
// - selector: The selector for the node to be selected before starting to test
// - values: An array containing objects for each of the values that are defined
// by css rules. Each entry should contain:
// - name: the name of the property that is set by the css rule
// - ruleSelector: the selector of the rule
// - styleSheetLocation: the fileName:lineNumber
const VALUES_TEST_DATA = [{
selector: "#div1",
values: [{
name: "margin-top",
ruleSelector: "#div1",
styleSheetLocation: "inline:1"
}, {
name: "margin-right",
ruleSelector: "#div1",
styleSheetLocation: "inline:1"
}, {
name: "margin-bottom",
ruleSelector: "#div1",
styleSheetLocation: "inline:1"
}, {
name: "margin-left",
ruleSelector: "#div1",
styleSheetLocation: "inline:1"
}]
}, {
selector: "#div2",
values: [{
name: "border-bottom-width",
ruleSelector: "#div2",
styleSheetLocation: "inline:2"
}]
}, {
selector: "#div3",
values: [{
name: "padding-top",
ruleSelector: "html, body, #div3",
styleSheetLocation: "inline:3"
}, {
name: "padding-right",
ruleSelector: "html, body, #div3",
styleSheetLocation: "inline:3"
}, {
name: "padding-bottom",
ruleSelector: "html, body, #div3",
styleSheetLocation: "inline:3"
}, {
name: "padding-left",
ruleSelector: "html, body, #div3",
styleSheetLocation: "inline:3"
}]
}];
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openBoxModelView();
info("Checking the regions tooltips");
ok(view.doc.querySelector("#boxmodel-margins").hasAttribute("title"),
"The margin region has a tooltip");
is(view.doc.querySelector("#boxmodel-margins").getAttribute("title"), "margin",
"The margin region has the correct tooltip content");
ok(view.doc.querySelector("#boxmodel-borders").hasAttribute("title"),
"The border region has a tooltip");
is(view.doc.querySelector("#boxmodel-borders").getAttribute("title"), "border",
"The border region has the correct tooltip content");
ok(view.doc.querySelector("#boxmodel-padding").hasAttribute("title"),
"The padding region has a tooltip");
is(view.doc.querySelector("#boxmodel-padding").getAttribute("title"), "padding",
"The padding region has the correct tooltip content");
ok(view.doc.querySelector("#boxmodel-content").hasAttribute("title"),
"The content region has a tooltip");
is(view.doc.querySelector("#boxmodel-content").getAttribute("title"), "content",
"The content region has the correct tooltip content");
for (let {selector, values} of VALUES_TEST_DATA) {
info("Selecting " + selector + " and checking the values tooltips");
yield selectNode(selector, inspector);
info("Iterate over all values");
for (let key in view.map) {
if (key === "position") {
continue;
}
let name = view.map[key].property;
let expectedTooltipData = values.find(o => o.name === name);
let el = view.doc.querySelector(view.map[key].selector);
ok(el.hasAttribute("title"), "The " + name + " value has a tooltip");
if (expectedTooltipData) {
info("The " + name + " value comes from a css rule");
let expectedTooltip = name + "\n" + expectedTooltipData.ruleSelector +
"\n" + expectedTooltipData.styleSheetLocation;
is(el.getAttribute("title"), expectedTooltip, "The tooltip is correct");
} else {
info("The " + name + " isn't set by a css rule");
is(el.getAttribute("title"), name, "The tooltip is correct");
}
}
}
});
|
