summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
blob: 0cff5b1f53370f2855fe2923fb8ba60e82c4ed41 (plain)
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
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test for following CurrentTimeLabel component:
// * element existence
// * label content at plural timing

add_task(async function () {
  await addTab(URL_ROOT + "doc_multi_timings.html");
  await removeAnimatedElementsExcept([".keyframes-easing-step"]);
  const { animationInspector, panel } = await openAnimationInspector();

  info("Checking current time label existence");
  const labelEl = panel.querySelector(".current-time-label");
  ok(labelEl, "current time label should exist");

  info("Checking current time label content");
  const duration = animationInspector.state.timeScale.getDuration();
  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
  await waitUntilAnimationsPlayState(animationInspector, "paused");
  await waitUntilCurrentTimeChangedAt(animationInspector, duration * 0.5);
  const targetAnimation = animationInspector.state.animations[0];
  assertLabelContent(labelEl, targetAnimation.state.currentTime);

  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.2);
  await waitUntilCurrentTimeChangedAt(animationInspector, duration * 0.2);
  assertLabelContent(labelEl, targetAnimation.state.currentTime);

  info("Checking current time label content during running");
  // Resume
  clickOnPauseResumeButton(animationInspector, panel);
  const previousContent = labelEl.textContent;

  info("Wait until the time label changes");
  await waitFor(() => labelEl.textContent != previousContent);
  isnot(
    previousContent,
    labelEl.textContent,
    "Current time label should change"
  );
});

function assertLabelContent(labelEl, time) {
  const expected = formatStopwatchTime(time);
  is(labelEl.textContent, expected, `Content of label should be ${expected}`);
}

function formatStopwatchTime(time) {
  // Format falsy values as 0
  if (!time) {
    return "00:00.000";
  }

  let milliseconds = parseInt(time % 1000, 10);
  let seconds = parseInt((time / 1000) % 60, 10);
  let minutes = parseInt(time / (1000 * 60), 10);

  const pad = (nb, max) => {
    if (nb < max) {
      return new Array((max + "").length - (nb + "").length + 1).join("0") + nb;
    }

    return nb;
  };

  minutes = pad(minutes, 10);
  seconds = pad(seconds, 10);
  milliseconds = pad(milliseconds, 100);

  return `${minutes}:${seconds}.${milliseconds}`;
}