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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for following timeline tick items.
// * animation list header elements existence
// * tick labels elements existence
// * count and text of tick label elements changing by the sidebar width
const TimeScale = require("resource://devtools/client/inspector/animation/utils/timescale.js");
const {
findOptimalTimeInterval,
} = require("resource://devtools/client/inspector/animation/utils/utils.js");
// Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
// AnimationTimeTickList component.
const TIME_GRADUATION_MIN_SPACING = 40;
add_task(async function () {
await pushPref("devtools.inspector.three-pane-enabled", false);
await addTab(URL_ROOT + "doc_simple_animation.html");
await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]);
const { animationInspector, inspector, panel } =
await openAnimationInspector();
const timeScale = new TimeScale(animationInspector.state.animations);
info("Checking animation list header element existence");
const listContainerEl = panel.querySelector(".animation-list-container");
const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar");
ok(
listHeaderEl,
"The header element should be in animation list container element"
);
info("Checking time tick item elements existence");
await assertTickLabels(timeScale, listContainerEl);
const timelineTickItemLength =
listContainerEl.querySelectorAll(".tick-label").length;
info("Checking timeline tick item elements after enlarge sidebar width");
await setSidebarWidth("100%", inspector);
await assertTickLabels(timeScale, listContainerEl);
Assert.less(
timelineTickItemLength,
listContainerEl.querySelectorAll(".tick-label").length,
"The timeline tick item elements should increase"
);
});
/**
* Assert tick label's position and label.
*
* @param {TimeScale} - timeScale
* @param {Element} - listContainerEl
*/
async function assertTickLabels(timeScale, listContainerEl) {
const timelineTickListEl = listContainerEl.querySelector(".tick-labels");
ok(
timelineTickListEl,
"The animation timeline tick list element should be in header"
);
const width = timelineTickListEl.offsetWidth;
const animationDuration = timeScale.getDuration();
const minTimeInterval =
(TIME_GRADUATION_MIN_SPACING * animationDuration) / width;
const interval = findOptimalTimeInterval(minTimeInterval);
const shiftWidth = timeScale.zeroPositionTime % interval;
const expectedTickItem =
Math.ceil(animationDuration / interval) + (shiftWidth !== 0 ? 1 : 0);
await waitUntil(
() =>
timelineTickListEl.querySelectorAll(".tick-label").length ===
expectedTickItem
);
ok(true, "The expected number of timeline ticks were found");
const timelineTickItemEls =
timelineTickListEl.querySelectorAll(".tick-label");
info("Make sure graduations are evenly distributed and show the right times");
for (const [index, tickEl] of timelineTickItemEls.entries()) {
const left = parseFloat(tickEl.style.marginInlineStart);
let expectedPos =
(((index - 1) * interval + shiftWidth) / animationDuration) * 100;
if (shiftWidth !== 0 && index === 0) {
expectedPos = 0;
}
is(
Math.round(left),
Math.round(expectedPos),
`Graduation ${index} is positioned correctly`
);
// Note that the distancetoRelativeTime and formatTime functions are tested
// separately in xpcshell test test_timeScale.js, so we assume that they
// work here.
const formattedTime = timeScale.formatTime(
timeScale.distanceToRelativeTime(expectedPos, width)
);
is(
tickEl.textContent,
formattedTime,
`Graduation ${index} has the right text content`
);
}
}
|
