summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/animation/test/browser_animation_logic_scroll-amount.js
blob: 11835cd8808e858daa6bbbb3e5ac803bf34035ce (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
/* Any copyright is dedicated to the Public Domain.
   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test whether the scroll amount of animation and animated property re-calculate after
// changing selected node.

add_task(async function () {
  await addTab(URL_ROOT + "doc_simple_animation.html");
  await removeAnimatedElementsExcept([
    ".animated",
    ".multi",
    ".longhand",
    ".negative-delay",
  ]);
  const { animationInspector, inspector, panel } =
    await openAnimationInspector();

  info(
    "Set the scroll amount of animation and animated property to the bottom"
  );
  const onDetailRendered = animationInspector.once(
    "animation-keyframes-rendered"
  );
  await clickOnAnimationByTargetSelector(
    animationInspector,
    panel,
    ".longhand"
  );
  await onDetailRendered;

  await waitUntil(() => panel.querySelectorAll(".animation-item").length === 5);
  const bottomAnimationEl = await findAnimationItemByIndex(panel, 4);
  const bottomAnimatedPropertyEl = panel.querySelector(
    ".animated-property-item:last-child"
  );
  bottomAnimationEl.scrollIntoView(false);
  bottomAnimatedPropertyEl.scrollIntoView(false);

  info("Hold the scroll amount");
  const animationInspectionPanel = bottomAnimationEl.closest(
    ".progress-inspection-panel"
  );
  const animatedPropertyInspectionPanel = bottomAnimatedPropertyEl.closest(
    ".progress-inspection-panel"
  );
  const initialScrollTopOfAnimation = animationInspectionPanel.scrollTop;
  const initialScrollTopOfAnimatedProperty =
    animatedPropertyInspectionPanel.scrollTop;

  info(
    "Check whether the scroll amount re-calculate after changing the count of items"
  );
  await selectNode(".negative-delay", inspector);
  await waitUntil(
    () =>
      initialScrollTopOfAnimation > animationInspectionPanel.scrollTop &&
      initialScrollTopOfAnimatedProperty >
        animatedPropertyInspectionPanel.scrollTop
  );
  ok(
    true,
    "Scroll amount for animation list should be less than previous state"
  );
  ok(
    true,
    "Scroll amount for animated property list should be less than previous state"
  );
});