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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/**
* Tests if the waterfall is properly built after making a selection
* and the child nodes are styled correctly.
*/
var gRGB_TO_HSL = {
"rgb(193, 132, 214)": "hsl(285,50%,68%)",
"rgb(152, 61, 183)": "hsl(285,50%,48%)",
"rgb(161, 223, 138)": "hsl(104,57%,71%)",
"rgb(96, 201, 58)": "hsl(104,57%,51%)",
"rgb(240, 195, 111)": "hsl(39,82%,69%)",
"rgb(227, 155, 22)": "hsl(39,82%,49%)",
"rgb(204, 204, 204)": "hsl(0,0%,80%)",
"rgb(153, 153, 153)": "hsl(0,0%,60%)",
};
add_task(function*() {
let { target, panel } = yield initTimelinePanel(SIMPLE_URL);
let { TIMELINE_BLUEPRINT } = devtools.require("devtools/shared/timeline/global");
let { $, $$, EVENTS, TimelineController } = panel.panelWin;
yield TimelineController.toggleRecording();
ok(true, "Recording has started.");
let updated = 0;
panel.panelWin.on(EVENTS.OVERVIEW_UPDATED, () => updated++);
ok((yield waitUntil(() => updated > 0)),
"The overview graphs were updated a bunch of times.");
ok((yield waitUntil(() => TimelineController.getMarkers().length > 0)),
"There are some markers available.");
yield TimelineController.toggleRecording();
ok(true, "Recording has ended.");
// Test the table sidebars.
for (let sidebar of [
...$$(".timeline-header-sidebar"),
...$$(".timeline-marker-sidebar")
]) {
is(sidebar.getAttribute("width"), "150",
"The table's sidebar width is correct.");
}
// Test the table ticks.
for (let tick of $$(".timeline-header-tick")) {
ok(tick.getAttribute("value").match(/^\d+ ms$/),
"The table's timeline ticks appear to have correct labels.");
ok(tick.style.transform.match(/^translateX\(.*px\)$/),
"The table's timeline ticks appear to have proper translations.");
}
// Test the marker bullets.
for (let bullet of $$(".timeline-marker-bullet")) {
let type = bullet.getAttribute("type");
ok(type in TIMELINE_BLUEPRINT,
"The bullet type is present in the timeline blueprint.");
is(gRGB_TO_HSL[bullet.style.backgroundColor], TIMELINE_BLUEPRINT[type].fill,
"The bullet's background color is correct.");
is(gRGB_TO_HSL[bullet.style.borderColor], TIMELINE_BLUEPRINT[type].stroke,
"The bullet's border color is correct.");
}
// Test the marker bars.
for (let bar of $$(".timeline-marker-bar")) {
let type = bar.getAttribute("type");
ok(type in TIMELINE_BLUEPRINT,
"The bar type is present in the timeline blueprint.");
is(gRGB_TO_HSL[bar.style.backgroundColor], TIMELINE_BLUEPRINT[type].fill,
"The bar's background color is correct.");
is(gRGB_TO_HSL[bar.style.borderColor], TIMELINE_BLUEPRINT[type].stroke,
"The bar's border color is correct.");
ok(bar.getAttribute("width") > 0,
"The bar appears to have a proper width.");
ok(bar.style.transform.match(/^translateX\(.*px\)$/),
"The bar appears to have proper translations.");
}
});
|
