browser_animation_animation-timeline-tick.js (3877B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test for following timeline tick items. 7 // * animation list header elements existence 8 // * tick labels elements existence 9 // * count and text of tick label elements changing by the sidebar width 10 11 const TimeScale = require("resource://devtools/client/inspector/animation/utils/timescale.js"); 12 const { 13 findOptimalTimeInterval, 14 } = require("resource://devtools/client/inspector/animation/utils/utils.js"); 15 16 // Should be kept in sync with TIME_GRADUATION_MIN_SPACING in 17 // AnimationTimeTickList component. 18 const TIME_GRADUATION_MIN_SPACING = 40; 19 20 add_task(async function () { 21 await pushPref("devtools.inspector.three-pane-enabled", false); 22 await addTab(URL_ROOT + "doc_simple_animation.html"); 23 await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]); 24 const { animationInspector, inspector, panel } = 25 await openAnimationInspector(); 26 const timeScale = new TimeScale(animationInspector.state.animations); 27 28 info("Checking animation list header element existence"); 29 const listContainerEl = panel.querySelector(".animation-list-container"); 30 const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar"); 31 ok( 32 listHeaderEl, 33 "The header element should be in animation list container element" 34 ); 35 36 info("Checking time tick item elements existence"); 37 await assertTickLabels(timeScale, listContainerEl); 38 const timelineTickItemLength = 39 listContainerEl.querySelectorAll(".tick-label").length; 40 41 info("Checking timeline tick item elements after enlarge sidebar width"); 42 await setSidebarWidth("100%", inspector); 43 await assertTickLabels(timeScale, listContainerEl); 44 Assert.less( 45 timelineTickItemLength, 46 listContainerEl.querySelectorAll(".tick-label").length, 47 "The timeline tick item elements should increase" 48 ); 49 }); 50 51 /** 52 * Assert tick label's position and label. 53 * 54 * @param {TimeScale} - timeScale 55 * @param {Element} - listContainerEl 56 */ 57 async function assertTickLabels(timeScale, listContainerEl) { 58 const timelineTickListEl = listContainerEl.querySelector(".tick-labels"); 59 ok( 60 timelineTickListEl, 61 "The animation timeline tick list element should be in header" 62 ); 63 64 const width = timelineTickListEl.offsetWidth; 65 const animationDuration = timeScale.getDuration(); 66 const minTimeInterval = 67 (TIME_GRADUATION_MIN_SPACING * animationDuration) / width; 68 const interval = findOptimalTimeInterval(minTimeInterval); 69 const shiftWidth = timeScale.zeroPositionTime % interval; 70 const expectedTickItem = 71 Math.ceil(animationDuration / interval) + (shiftWidth !== 0 ? 1 : 0); 72 73 await waitUntil( 74 () => 75 timelineTickListEl.querySelectorAll(".tick-label").length === 76 expectedTickItem 77 ); 78 ok(true, "The expected number of timeline ticks were found"); 79 80 const timelineTickItemEls = 81 timelineTickListEl.querySelectorAll(".tick-label"); 82 83 info("Make sure graduations are evenly distributed and show the right times"); 84 for (const [index, tickEl] of timelineTickItemEls.entries()) { 85 const left = parseFloat(tickEl.style.marginInlineStart); 86 let expectedPos = 87 (((index - 1) * interval + shiftWidth) / animationDuration) * 100; 88 if (shiftWidth !== 0 && index === 0) { 89 expectedPos = 0; 90 } 91 is( 92 Math.round(left), 93 Math.round(expectedPos), 94 `Graduation ${index} is positioned correctly` 95 ); 96 97 // Note that the distancetoRelativeTime and formatTime functions are tested 98 // separately in xpcshell test test_timeScale.js, so we assume that they 99 // work here. 100 const formattedTime = timeScale.formatTime( 101 timeScale.distanceToRelativeTime(expectedPos, width) 102 ); 103 is( 104 tickEl.textContent, 105 formattedTime, 106 `Graduation ${index} has the right text content` 107 ); 108 } 109 }