Bug 1426194 - Part 2: Add test. r?pbro
MozReview-Commit-ID: 9A0hRjiYGTE
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
@@ -310,16 +310,30 @@ const TEST_CASES = [
{ x: 110, y: 1 },
{ x: 114.9, y: 1 },
{ x: 115, y: 0.5 },
{ x: 129.9, y: 0.5 },
{ x: 130, y: 0 },
{ x: 1000, y: 1 },
]
}
+ },
+ {
+ "opacity": {
+ expectedClass: "opacity",
+ expectedValues: [
+ { x: 0, y: 1 },
+ { x: 250, y: 1 },
+ { x: 499, y: 1 },
+ { x: 500, y: 1 },
+ { x: 500, y: 0 },
+ { x: 750, y: 0.5 },
+ { x: 1000, y: 1 },
+ ]
+ }
}
];
add_task(function* () {
yield addTab(URL_ROOT + "doc_multiple_property_types.html");
const {panel} = yield openAnimationInspector();
const timelineComponent = panel.animationsTimelineComponent;
const detailEl = timelineComponent.details.containerEl;
--- a/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
@@ -125,16 +125,27 @@ const TEST_CASES = {
{ x: 11500, y: 0.1 },
{ x: 12999, y: 0.1 },
{ x: 13000, y: 0.13 },
{ x: 13500, y: 0.135 },
{ x: 14000, y: 0.14 },
]
]
},
+ "duplicate-offsets": {
+ expectedKeyframeEasingGraphs: [
+ [
+ { x: 0, y: 0 },
+ { x: 25000, y: 0.25 },
+ { x: 50000, y: 0.5 },
+ { x: 75000, y: 0.5 },
+ { x: 99999, y: 0.5 },
+ ]
+ ]
+ },
};
add_task(function* () {
yield addTab(URL_ROOT + "doc_multiple_easings.html");
const { panel } = yield openAnimationInspector();
getAnimationTimeBlocks(panel).forEach(timeBlock => {
const state = timeBlock.animation.state;
const testcase = TEST_CASES[state.name];
--- a/devtools/client/animationinspector/test/doc_multiple_easings.html
+++ b/devtools/client/animationinspector/test/doc_multiple_easings.html
@@ -144,16 +144,41 @@
offset: 0.13,
opacity: 0,
},
],
timing: {
duration: DURATION,
}
},
+ {
+ id: "duplicate-offsets",
+ frames: [
+ {
+ offset: 0,
+ opacity: 1,
+ },
+ {
+ offset: 0.5,
+ opacity: 1,
+ },
+ {
+ offset: 0.5,
+ easing: "steps(1)",
+ opacity: 0,
+ },
+ {
+ offset: 1,
+ opacity: 1,
+ },
+ ],
+ timing: {
+ duration: DURATION,
+ }
+ },
].forEach(({ id, frames, timing }) => {
const target = document.createElement("div");
document.body.appendChild(target);
const effect = new KeyframeEffect(target, frames, timing);
const animation = new Animation(effect, document.timeline);
animation.id = id;
animation.play();
});
--- a/devtools/client/animationinspector/test/doc_multiple_property_types.html
+++ b/devtools/client/animationinspector/test/doc_multiple_property_types.html
@@ -12,16 +12,17 @@
<body>
<div id=target1>1</div>
<div id=target2>2</div>
<div id=target3>3</div>
<div id=target4>4</div>
<div id=target5>5</div>
<div id=target6>6</div>
<div id=target7>7</div>
+ <div id=target8>8</div>
<script>
"use strict";
const timing = {
duration: 1000,
fill: "forwards"
};
@@ -116,11 +117,30 @@
easing: "steps(2)",
offset: 0.1,
},
{
opacity: 0,
offset: 0.13,
},
], timing).pause();
+
+ document.querySelector("#target8").animate(
+ [
+ {
+ opacity: 1,
+ },
+ {
+ opacity: 1,
+ offset: 0.5,
+ },
+ {
+ opacity: 0,
+ offset: 0.5,
+ },
+ {
+ opacity: 1,
+ offset: 1,
+ },
+ ], timing).pause();
</script>
</body>
</html>