--- 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
@@ -11,384 +11,384 @@
// * endDelay: path
const TEST_CASES = [
{
targetClassName: "cssanimation-normal",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 40.851 },
- { x: 50000, y: 80.24},
- { x: 75000, y: 96.05 },
- { x: 100000, y: 100 },
- { x: 100000, 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",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, 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",
expectedDelayPath: [
{ x: 0, y: 0 },
- { x: 50000, y: 0 },
+ { x: 500000, y: 0 },
],
expectedIterationPathList: [
[
- { x: 50000, y: 0 },
- { x: 75000, y: 25 },
- { x: 100000, y: 50 },
- { x: 125000, y: 75 },
- { x: 150000, y: 100 },
- { x: 150000, y: 0 },
+ { 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",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 0, y: 50 },
- { x: 25000, y: 75 },
- { x: 50000, y: 100 },
- { x: 50000, y: 0 },
+ { x: 250000, y: 75 },
+ { x: 500000, y: 100 },
+ { x: 500000, y: 0 },
]
],
},
{
targetClassName: "easing-step",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 49999, y: 0 },
- { x: 50000, y: 50 },
- { x: 99999, y: 50 },
- { x: 100000, y: 0 },
+ { x: 499999, y: 0 },
+ { x: 500000, y: 50 },
+ { x: 999999, y: 50 },
+ { x: 1000000, y: 0 },
]
],
},
{
targetClassName: "enddelay-positive",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
]
],
expectedEndDelayPath: [
- { x: 100000, y: 0 },
- { x: 150000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1500000, y: 0 },
],
},
{
targetClassName: "enddelay-negative",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 50000, y: 0 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 500000, y: 0 },
]
],
},
{
targetClassName: "enddelay-with-fill-forwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
]
],
expectedEndDelayPath: [
- { x: 100000, y: 0 },
- { x: 100000, y: 100 },
- { x: 150000, y: 100 },
- { x: 150000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1000000, y: 100 },
+ { x: 1500000, y: 100 },
+ { x: 1500000, y: 0 },
],
expectedForwardsPath: [
- { x: 150000, y: 0 },
- { x: 150000, y: 100 },
- { x: 200000, y: 100 },
- { x: 200000, y: 0 },
+ { x: 1500000, y: 0 },
+ { x: 1500000, y: 100 },
+ { x: 2000000, y: 100 },
+ { x: 2000000, y: 0 },
],
},
{
targetClassName: "enddelay-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
],
[
- { x: 100000, y: 0 },
- { x: 125000, y: 25 },
- { x: 150000, y: 50 },
- { x: 175000, y: 75 },
- { x: 200000, y: 100 },
- { x: 200000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1250000, y: 25 },
+ { x: 1500000, y: 50 },
+ { x: 1750000, y: 75 },
+ { x: 2000000, y: 100 },
+ { x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
targetClassName: "direction-alternate-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
],
[
- { x: 100000, y: 0 },
- { x: 100000, y: 100 },
- { x: 125000, y: 75 },
- { x: 150000, y: 50 },
- { x: 175000, y: 25 },
- { x: 200000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1000000, y: 100 },
+ { x: 1250000, y: 75 },
+ { x: 1500000, y: 50 },
+ { x: 1750000, y: 25 },
+ { x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
targetClassName: "direction-alternate-reverse-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 0, y: 100 },
- { x: 25000, y: 75 },
- { x: 50000, y: 50 },
- { x: 75000, y: 25 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 75 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 25 },
+ { x: 1000000, y: 0 },
],
[
- { x: 100000, y: 0 },
- { x: 125000, y: 25 },
- { x: 150000, y: 50 },
- { x: 175000, y: 75 },
- { x: 200000, y: 100 },
- { x: 200000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1250000, y: 25 },
+ { x: 1500000, y: 50 },
+ { x: 1750000, y: 75 },
+ { x: 2000000, y: 100 },
+ { x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
targetClassName: "direction-reverse-with-iterations-infinity",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
{ x: 0, y: 100 },
- { x: 25000, y: 75 },
- { x: 50000, y: 50 },
- { x: 75000, y: 25 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 75 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 25 },
+ { x: 1000000, y: 0 },
],
[
- { x: 100000, y: 0 },
- { x: 100000, y: 100 },
- { x: 125000, y: 75 },
- { x: 150000, y: 50 },
- { x: 175000, y: 25 },
- { x: 200000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1000000, y: 100 },
+ { x: 1250000, y: 75 },
+ { x: 1500000, y: 50 },
+ { x: 1750000, y: 25 },
+ { x: 2000000, y: 0 },
]
],
isInfinity: true,
},
{
targetClassName: "fill-backwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, 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",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 0, y: 50 },
- { x: 50000, y: 50 },
- { x: 50000, y: 0 },
+ { x: 500000, y: 50 },
+ { x: 500000, y: 0 },
],
expectedIterationPathList: [
[
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
],
[
- { x: 100000, y: 0 },
- { x: 125000, y: 25 },
- { x: 150000, y: 50 },
- { x: 150000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1250000, y: 25 },
+ { x: 1500000, y: 50 },
+ { x: 1500000, y: 0 },
]
],
},
{
targetClassName: "fill-both",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
]
],
expectedForwardsPath: [
- { x: 100000, y: 0 },
- { x: 100000, y: 100 },
- { x: 200000, y: 100 },
- { x: 200000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1000000, y: 100 },
+ { x: 2000000, y: 100 },
+ { x: 2000000, y: 0 },
],
},
{
targetClassName: "fill-both-width-delay-iterationstart",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 0, y: 50 },
- { x: 50000, y: 50 },
- { x: 50000, y: 0 },
+ { x: 500000, y: 50 },
+ { x: 500000, y: 0 },
],
expectedIterationPathList: [
[
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
],
[
- { x: 100000, y: 0 },
- { x: 125000, y: 25 },
- { x: 150000, y: 50 },
- { x: 150000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1250000, y: 25 },
+ { x: 1500000, y: 50 },
+ { x: 1500000, y: 0 },
]
],
expectedForwardsPath: [
- { x: 150000, y: 0 },
- { x: 150000, y: 50 },
+ { x: 1500000, y: 0 },
+ { x: 1500000, y: 50 },
],
},
{
targetClassName: "fill-forwards",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, y: 0 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 750000, y: 75 },
+ { x: 1000000, y: 100 },
+ { x: 1000000, y: 0 },
]
],
expectedForwardsPath: [
- { x: 100000, y: 0 },
- { x: 100000, y: 100 },
- { x: 200000, y: 100 },
- { x: 200000, y: 0 },
+ { x: 1000000, y: 0 },
+ { x: 1000000, y: 100 },
+ { x: 2000000, y: 100 },
+ { x: 2000000, y: 0 },
],
},
{
targetClassName: "iterationstart",
expectedIterationPathList: [
[
{ x: 0, y: 50 },
- { x: 25000, y: 75 },
- { x: 50000, y: 100 },
- { x: 50000, y: 0 },
+ { x: 250000, y: 75 },
+ { x: 500000, y: 100 },
+ { x: 500000, y: 0 },
],
[
- { x: 50000, y: 0 },
- { x: 75000, y: 25 },
- { x: 100000, y: 50 },
- { x: 100000, y: 0 },
+ { x: 500000, y: 0 },
+ { x: 750000, y: 25 },
+ { x: 1000000, y: 50 },
+ { x: 1000000, y: 0 },
]
],
},
{
targetClassName: "no-compositor",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 75000, y: 75 },
- { x: 100000, y: 100 },
- { x: 100000, 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",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 49999, y: 0 },
- { x: 50000, y: 50 },
- { x: 99999, y: 50 },
- { x: 100000, y: 0 },
+ { x: 499999, y: 0 },
+ { x: 500000, y: 50 },
+ { x: 999999, y: 50 },
+ { x: 1000000, y: 0 },
]
],
},
{
targetClassName: "narrow-keyframes",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 10000, y: 10 },
- { x: 11000, y: 10 },
- { x: 11500, y: 10 },
- { x: 12999, y: 10 },
- { x: 13000, y: 13 },
- { x: 13500, y: 13.5 },
+ { 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",
expectedIterationPathList: [
[
{ x: 0, y: 0 },
- { x: 25000, y: 25 },
- { x: 50000, y: 50 },
- { x: 99999, y: 50 },
+ { x: 250000, y: 25 },
+ { x: 500000, y: 50 },
+ { x: 999999, y: 50 },
]
],
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@@ -5,176 +5,176 @@
// Test for existance and content of tooltip on summary graph element.
const TEST_CASES = [
{
targetClassName: "cssanimation-normal",
expectedResult: {
nameAndType: "cssanimation - CSS Animation",
- duration: "100s",
+ duration: "1,000s",
},
},
{
targetClassName: "cssanimation-linear",
expectedResult: {
nameAndType: "cssanimation - CSS Animation",
- duration: "100s",
+ duration: "1,000s",
animationTimingFunction: "linear",
},
},
{
targetClassName: "delay-positive",
expectedResult: {
nameAndType: "test-delay-animation - Script Animation",
- delay: "50s",
- duration: "100s",
+ delay: "500s",
+ duration: "1,000s",
},
},
{
targetClassName: "delay-negative",
expectedResult: {
nameAndType: "test-negative-delay-animation - Script Animation",
- delay: "-50s",
- duration: "100s",
+ delay: "-500s",
+ duration: "1,000s",
},
},
{
targetClassName: "easing-step",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
easing: "steps(2)",
},
},
{
targetClassName: "enddelay-positive",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
- endDelay: "50s",
+ duration: "1,000s",
+ endDelay: "500s",
},
},
{
targetClassName: "enddelay-negative",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
- endDelay: "-50s",
+ duration: "1,000s",
+ endDelay: "-500s",
},
},
{
targetClassName: "enddelay-with-fill-forwards",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
- endDelay: "50s",
+ duration: "1,000s",
+ endDelay: "500s",
fill: "forwards",
},
},
{
targetClassName: "enddelay-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
- endDelay: "50s",
+ duration: "1,000s",
+ endDelay: "500s",
iterations: "\u221E",
},
},
{
targetClassName: "direction-alternate-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
direction: "alternate",
iterations: "\u221E",
},
},
{
targetClassName: "direction-alternate-reverse-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
direction: "alternate-reverse",
iterations: "\u221E",
},
},
{
targetClassName: "direction-reverse-with-iterations-infinity",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
direction: "reverse",
iterations: "\u221E",
},
},
{
targetClassName: "fill-backwards",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
fill: "backwards",
},
},
{
targetClassName: "fill-backwards-with-delay-iterationstart",
expectedResult: {
nameAndType: "Script Animation",
- delay: "50s",
- duration: "100s",
+ delay: "500s",
+ duration: "1,000s",
fill: "backwards",
iterationStart: "0.5",
},
},
{
targetClassName: "fill-both",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
fill: "both",
},
},
{
targetClassName: "fill-both-width-delay-iterationstart",
expectedResult: {
nameAndType: "Script Animation",
- delay: "50s",
- duration: "100s",
+ delay: "500s",
+ duration: "1,000s",
fill: "both",
iterationStart: "0.5",
},
},
{
targetClassName: "fill-forwards",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
fill: "forwards",
},
},
{
targetClassName: "iterationstart",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
iterationStart: "0.5",
},
},
{
targetClassName: "no-compositor",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
},
},
{
targetClassName: "keyframes-easing-step",
expectedResult: {
nameAndType: "Script Animation",
- duration: "100s",
+ duration: "1,000s",
},
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_multi_timings.html");
const { panel } = await openAnimationInspector();