--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
@@ -2,52 +2,51 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test following animated property list test.
// 1. Existence for animated property list.
// 2. Number of animated property item.
-const TEST_CASES = [
+const TEST_DATA = [
{
- target: ".animated",
+ targetClass: "animated",
expectedNumber: 1,
},
{
- target: ".compositor-notall",
+ targetClass: "compositor-notall",
expectedNumber: 3,
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_simple_animation.html");
const { inspector, panel } = await openAnimationInspector();
info("Checking animated property list and items existence at initial");
ok(!panel.querySelector(".animated-property-list"),
"The animated-property-list should not be in the DOM at initial");
- for (const testCase of TEST_CASES) {
- info(`Checking animated-property-list and items existence at ${ testCase.target }`);
- const animatedNode = await getNodeFront(testCase.target, inspector);
- await selectNodeAndWaitForAnimations(animatedNode, inspector);
+ for (const { targetClass, expectedNumber } of TEST_DATA) {
+ info(`Checking animated-property-list and items existence at ${ targetClass }`);
+ await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
ok(panel.querySelector(".animated-property-list"),
- `The animated-property-list should be in the DOM at ${ testCase.target }`);
+ `The animated-property-list should be in the DOM at ${ targetClass }`);
const itemEls =
panel.querySelectorAll(".animated-property-list .animated-property-item");
- is(itemEls.length, testCase.expectedNumber,
- `The number of animated-property-list should be ${ testCase.expectedNumber } `
- + `at ${ testCase.target }`);
+ is(itemEls.length, expectedNumber,
+ `The number of animated-property-list should be ${ expectedNumber } ` +
+ `at ${ targetClass }`);
if (itemEls.length < 2) {
continue;
}
- info(`Checking the background color for `
- + `the animated property item at ${ testCase.target }`);
+ info("Checking the background color for " +
+ `the animated property item at ${ targetClass }`);
const evenColor = panel.ownerGlobal.getComputedStyle(itemEls[0]).backgroundColor;
const oddColor = panel.ownerGlobal.getComputedStyle(itemEls[1]).backgroundColor;
isnot(evenColor, oddColor,
- "Background color of an even animated property item "
- + "should be different from odd");
+ "Background color of an even animated property item " +
+ "should be different from odd");
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@@ -29,43 +29,47 @@ add_task(async function() {
info("Checking animated property name component");
await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
const animatedPropertyNameEls = panel.querySelectorAll(".animated-property-name");
is(animatedPropertyNameEls.length, TEST_DATA.length,
`Number of animated property name elements should be ${ TEST_DATA.length }`);
for (const [index, animatedPropertyNameEl] of animatedPropertyNameEls.entries()) {
- const testData = TEST_DATA[index];
+ const {
+ property,
+ isOnCompositor,
+ isWarning,
+ } = TEST_DATA[index];
- info(`Checking text content for ${ testData.property }`);
+ info(`Checking text content for ${ property }`);
const spanEl = animatedPropertyNameEl.querySelector("span");
ok(spanEl,
- `<span> element should be in animated-property-name of ${ testData.property }`);
- is(spanEl.textContent, testData.property,
- `textContent should be ${ testData.property }`);
+ `<span> element should be in animated-property-name of ${ property }`);
+ is(spanEl.textContent, property,
+ `textContent should be ${ property }`);
- info(`Checking compositor sign for ${ testData.property }`);
+ info(`Checking compositor sign for ${ property }`);
- if (testData.isOnCompositor) {
+ if (isOnCompositor) {
ok(animatedPropertyNameEl.classList.contains("compositor"),
"animatedPropertyNameEl should has .compositor class");
isnot(getComputedStyle(spanEl, "::before").width, "auto",
"width of ::before pseud should not be auto");
} else {
ok(!animatedPropertyNameEl.classList.contains("compositor"),
"animatedPropertyNameEl should not have .compositor class");
is(getComputedStyle(spanEl, "::before").width, "auto",
"width of ::before pseud should be auto");
}
- info(`Checking warning for ${ testData.property }`);
+ info(`Checking warning for ${ property }`);
- if (testData.isWarning) {
+ if (isWarning) {
ok(animatedPropertyNameEl.classList.contains("warning"),
"animatedPropertyNameEl should has .warning class");
is(getComputedStyle(spanEl).textDecorationStyle, "dotted",
"text-decoration-style of spanEl should be 'dotted'");
is(getComputedStyle(spanEl).textDecorationLine, "underline",
"text-decoration-line of spanEl should be 'underline'");
} else {
ok(!animatedPropertyNameEl.classList.contains("warning"),
--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
@@ -1,37 +1,36 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that whether title in header of animations detail.
-const TEST_CASES = [
+const TEST_DATA = [
{
- target: ".cssanimation-normal",
+ targetClass: "cssanimation-normal",
expectedTitle: "cssanimation - CSS Animation",
},
{
- target: ".delay-positive",
+ targetClass: "delay-positive",
expectedTitle: "test-delay-animation - Script Animation",
},
{
- target: ".easing-step",
+ targetClass: "easing-step",
expectedTitle: "Script Animation",
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { inspector, panel } = await openAnimationInspector();
info("Checking title in each header of animation detail");
- for (const testCase of TEST_CASES) {
- info(`Checking title at ${ testCase.target }`);
- const animatedNode = await getNodeFront(testCase.target, inspector);
- await selectNodeAndWaitForAnimations(animatedNode, inspector);
+ for (const { targetClass, expectedTitle } of TEST_DATA) {
+ info(`Checking title at ${ targetClass }`);
+ await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
const titleEl = panel.querySelector(".animation-detail-title");
- is(titleEl.textContent, testCase.expectedTitle,
- `Title of "${ testCase.target }" should be "${ testCase.expectedTitle }"`);
+ is(titleEl.textContent, expectedTitle,
+ `Title of "${ targetClass }" should be "${ expectedTitle }"`);
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_animation-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list.js
@@ -7,28 +7,28 @@
add_task(async function() {
await addTab(URL_ROOT + "doc_simple_animation.html");
const { animationInspector, inspector, panel } = await openAnimationInspector();
info("Checking animation list and items existence");
ok(panel.querySelector(".animation-list"),
- "The animation-list is in the DOM");
+ "The animation-list is in the DOM");
is(panel.querySelectorAll(".animation-list .animation-item").length,
animationInspector.state.animations.length,
"The number of animations displayed matches the number of animations");
info("Checking the background color for the animation list items");
const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
const evenColor =
panel.ownerGlobal.getComputedStyle(animationItemEls[0]).backgroundColor;
const oddColor =
panel.ownerGlobal.getComputedStyle(animationItemEls[1]).backgroundColor;
isnot(evenColor, oddColor,
- "Background color of an even animation should be different from odd");
+ "Background color of an even animation should be different from odd");
info("Checking list and items existence after select a element which has an animation");
const animatedNode = await getNodeFront(".animated", inspector);
await selectNodeAndWaitForAnimations(animatedNode, inspector);
is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
- "The number of animations displayed should be 1 for .animated element");
+ "The number of animations displayed should be 1 for .animated element");
});
--- a/devtools/client/inspector/animation/test/browser_animation_animation-target.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target.js
@@ -10,26 +10,25 @@
add_task(async function() {
await addTab(URL_ROOT + "doc_simple_animation.html");
const { animationInspector, inspector, panel } = await openAnimationInspector();
info("Checking the animation target elements existance");
const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
is(animationItemEls.length, animationInspector.state.animations.length,
- "Number of animation target element should be same to number of animations "
- + "that displays");
+ "Number of animation target element should be same to number of animations " +
+ "that displays");
for (const animationItemEl of animationItemEls) {
const animationTargetEl = animationItemEl.querySelector(".animation-target");
ok(animationTargetEl,
- "The animation target element should be in each animation item element");
+ "The animation target element should be in each animation item element");
}
info("Checking the content of animation target");
await selectNodeAndWaitForAnimations(".animated", inspector);
const animationTargetEl =
panel.querySelector(".animation-list .animation-item .animation-target");
is(animationTargetEl.textContent, "div.ball.animated",
- "The target element's content is correct");
- ok(animationTargetEl.querySelector(".objectBox"),
- "objectBox is in the page exists");
+ "The target element's content is correct");
+ ok(animationTargetEl.querySelector(".objectBox"), "objectBox is in the page exists");
});
--- a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -44,37 +44,37 @@ add_task(async function() {
*
* @param {TimeScale} - timeScale
* @param {Element} - listHeaderEl which is header element
*/
function assertTimelineTickItems(timeScale, listHeaderEl) {
const animationTimelineTickListEl =
listHeaderEl.querySelector(".animation-timeline-tick-list");
ok(animationTimelineTickListEl,
- "The animation timeline tick list element should be in header");
+ "The animation timeline tick list element should be in header");
const width = animationTimelineTickListEl.offsetWidth;
const animationDuration = timeScale.getDuration();
const minTimeInterval = TIME_GRADUATION_MIN_SPACING * animationDuration / width;
const interval = findOptimalTimeInterval(minTimeInterval);
const expectedTickItem = Math.ceil(animationDuration / interval);
const timelineTickItemEls =
listHeaderEl.querySelectorAll(".animation-timeline-tick-item");
is(timelineTickItemEls.length, expectedTickItem,
- "The expected number of timeline ticks were found");
+ "The expected number of timeline ticks were found");
info("Make sure graduations are evenly distributed and show the right times");
for (const [index, tickEl] of timelineTickItemEls.entries()) {
const left = parseFloat(tickEl.style.left);
const expectedPos = index * interval * 100 / animationDuration;
is(Math.round(left), Math.round(expectedPos),
- `Graduation ${ index } is positioned correctly`);
+ `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`);
+ `Graduation ${ index } has the right text content`);
}
}
--- a/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
@@ -45,16 +45,17 @@ function formatStopwatchTime(time) {
let milliseconds = parseInt(time % 1000, 10);
let seconds = parseInt((time / 1000) % 60, 10);
let minutes = parseInt((time / (1000 * 60)), 10);
let 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}`;
--- a/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
+++ b/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
@@ -16,19 +16,19 @@ add_task(async function() {
await selectNodeAndWaitForAnimations(stillNode, inspector);
ok(panel.querySelector(".animation-error-message"),
"Element which has animation-error-message class should exist for a still node");
is(panel.querySelector(".animation-error-message > p").textContent,
ANIMATION_L10N.getStr("panel.noAnimation"),
"The correct error message is displayed");
ok(!panel.querySelector(".animation-list"),
- "Element which has animations class should not exist for a still node");
+ "Element which has animations class should not exist for a still node");
info("Checking animation list and error message existence for a text node");
const commentNode = await inspector.walker.previousSibling(stillNode);
await selectNodeAndWaitForAnimations(commentNode, inspector);
ok(panel.querySelector(".animation-error-message"),
- "Element which has animation-error-message class should exist for a text node");
+ "Element which has animation-error-message class should exist for a text node");
ok(!panel.querySelector(".animation-list"),
- "Element which has animations class should not exist for a text node");
+ "Element which has animations class should not exist for a text node");
});
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
@@ -8,17 +8,17 @@
// * path segments
// * fill color by animation type
// * stop color if the animation type is color
requestLongerTimeout(2);
const TEST_DATA = [
{
- targetName: "multi-types",
+ targetClass: "multi-types",
properties: [
{
name: "background-color",
computedValuePathClass: "color-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 1000, y: 100 },
@@ -82,17 +82,17 @@ const TEST_DATA = [
{ x: 0, y: 0 },
{ x: 500, y: 50 },
{ x: 1000, y: 100 },
],
},
],
},
{
- targetName: "multi-types-reverse",
+ targetClass: "multi-types-reverse",
properties: [
{
name: "background-color",
computedValuePathClass: "color-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 1000, y: 100 },
@@ -156,17 +156,17 @@ const TEST_DATA = [
{ x: 0, y: 100 },
{ x: 500, y: 50 },
{ x: 1000, y: 0 },
],
},
],
},
{
- targetName: "middle-keyframe",
+ targetClass: "middle-keyframe",
properties: [
{
name: "background-color",
computedValuePathClass: "color-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 500, y: 100 },
@@ -244,17 +244,17 @@ const TEST_DATA = [
{ x: 500, y: 100 },
{ x: 750, y: 50 },
{ x: 1000, y: 0 },
],
},
],
},
{
- targetName: "steps-keyframe",
+ targetClass: "steps-keyframe",
properties: [
{
name: "background-color",
computedValuePathClass: "color-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 500, y: 100 },
@@ -330,33 +330,33 @@ const TEST_DATA = [
{ x: 500, y: 50 },
{ x: 1000, y: 50 },
{ x: 1000, y: 100 },
],
},
],
},
{
- targetName: "steps-effect",
+ targetClass: "steps-effect",
properties: [
{
name: "opacity",
computedValuePathClass: "distance-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 250, y: 25 },
{ x: 500, y: 50 },
{ x: 750, y: 75 },
{ x: 1000, y: 100 },
],
},
],
},
{
- targetName: "frames-keyframe",
+ targetClass: "frames-keyframe",
properties: [
{
name: "opacity",
computedValuePathClass: "distance-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 199, y: 0 },
{ x: 200, y: 25 },
@@ -367,17 +367,17 @@ const TEST_DATA = [
{ x: 799, y: 75 },
{ x: 800, y: 100 },
{ x: 1000, y: 100 },
],
},
],
},
{
- targetName: "narrow-offsets",
+ targetClass: "narrow-offsets",
properties: [
{
name: "opacity",
computedValuePathClass: "distance-path",
expectedPathSegments: [
{ x: 0, y: 0 },
{ x: 100, y: 100 },
{ x: 110, y: 100 },
@@ -386,17 +386,17 @@ const TEST_DATA = [
{ x: 129.9, y: 50 },
{ x: 130, y: 0 },
{ x: 1000, y: 100 },
],
},
],
},
{
- targetName: "duplicate-offsets",
+ targetClass: "duplicate-offsets",
properties: [
{
name: "opacity",
computedValuePathClass: "distance-path",
expectedPathSegments: [
{ x: 0, y: 100 },
{ x: 250, y: 100 },
{ x: 499, y: 100 },
@@ -410,29 +410,29 @@ const TEST_DATA = [
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_keyframes.html");
const { inspector, panel } = await openAnimationInspector();
- for (const { properties, targetName } of TEST_DATA) {
- info(`Checking keyframes graph for ${ targetName }`);
- await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+ for (const { properties, targetClass } of TEST_DATA) {
+ info(`Checking keyframes graph for ${ targetClass }`);
+ await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
for (const property of properties) {
const {
name,
computedValuePathClass,
expectedPathSegments,
expectedStopColors,
} = property;
- const testTarget = `${ name } in ${ targetName }`;
+ const testTarget = `${ name } in ${ targetClass }`;
info(`Checking keyframes graph for ${ testTarget }`);
info(`Checking keyframes graph path existence for ${ testTarget }`);
const keyframesGraphPathEl = panel.querySelector(`.${ name }`);
ok(keyframesGraphPathEl,
`The keyframes graph path element of ${ testTarget } should be existence`);
info(`Checking computed value path existence for ${ testTarget }`);
const computedValuePathEl =
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@@ -5,17 +5,17 @@
// Test for following easing hint in ComputedValuePath.
// * element existence
// * path segments
// * hint text
const TEST_DATA = [
{
- targetName: "no-easing",
+ targetClass: "no-easing",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 100 },
@@ -23,17 +23,17 @@ const TEST_DATA = [
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
- targetName: "effect-easing",
+ targetClass: "effect-easing",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 100 },
@@ -41,17 +41,17 @@ const TEST_DATA = [
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
- targetName: "keyframe-easing",
+ targetClass: "keyframe-easing",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "steps(2)",
path: [
{ x: 0, y: 100 },
@@ -61,17 +61,17 @@ const TEST_DATA = [
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
- targetName: "both-easing",
+ targetClass: "both-easing",
properties: [
{
name: "margin-left",
expectedHints: [
{
hint: "steps(1)",
path: [
{ x: 0, y: 0 },
@@ -94,17 +94,17 @@ const TEST_DATA = [
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
- targetName: "narrow-keyframes",
+ targetClass: "narrow-keyframes",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 0 },
@@ -125,17 +125,17 @@ const TEST_DATA = [
{ x: 1000, y: 100 },
],
},
],
},
],
},
{
- targetName: "duplicate-keyframes",
+ targetClass: "duplicate-keyframes",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 0 },
@@ -157,17 +157,17 @@ const TEST_DATA = [
{ x: 1000, y: 100 },
],
},
],
},
],
},
{
- targetName: "color-keyframes",
+ targetClass: "color-keyframes",
properties: [
{
name: "color",
expectedHints: [
{
hint: "ease-in",
rect: {
x: 0,
@@ -189,33 +189,28 @@ const TEST_DATA = [
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_easings.html");
const { inspector, panel } = await openAnimationInspector();
- for (const { properties, targetName } of TEST_DATA) {
- info(`Checking keyframes graph for ${ targetName }`);
- await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+ for (const { properties, targetClass } of TEST_DATA) {
+ info(`Checking keyframes graph for ${ targetClass }`);
+ await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
- for (const property of properties) {
- const {
- name,
- expectedHints,
- } = property;
-
- const testTarget = `${ name } in ${ targetName }`;
+ for (const { name, expectedHints } of properties) {
+ const testTarget = `${ name } in ${ targetClass }`;
info(`Checking easing hint for ${ testTarget }`);
info(`Checking easing hint existence for ${ testTarget }`);
const hintEls = panel.querySelectorAll(`.${ name } .hint`);
is(hintEls.length, expectedHints.length,
- `Count of easing hint elements of ${ testTarget } `
- + `should be ${ expectedHints.length }`);
+ `Count of easing hint elements of ${ testTarget } ` +
+ `should be ${ expectedHints.length }`);
for (let i = 0; i < expectedHints.length; i++) {
const hintTarget = `hint[${ i }] of ${ testTarget }`;
info(`Checking ${ hintTarget }`);
const hintEl = hintEls[i];
const expectedHint = expectedHints[i];
@@ -243,22 +238,22 @@ add_task(async function() {
}
info(`Checking interaction for ${ hintTarget }`);
interactionEl.scrollIntoView(false);
const win = hintEl.ownerGlobal;
// Mouse out once from pathEl.
EventUtils.synthesizeMouse(interactionEl, -1, -1, { type: "mouseout" }, win);
is(win.getComputedStyle(interactionEl).strokeOpacity, 0,
- `stroke-opacity of hintEl for ${ hintTarget } should be 0`
- + " while mouse is out from the element");
+ `stroke-opacity of hintEl for ${ hintTarget } should be 0` +
+ " while mouse is out from the element");
// Mouse over the pathEl.
ok(isStrokeChangedByMouseOver(interactionEl, win),
- `stroke-opacity of hintEl for ${ hintTarget } should be 1`
- + " while mouse is over the element");
+ `stroke-opacity of hintEl for ${ hintTarget } should be 1` +
+ " while mouse is over the element");
}
}
}
});
function isStrokeChangedByMouseOver(pathEl, win) {
const boundingBox = pathEl.getBoundingClientRect();
const x = boundingBox.width / 2;
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
@@ -5,17 +5,17 @@
// Test for following keyframe marker.
// * element existence
// * title
// * and left style
const TEST_DATA = [
{
- targetName: "multi-types",
+ targetClass: "multi-types",
properties: [
{
name: "background-color",
expectedValues: [
{
title: "rgb(255, 0, 0)",
left: "0%",
},
@@ -101,17 +101,17 @@ const TEST_DATA = [
title: "translate(100px)",
left: "100%",
}
],
},
],
},
{
- targetName: "narrow-offsets",
+ targetClass: "narrow-offsets",
properties: [
{
name: "opacity",
expectedValues: [
{
title: "0",
left: "0%",
},
@@ -133,44 +133,39 @@ const TEST_DATA = [
}
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_keyframes.html");
const { inspector, panel } = await openAnimationInspector();
- for (const { properties, targetName } of TEST_DATA) {
- info(`Checking keyframe marker for ${ targetName }`);
- await selectNodeAndWaitForAnimations(`#${ targetName }`, inspector);
+ for (const { properties, targetClass } of TEST_DATA) {
+ info(`Checking keyframe marker for ${ targetClass }`);
+ await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
- for (const property of properties) {
- const {
- name,
- expectedValues,
- } = property;
-
- const testTarget = `${ name } in ${ targetName }`;
+ for (const { name, expectedValues } of properties) {
+ const testTarget = `${ name } in ${ targetClass }`;
info(`Checking keyframe marker for ${ testTarget }`);
info(`Checking keyframe marker existence for ${ testTarget }`);
const markerEls = panel.querySelectorAll(`.${ name } .keyframe-marker-item`);
is(markerEls.length, expectedValues.length,
- `Count of keyframe marker elements of ${ testTarget } `
- + `should be ${ expectedValues.length }`);
+ `Count of keyframe marker elements of ${ testTarget } ` +
+ `should be ${ expectedValues.length }`);
for (let i = 0; i < expectedValues.length; i++) {
const hintTarget = `.keyframe-marker-item[${ i }] of ${ testTarget }`;
info(`Checking ${ hintTarget }`);
const markerEl = markerEls[i];
const expectedValue = expectedValues[i];
info(`Checking title in ${ hintTarget }`);
is(markerEl.getAttribute("title"), expectedValue.title,
- `title in ${ hintTarget } should be ${ expectedValue.title }`);
+ `title in ${ hintTarget } should be ${ expectedValue.title }`);
info(`Checking left style in ${ hintTarget }`);
is(markerEl.style.left, expectedValue.left,
- `left in ${ hintTarget } should be ${ expectedValue.left }`);
+ `left in ${ hintTarget } should be ${ expectedValue.left }`);
}
}
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -6,78 +6,81 @@ http://creativecommons.org/publicdomain/
// Test for following KeyframesProgressBar:
// * element existence
// * progress bar position in multi effect timings
// * progress bar position after changing playback rate
// * progress bar position when select another animation
requestLongerTimeout(5);
-const POSITION_TESTCASES = [
+const TEST_DATA = [
{
- targetClassName: "cssanimation-linear",
+ targetClass: "cssanimation-linear",
scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
expectedPositions: [0, 0.25, 0.5, 0.75, 0],
},
{
- targetClassName: "easing-step",
+ targetClass: "easing-step",
scrubberPositions: [0, 0.49, 0.5, 0.99],
expectedPositions: [0, 0, 0.5, 0.5],
},
{
- targetClassName: "delay-positive",
+ targetClass: "delay-positive",
scrubberPositions: [0, 0.33, 0.5],
expectedPositions: [0, 0, 0.25],
},
{
- targetClassName: "delay-negative",
+ targetClass: "delay-negative",
scrubberPositions: [0, 0.49, 0.5, 0.75],
expectedPositions: [0, 0, 0.5, 0.75],
},
{
- targetClassName: "enddelay-positive",
+ targetClass: "enddelay-positive",
scrubberPositions: [0, 0.66, 0.67, 0.99],
expectedPositions: [0, 0.99, 0, 0],
},
{
- targetClassName: "enddelay-negative",
+ targetClass: "enddelay-negative",
scrubberPositions: [0, 0.49, 0.5, 0.99],
expectedPositions: [0, 0.49, 0, 0],
},
{
- targetClassName: "direction-reverse-with-iterations-infinity",
+ targetClass: "direction-reverse-with-iterations-infinity",
scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
expectedPositions: [1, 0.75, 0.5, 0.25, 1],
},
{
- targetClassName: "fill-both-width-delay-iterationstart",
+ targetClass: "fill-both-width-delay-iterationstart",
scrubberPositions: [0, 0.33, 0.66, 0.833, 1],
expectedPositions: [0.5, 0.5, 0.99, 0.25, 0.5],
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { animationInspector, inspector, panel } = await openAnimationInspector();
info("Checking progress bar position in multi effect timings");
- for (const testcase of POSITION_TESTCASES) {
- info(`Checking progress bar position for ${ testcase.targetClassName }`);
- await selectNodeAndWaitForAnimations(`.${ testcase.targetClassName }`, inspector);
+ for (const testdata of TEST_DATA) {
+ const {
+ targetClass,
+ scrubberPositions,
+ expectedPositions,
+ } = testdata;
+
+ info(`Checking progress bar position for ${ targetClass }`);
+ await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
info("Checking progress bar existence");
const areaEl = panel.querySelector(".keyframes-progress-bar-area");
ok(areaEl, "progress bar area should exist");
const barEl = areaEl.querySelector(".keyframes-progress-bar");
ok(barEl, "progress bar should exist");
- const scrubberPositions = testcase.scrubberPositions;
- const expectedPositions = testcase.expectedPositions;
-
for (let i = 0; i < scrubberPositions.length; i++) {
info(`Scrubber position is ${ scrubberPositions[i] }`);
await clickOnCurrentTimeScrubberController(animationInspector,
panel, scrubberPositions[i]);
assertPosition(barEl, areaEl, expectedPositions[i], animationInspector);
}
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_avoid-updating-during-hiding.js
@@ -32,21 +32,21 @@ add_task(async function() {
await selectAnimationInspector(inspector);
await selectNodeAndWaitForAnimations("head", inspector);
await inspector.toolbox.selectTool("webconsole");
await selectNode("div", inspector);
is(animationInspector.state.animations.length, 0,
"Should not update after selecting another tool");
await selectAnimationInspector(inspector);
is(animationInspector.state.animations.length, 1,
- "Should update after selecting animation inspector");
+ "Should update after selecting animation inspector");
await assertCurrentTimeUpdated(animationInspector, panel, true);
await inspector.toolbox.selectTool("webconsole");
is(animationInspector.state.animations.length, 1,
- "Should not update after selecting another tool again");
+ "Should not update after selecting another tool again");
await assertCurrentTimeUpdated(animationInspector, panel, false);
});
async function assertCurrentTimeUpdated(animationInspector, panel, shouldRunning) {
let count = 0;
const listener = () => {
count++;
--- a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
@@ -15,31 +15,31 @@ add_task(async function() {
info("Checking the mutation for add an animation");
const originalAnimationCount = animationInspector.state.animations.length;
await setClassAttribute(animationInspector, ".still", "ball no-compositor");
is(animationInspector.state.animations.length, originalAnimationCount + 1,
"Count of animation should be plus one to original count");
info("Checking added animation existence even the animation name is duplicated");
is(getAnimationNameCount(panel, "no-compositor"), 2,
- "Count of animation should be plus one to original count");
+ "Count of animation should be plus one to original count");
info("Checking the mutation for remove an animation");
await setClassAttribute(animationInspector, ".compositor-notall", "ball still");
is(animationInspector.state.animations.length, originalAnimationCount,
- "Count of animation should be same to original count since we remove an animation");
+ "Count of animation should be same to original count since we remove an animation");
info("Checking the mutation for modify an animation");
await selectNodeAndWaitForAnimations(".compositor-all", inspector);
await setStyle(animationInspector, ".compositor-all", "animationDuration", "100s");
await setStyle(animationInspector, ".compositor-all", "animationIterationCount", 1);
const summaryGraphPathEl = getSummaryGraphPathElement(panel, "compositor-all");
is(summaryGraphPathEl.viewBox.baseVal.width, 100000,
- "Width of summary graph path should be 100000 " +
- "after modifing the duration and iteration count");
+ "Width of summary graph path should be 100000 " +
+ "after modifing the duration and iteration count");
await setStyle(animationInspector, ".compositor-all", "animationDelay", "100s");
is(summaryGraphPathEl.viewBox.baseVal.width, 200000,
"Width of summary graph path should be 200000 after modifing the delay");
ok(summaryGraphPathEl.parentElement.querySelector(".animation-delay-sign"),
"Delay sign element shoud exist");
});
function getAnimationNameCount(panel, animationName) {
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
@@ -2,58 +2,53 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for following AnimationName component works.
// * element existance
// * name text
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "cssanimation-normal",
+ targetClass: "cssanimation-normal",
expectedLabel: "cssanimation",
},
{
- targetClassName: "cssanimation-linear",
+ targetClass: "cssanimation-linear",
expectedLabel: "cssanimation",
},
{
- targetClassName: "delay-positive",
+ targetClass: "delay-positive",
expectedLabel: "test-delay-animation",
},
{
- targetClassName: "delay-negative",
+ targetClass: "delay-negative",
expectedLabel: "test-negative-delay-animation",
},
{
- targetClassName: "easing-step",
+ targetClass: "easing-step",
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
- const {
- expectedLabel,
- targetClassName,
- } = testCase;
+ for (const { targetClass, expectedLabel } of TEST_DATA) {
+ const animationItemEl =
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
- const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
- info(`Checking animation name element existance for ${ targetClassName }`);
+ info(`Checking animation name element existance for ${ targetClass }`);
const animationNameEl = animationItemEl.querySelector(".animation-name");
if (expectedLabel) {
ok(animationNameEl,
- "The animation name element should be in animation item element");
+ "The animation name element should be in animation item element");
is(animationNameEl.textContent, expectedLabel,
- `The animation name should be ${ expectedLabel }`);
+ `The animation name should be ${ expectedLabel }`);
} else {
ok(!animationNameEl,
- "The animation name element should not be in animation item element");
+ "The animation name element should not be in animation item element");
}
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
@@ -11,38 +11,38 @@ add_task(async function() {
const { inspector, panel } = await openAnimationInspector();
info("Select a test node we know has an animation running on the compositor");
await selectNodeAndWaitForAnimations(".compositor-all", inspector);
const summaryGraphEl = panel.querySelector(".animation-summary-graph");
ok(summaryGraphEl.classList.contains("compositor"),
- "The element has the compositor css class");
+ "The element has the compositor css class");
ok(hasTooltip(summaryGraphEl,
ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
"The element has the right tooltip content");
info("Select a node we know doesn't have an animation on the compositor");
await selectNodeAndWaitForAnimations(".no-compositor", inspector);
ok(!summaryGraphEl.classList.contains("compositor"),
- "The element does not have the compositor css class");
+ "The element does not have the compositor css class");
ok(!hasTooltip(summaryGraphEl,
ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
"The element does not have oncompositor tooltip content");
ok(!hasTooltip(summaryGraphEl,
ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")),
"The element does not have oncompositor tooltip content");
info("Select a node we know has animation on the compositor and not on the compositor");
await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
ok(summaryGraphEl.classList.contains("compositor"),
- "The element has the compositor css class");
+ "The element has the compositor css class");
ok(hasTooltip(summaryGraphEl,
ANIMATION_L10N.getStr("player.somePropertiesOnCompositorTooltip")),
"The element has the right tooltip content");
});
function hasTooltip(summaryGraphEl, expected) {
const tooltip = summaryGraphEl.getAttribute("title");
return tooltip.includes(expected);
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
@@ -5,114 +5,114 @@
// Test for following ComputedTimingPath component works.
// * element existance
// * iterations: path, count
// * delay: path
// * fill: path
// * endDelay: path
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "cssanimation-normal",
+ targetClass: "cssanimation-normal",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 40.851 },
{ x: 500000, y: 80.24},
{ x: 750000, y: 96.05 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
]
],
},
{
- targetClassName: "cssanimation-linear",
+ targetClass: "cssanimation-linear",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
]
],
},
{
- targetClassName: "delay-positive",
+ targetClass: "delay-positive",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 500000, y: 0 },
],
expectedIterationPathList: [
[
{ x: 500000, y: 0 },
{ x: 750000, y: 25 },
{ x: 1000000, y: 50 },
{ x: 1250000, y: 75 },
{ x: 1500000, y: 100 },
{ x: 1500000, y: 0 },
]
],
},
{
- targetClassName: "delay-negative",
+ targetClass: "delay-negative",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 250000, y: 75 },
{ x: 500000, y: 100 },
{ x: 500000, y: 0 },
]
],
},
{
- targetClassName: "easing-step",
+ targetClass: "easing-step",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 499999, y: 0 },
{ x: 500000, y: 50 },
{ x: 999999, y: 50 },
{ x: 1000000, y: 0 },
]
],
},
{
- targetClassName: "enddelay-positive",
+ targetClass: "enddelay-positive",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
]
],
expectedEndDelayPath: [
{ x: 1000000, y: 0 },
{ x: 1500000, y: 0 },
],
},
{
- targetClassName: "enddelay-negative",
+ targetClass: "enddelay-negative",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 500000, y: 0 },
]
],
},
{
- targetClassName: "enddelay-with-fill-forwards",
+ targetClass: "enddelay-with-fill-forwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
@@ -127,17 +127,17 @@ const TEST_CASES = [
expectedForwardsPath: [
{ x: 1500000, y: 0 },
{ x: 1500000, y: 100 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
],
},
{
- targetClassName: "enddelay-with-iterations-infinity",
+ targetClass: "enddelay-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
@@ -149,17 +149,17 @@ const TEST_CASES = [
{ x: 1750000, y: 75 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
- targetClassName: "direction-alternate-with-iterations-infinity",
+ targetClass: "direction-alternate-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
@@ -171,17 +171,17 @@ const TEST_CASES = [
{ x: 1500000, y: 50 },
{ x: 1750000, y: 25 },
{ x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
- targetClassName: "direction-alternate-reverse-with-iterations-infinity",
+ targetClass: "direction-alternate-reverse-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 250000, y: 75 },
{ x: 500000, y: 50 },
{ x: 750000, y: 25 },
{ x: 1000000, y: 0 },
@@ -193,17 +193,17 @@ const TEST_CASES = [
{ x: 1750000, y: 75 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
- targetClassName: "direction-reverse-with-iterations-infinity",
+ targetClass: "direction-reverse-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 0, y: 100 },
{ x: 250000, y: 75 },
{ x: 500000, y: 50 },
{ x: 750000, y: 25 },
{ x: 1000000, y: 0 },
@@ -215,30 +215,30 @@ const TEST_CASES = [
{ x: 1500000, y: 50 },
{ x: 1750000, y: 25 },
{ x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
- targetClassName: "fill-backwards",
+ targetClass: "fill-backwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
]
],
},
{
- targetClassName: "fill-backwards-with-delay-iterationstart",
+ targetClass: "fill-backwards-with-delay-iterationstart",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 500000, y: 50 },
{ x: 500000, y: 0 },
],
expectedIterationPathList: [
[
@@ -251,17 +251,17 @@ const TEST_CASES = [
{ x: 1000000, y: 0 },
{ x: 1250000, y: 25 },
{ x: 1500000, y: 50 },
{ x: 1500000, y: 0 },
]
],
},
{
- targetClassName: "fill-both",
+ targetClass: "fill-both",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
@@ -270,17 +270,17 @@ const TEST_CASES = [
expectedForwardsPath: [
{ x: 1000000, y: 0 },
{ x: 1000000, y: 100 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
],
},
{
- targetClassName: "fill-both-width-delay-iterationstart",
+ targetClass: "fill-both-width-delay-iterationstart",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 0, y: 50 },
{ x: 500000, y: 50 },
{ x: 500000, y: 0 },
],
expectedIterationPathList: [
[
@@ -297,17 +297,17 @@ const TEST_CASES = [
]
],
expectedForwardsPath: [
{ x: 1500000, y: 0 },
{ x: 1500000, y: 50 },
],
},
{
- targetClassName: "fill-forwards",
+ targetClass: "fill-forwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
@@ -316,148 +316,148 @@ const TEST_CASES = [
expectedForwardsPath: [
{ x: 1000000, y: 0 },
{ x: 1000000, y: 100 },
{ x: 2000000, y: 100 },
{ x: 2000000, y: 0 },
],
},
{
- targetClassName: "iterationstart",
+ targetClass: "iterationstart",
expectedIterationPathList: [
[
{ x: 0, y: 50 },
{ x: 250000, y: 75 },
{ x: 500000, y: 100 },
{ x: 500000, y: 0 },
],
[
{ x: 500000, y: 0 },
{ x: 750000, y: 25 },
{ x: 1000000, y: 50 },
{ x: 1000000, y: 0 },
]
],
},
{
- targetClassName: "no-compositor",
+ targetClass: "no-compositor",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
]
],
},
{
- targetClassName: "keyframes-easing-step",
+ targetClass: "keyframes-easing-step",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 499999, y: 0 },
{ x: 500000, y: 50 },
{ x: 999999, y: 50 },
{ x: 1000000, y: 0 },
]
],
},
{
- targetClassName: "narrow-keyframes",
+ targetClass: "narrow-keyframes",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 100000, y: 10 },
{ x: 110000, y: 10 },
{ x: 115000, y: 10 },
{ x: 129999, y: 10 },
{ x: 130000, y: 13 },
{ x: 135000, y: 13.5 },
]
],
},
{
- targetClassName: "duplicate-offsets",
+ targetClass: "duplicate-offsets",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 250000, y: 25 },
{ x: 500000, y: 50 },
{ x: 999999, y: 50 },
]
],
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
+ for (const testData of TEST_DATA) {
const {
expectedDelayPath,
expectedEndDelayPath,
expectedForwardsPath,
expectedIterationPathList,
isInfinity,
- targetClassName,
- } = testCase;
+ targetClass,
+ } = testData;
const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
- info(`Checking computed timing path existance for ${ targetClassName }`);
+ info(`Checking computed timing path existance for ${ targetClass }`);
const computedTimingPathEl =
animationItemEl.querySelector(".animation-computed-timing-path");
ok(computedTimingPathEl,
"The computed timing path element should be in each animation item element");
- info(`Checking delay path for ${ targetClassName }`);
+ info(`Checking delay path for ${ targetClass }`);
const delayPathEl = computedTimingPathEl.querySelector(".animation-delay-path");
if (expectedDelayPath) {
ok(delayPathEl, "delay path should be existance");
assertPathSegments(delayPathEl, true, expectedDelayPath);
} else {
ok(!delayPathEl, "delay path should not be existance");
}
- info(`Checking iteration path list for ${ targetClassName }`);
+ info(`Checking iteration path list for ${ targetClass }`);
const iterationPathEls =
computedTimingPathEl.querySelectorAll(".animation-iteration-path");
is(iterationPathEls.length, expectedIterationPathList.length,
`Number of iteration path should be ${ expectedIterationPathList.length }`);
for (const [j, iterationPathEl] of iterationPathEls.entries()) {
assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]);
- info(`Checking infinity ${ targetClassName }`);
+ info(`Checking infinity ${ targetClass }`);
if (isInfinity && j >= 1) {
ok(iterationPathEl.classList.contains("infinity"),
"iteration path should have 'infinity' class");
} else {
ok(!iterationPathEl.classList.contains("infinity"),
"iteration path should not have 'infinity' class");
}
}
- info(`Checking endDelay path for ${ targetClassName }`);
+ info(`Checking endDelay path for ${ targetClass }`);
const endDelayPathEl = computedTimingPathEl.querySelector(".animation-enddelay-path");
if (expectedEndDelayPath) {
ok(endDelayPathEl, "endDelay path should be existance");
assertPathSegments(endDelayPathEl, true, expectedEndDelayPath);
} else {
ok(!endDelayPathEl, "endDelay path should not be existance");
}
- info(`Checking forwards fill path for ${ targetClassName }`);
+ info(`Checking forwards fill path for ${ targetClass }`);
const forwardsPathEl =
computedTimingPathEl.querySelector(".animation-fill-forwards-path");
if (expectedForwardsPath) {
ok(forwardsPathEl, "forwards path should be existance");
assertPathSegments(forwardsPathEl, true, expectedForwardsPath);
} else {
ok(!forwardsPathEl, "forwards path should not be existance");
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
@@ -9,15 +9,15 @@ add_task(async function() {
await addTab(URL_ROOT + "doc_simple_animation.html");
const { inspector, panel } = await openAnimationInspector();
info("Checking the path for different time scale");
await selectNodeAndWaitForAnimations(".animated", inspector);
const pathStringA = panel.querySelector(".animation-iteration-path").getAttribute("d");
info("Select animation which has different time scale from no-compositor");
- await selectNodeAndWaitForAnimations("#endDelayed", inspector);
+ await selectNodeAndWaitForAnimations(".end-delay", inspector);
info("Select no-compositor again");
await selectNodeAndWaitForAnimations(".animated", inspector);
const pathStringB = panel.querySelector(".animation-iteration-path").getAttribute("d");
is(pathStringA, pathStringB, "Path string should be same even change the time scale");
});
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
@@ -4,84 +4,79 @@
"use strict";
// Test for following DelaySign component works.
// * element existance
// * left position
// * width
// * additinal class
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "delay-positive",
+ targetClass: "delay-positive",
expectedResult: {
left: "25%",
width: "25%",
},
},
{
- targetClassName: "delay-negative",
+ targetClass: "delay-negative",
expectedResult: {
additionalClass: "negative",
left: "0%",
width: "25%",
},
},
{
- targetClassName: "fill-backwards-with-delay-iterationstart",
+ targetClass: "fill-backwards-with-delay-iterationstart",
expectedResult: {
additionalClass: "fill",
left: "25%",
width: "25%",
},
},
{
- targetClassName: "fill-both",
+ targetClass: "fill-both",
},
{
- targetClassName: "fill-both-width-delay-iterationstart",
+ targetClass: "fill-both-width-delay-iterationstart",
expectedResult: {
additionalClass: "fill",
left: "25%",
width: "25%",
},
},
{
- targetClassName: "keyframes-easing-step",
+ targetClass: "keyframes-easing-step",
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
- const {
- expectedResult,
- targetClassName,
- } = testCase;
+ for (const { targetClass, expectedResult } of TEST_DATA) {
+ const animationItemEl =
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
- const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
- info(`Checking delay sign existance for ${ targetClassName }`);
+ info(`Checking delay sign existance for ${ targetClass }`);
const delaySignEl = animationItemEl.querySelector(".animation-delay-sign");
if (expectedResult) {
ok(delaySignEl, "The delay sign element should be in animation item element");
is(delaySignEl.style.left, expectedResult.left,
- `Left position should be ${ expectedResult.left }`);
+ `Left position should be ${ expectedResult.left }`);
is(delaySignEl.style.width, expectedResult.width,
- `Width should be ${ expectedResult.width }`);
+ `Width should be ${ expectedResult.width }`);
if (expectedResult.additionalClass) {
ok(delaySignEl.classList.contains(expectedResult.additionalClass),
- `delay sign element should have ${ expectedResult.additionalClass } class`);
+ `delay sign element should have ${ expectedResult.additionalClass } class`);
} else {
ok(!delaySignEl.classList.contains(expectedResult.additionalClass),
"delay sign element should not have " +
`${ expectedResult.additionalClass } class`);
}
} else {
ok(!delaySignEl, "The delay sign element should not be in animation item element");
}
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
@@ -2,59 +2,54 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for following EffectTimingPath component works.
// * element existance
// * path
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "cssanimation-linear",
+ targetClass: "cssanimation-linear",
},
{
- targetClassName: "delay-negative",
+ targetClass: "delay-negative",
},
{
- targetClassName: "easing-step",
+ targetClass: "easing-step",
expectedPath: [
{ x: 0, y: 0 },
{ x: 499999, y: 0 },
{ x: 500000, y: 50 },
{ x: 999999, y: 50 },
{ x: 1000000, y: 0 },
],
},
{
- targetClassName: "keyframes-easing-step",
+ targetClass: "keyframes-easing-step",
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
- const {
- expectedPath,
- targetClassName,
- } = testCase;
+ for (const { targetClass, expectedPath } of TEST_DATA) {
+ const animationItemEl =
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
- const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
- info(`Checking effect timing path existance for ${ targetClassName }`);
+ info(`Checking effect timing path existance for ${ targetClass }`);
const effectTimingPathEl =
animationItemEl.querySelector(".animation-effect-timing-path");
if (expectedPath) {
ok(effectTimingPathEl,
- "The effect timing path element should be in animation item element");
+ "The effect timing path element should be in animation item element");
const pathEl = effectTimingPathEl.querySelector(".animation-iteration-path");
assertPathSegments(pathEl, false, expectedPath);
} else {
ok(!effectTimingPathEl,
- "The effect timing path element should not be in animation item element");
+ "The effect timing path element should not be in animation item element");
}
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
@@ -4,79 +4,74 @@
"use strict";
// Test for following EndDelaySign component works.
// * element existance
// * left position
// * width
// * additinal class
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "enddelay-positive",
+ targetClass: "enddelay-positive",
expectedResult: {
left: "75%",
width: "25%",
},
},
{
- targetClassName: "enddelay-negative",
+ targetClass: "enddelay-negative",
expectedResult: {
additionalClass: "negative",
left: "50%",
width: "25%",
},
},
{
- targetClassName: "enddelay-with-fill-forwards",
+ targetClass: "enddelay-with-fill-forwards",
expectedResult: {
additionalClass: "fill",
left: "75%",
width: "25%",
},
},
{
- targetClassName: "enddelay-with-iterations-infinity",
+ targetClass: "enddelay-with-iterations-infinity",
},
{
- targetClassName: "keyframes-easing-step",
+ targetClass: "keyframes-easing-step",
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
- const {
- expectedResult,
- targetClassName,
- } = testCase;
+ for (const { targetClass, expectedResult } of TEST_DATA) {
+ const animationItemEl =
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
- const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
- info(`Checking endDelay sign existance for ${ targetClassName }`);
+ info(`Checking endDelay sign existance for ${ targetClass }`);
const endDelaySignEl = animationItemEl.querySelector(".animation-end-delay-sign");
if (expectedResult) {
ok(endDelaySignEl, "The endDelay sign element should be in animation item element");
is(endDelaySignEl.style.left, expectedResult.left,
- `Left position should be ${ expectedResult.left }`);
+ `Left position should be ${ expectedResult.left }`);
is(endDelaySignEl.style.width, expectedResult.width,
- `Width should be ${ expectedResult.width }`);
+ `Width should be ${ expectedResult.width }`);
if (expectedResult.additionalClass) {
ok(endDelaySignEl.classList.contains(expectedResult.additionalClass),
- `endDelay sign element should have ${ expectedResult.additionalClass } class`);
+ `endDelay sign element should have ${ expectedResult.additionalClass } class`);
} else {
ok(!endDelaySignEl.classList.contains(expectedResult.additionalClass),
"endDelay sign element should not have " +
`${ expectedResult.additionalClass } class`);
}
} else {
ok(!endDelaySignEl,
- "The endDelay sign element should not be in animation item element");
+ "The endDelay sign element should not be in animation item element");
}
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
@@ -2,52 +2,47 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for following NegativeDelayPath component works.
// * element existance
// * path
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "delay-positive",
+ targetClass: "delay-positive",
},
{
- targetClassName: "delay-negative",
+ targetClass: "delay-negative",
expectedPath: [
{ x: -500000, y: 0 },
{ x: -250000, y: 25 },
{ x: 0, y: 50 },
{ x: 0, y: 0 },
],
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
- const {
- expectedPath,
- targetClassName,
- } = testCase;
+ for (const { targetClass, expectedPath } of TEST_DATA) {
+ const animationItemEl =
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
- const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
- info(`Checking negative delay path existence for ${ targetClassName }`);
+ info(`Checking negative delay path existence for ${ targetClass }`);
const negativeDelayPathEl =
animationItemEl.querySelector(".animation-negative-delay-path");
if (expectedPath) {
ok(negativeDelayPathEl,
- "The negative delay path element should be in animation item element");
+ "The negative delay path element should be in animation item element");
const pathEl = negativeDelayPathEl.querySelector("path");
assertPathSegments(pathEl, true, expectedPath);
} else {
ok(!negativeDelayPathEl,
- "The negative delay path element should not be in animation item element");
+ "The negative delay path element should not be in animation item element");
}
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
@@ -2,53 +2,48 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for following NegativeEndDelayPath component works.
// * element existance
// * path
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "enddelay-positive",
+ targetClass: "enddelay-positive",
},
{
- targetClassName: "enddelay-negative",
+ targetClass: "enddelay-negative",
expectedPath: [
{ x: 500000, y: 0 },
{ x: 500000, y: 50 },
{ x: 750000, y: 75 },
{ x: 1000000, y: 100 },
{ x: 1000000, y: 0 },
],
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
- const {
- expectedPath,
- targetClassName,
- } = testCase;
+ for (const { targetClass, expectedPath } of TEST_DATA) {
+ const animationItemEl =
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
- const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
-
- info(`Checking negative endDelay path existance for ${ targetClassName }`);
+ info(`Checking negative endDelay path existance for ${ targetClass }`);
const negativeEndDelayPathEl =
animationItemEl.querySelector(".animation-negative-end-delay-path");
if (expectedPath) {
ok(negativeEndDelayPathEl,
- "The negative endDelay path element should be in animation item element");
+ "The negative endDelay path element should be in animation item element");
const pathEl = negativeEndDelayPathEl.querySelector("path");
assertPathSegments(pathEl, true, expectedPath);
} else {
ok(!negativeEndDelayPathEl,
- "The negative endDelay path element should not be in animation item element");
+ "The negative endDelay path element should not be in animation item element");
}
}
});
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@@ -1,202 +1,197 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for existance and content of tooltip on summary graph element.
-const TEST_CASES = [
+const TEST_DATA = [
{
- targetClassName: "cssanimation-normal",
+ targetClass: "cssanimation-normal",
expectedResult: {
nameAndType: "cssanimation - CSS Animation",
duration: "1,000s",
},
},
{
- targetClassName: "cssanimation-linear",
+ targetClass: "cssanimation-linear",
expectedResult: {
nameAndType: "cssanimation - CSS Animation",
duration: "1,000s",
animationTimingFunction: "linear",
},
},
{
- targetClassName: "delay-positive",
+ targetClass: "delay-positive",
expectedResult: {
nameAndType: "test-delay-animation - Script Animation",
delay: "500s",
duration: "1,000s",
},
},
{
- targetClassName: "delay-negative",
+ targetClass: "delay-negative",
expectedResult: {
nameAndType: "test-negative-delay-animation - Script Animation",
delay: "-500s",
duration: "1,000s",
},
},
{
- targetClassName: "easing-step",
+ targetClass: "easing-step",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
easing: "steps(2)",
},
},
{
- targetClassName: "enddelay-positive",
+ targetClass: "enddelay-positive",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
endDelay: "500s",
},
},
{
- targetClassName: "enddelay-negative",
+ targetClass: "enddelay-negative",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
endDelay: "-500s",
},
},
{
- targetClassName: "enddelay-with-fill-forwards",
+ targetClass: "enddelay-with-fill-forwards",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
endDelay: "500s",
fill: "forwards",
},
},
{
- targetClassName: "enddelay-with-iterations-infinity",
+ targetClass: "enddelay-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
endDelay: "500s",
iterations: "\u221E",
},
},
{
- targetClassName: "direction-alternate-with-iterations-infinity",
+ targetClass: "direction-alternate-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
direction: "alternate",
iterations: "\u221E",
},
},
{
- targetClassName: "direction-alternate-reverse-with-iterations-infinity",
+ targetClass: "direction-alternate-reverse-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
direction: "alternate-reverse",
iterations: "\u221E",
},
},
{
- targetClassName: "direction-reverse-with-iterations-infinity",
+ targetClass: "direction-reverse-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
direction: "reverse",
iterations: "\u221E",
},
},
{
- targetClassName: "fill-backwards",
+ targetClass: "fill-backwards",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
fill: "backwards",
},
},
{
- targetClassName: "fill-backwards-with-delay-iterationstart",
+ targetClass: "fill-backwards-with-delay-iterationstart",
expectedResult: {
nameAndType: "Script Animation",
delay: "500s",
duration: "1,000s",
fill: "backwards",
iterationStart: "0.5",
},
},
{
- targetClassName: "fill-both",
+ targetClass: "fill-both",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
fill: "both",
},
},
{
- targetClassName: "fill-both-width-delay-iterationstart",
+ targetClass: "fill-both-width-delay-iterationstart",
expectedResult: {
nameAndType: "Script Animation",
delay: "500s",
duration: "1,000s",
fill: "both",
iterationStart: "0.5",
},
},
{
- targetClassName: "fill-forwards",
+ targetClass: "fill-forwards",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
fill: "forwards",
},
},
{
- targetClassName: "iterationstart",
+ targetClass: "iterationstart",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
iterationStart: "0.5",
},
},
{
- targetClassName: "no-compositor",
+ targetClass: "no-compositor",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
},
},
{
- targetClassName: "keyframes-easing-step",
+ targetClass: "keyframes-easing-step",
expectedResult: {
nameAndType: "Script Animation",
duration: "1,000s",
},
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();
- for (const testCase of TEST_CASES) {
- const {
- expectedResult,
- targetClassName,
- } = testCase;
-
+ for (const { targetClass, expectedResult } of TEST_DATA) {
const animationItemEl =
- findAnimationItemElementsByTargetClassName(panel, targetClassName);
+ findAnimationItemElementsByTargetClassName(panel, targetClass);
const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
- info(`Checking tooltip for ${ targetClassName }`);
+ info(`Checking tooltip for ${ targetClass }`);
ok(summaryGraphEl.hasAttribute("title"),
- "Summary graph should have 'title' attribute");
+ "Summary graph should have 'title' attribute");
const tooltip = summaryGraphEl.getAttribute("title");
const {
animationTimingFunction,
delay,
easing,
endDelay,
direction,
@@ -209,17 +204,17 @@ add_task(async function() {
ok(tooltip.startsWith(nameAndType), "Tooltip should start with name and type");
if (animationTimingFunction) {
const expected = `Animation timing function: ${ animationTimingFunction }`;
ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
} else {
ok(!tooltip.includes("Animation timing function:"),
- "Tooltip should not include animation timing function");
+ "Tooltip should not include animation timing function");
}
if (delay) {
const expected = `Delay: ${ delay }`;
ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
} else {
ok(!tooltip.includes("Delay:"), "Tooltip should not include delay");
}
@@ -266,12 +261,12 @@ add_task(async function() {
ok(!tooltip.includes("Repeats:"), "Tooltip should not include iterations");
}
if (iterationStart) {
const expected = `Iteration start: ${ iterationStart }`;
ok(tooltip.includes(expected), `Tooltip should include '${ expected }'`);
} else {
ok(!tooltip.includes("Iteration start:"),
- "Tooltip should not include iterationStart");
+ "Tooltip should not include iterationStart");
}
}
});
--- a/devtools/client/inspector/animation/test/doc_multi_easings.html
+++ b/devtools/client/inspector/animation/test/doc_multi_easings.html
@@ -10,17 +10,17 @@
</style>
</head>
<body>
<script>
"use strict";
function createAnimation(name, keyframes, effectEasing) {
const div = document.createElement("div");
- div.id = name;
+ div.classList.add(name);
document.body.appendChild(div);
const effect = {
duration: 100000,
fill: "forwards"
};
if (effectEasing) {
--- a/devtools/client/inspector/animation/test/doc_multi_keyframes.html
+++ b/devtools/client/inspector/animation/test/doc_multi_keyframes.html
@@ -10,17 +10,17 @@
</style>
</head>
<body>
<script>
"use strict";
function createAnimation(name, keyframes, effectEasing) {
const div = document.createElement("div");
- div.id = name;
+ div.classList.add(name);
document.body.appendChild(div);
const effect = {
duration: 100000,
fill: "forwards"
};
if (effectEasing) {
--- a/devtools/client/inspector/animation/test/doc_simple_animation.html
+++ b/devtools/client/inspector/animation/test/doc_simple_animation.html
@@ -149,26 +149,26 @@
<div class="ball animated"></div>
<div class="ball multi"></div>
<div class="ball delayed"></div>
<div class="ball multi-finite"></div>
<div class="ball short"></div>
<div class="ball long"></div>
<div class="ball negative-delay"></div>
<div class="ball no-compositor"></div>
- <div class="ball" id="endDelayed"></div>
+ <div class="ball end-delay"></div>
<div class="ball compositor-all"></div>
<div class="ball compositor-notall"></div>
<div class="ball longhand"></div>
<script>
/* globals KeyframeEffect, Animation */
"use strict";
- var el = document.getElementById("endDelayed");
- let effect = new KeyframeEffect(el, [
+ const el = document.querySelector(".end-delay");
+ const effect = new KeyframeEffect(el, [
{ opacity: 0, offset: 0 },
{ opacity: 1, offset: 1 }
], { duration: 1000000, endDelay: 500000, fill: "none" });
- let animation = new Animation(effect, document.timeline);
+ const animation = new Animation(effect, document.timeline);
animation.play();
</script>
</body>
</html>