Bug 1358011 - Part 2: Add test for frames() timing function. r?pbro
MozReview-Commit-ID: DkLJMovtXXC
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_path.js
@@ -234,17 +234,36 @@ const TEST_CASES = [
]
}
},
{
"opacity": {
expectedClass: "opacity",
expectedValues: [
{ x: 0, y: 0 },
+ { x: 250, y: 0.25 },
{ x: 500, y: 0.5 },
+ { x: 750, y: 0.75 },
+ { x: 1000, y: 1 },
+ ]
+ }
+ },
+ {
+ "opacity": {
+ expectedClass: "opacity",
+ expectedValues: [
+ { x: 0, y: 0 },
+ { x: 199, y: 0 },
+ { x: 200, y: 0.25 },
+ { x: 399, y: 0.25 },
+ { x: 400, y: 0.5 },
+ { x: 599, y: 0.5 },
+ { x: 600, y: 0.75 },
+ { x: 799, y: 0.75 },
+ { x: 800, y: 1 },
{ x: 1000, y: 1 },
]
}
}
];
add_task(function* () {
yield addTab(URL_ROOT + "doc_multiple_property_types.html");
--- a/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
+++ b/devtools/client/animationinspector/test/browser_animation_summarygraph_for_multiple_easings.js
@@ -25,28 +25,39 @@ const TEST_CASES = {
{ x: 100000, y: 1 },
{ x: 100000, y: 0 },
]
]
},
"effect-easing": {
expectedEffectEasingGraph: [
{ x: 0, y: 0 },
- { x: 49999, y: 0.0 },
- { x: 50000, y: 0.5 },
- { x: 99999, y: 0.5 },
+ { x: 19999, y: 0.0 },
+ { x: 20000, y: 0.25 },
+ { x: 39999, y: 0.25 },
+ { x: 40000, y: 0.5 },
+ { x: 59999, y: 0.5 },
+ { x: 60000, y: 0.75 },
+ { x: 79999, y: 0.75 },
+ { x: 80000, y: 1 },
+ { x: 99999, y: 1 },
{ x: 100000, y: 0 },
],
expectedKeyframeEasingGraphs: [
[
{ x: 0, y: 0 },
- { x: 49999, y: 0.0 },
- { x: 50000, y: 0.5 },
- { x: 99999, y: 0.5 },
- { x: 100000, y: 1 },
+ { x: 19999, y: 0.0 },
+ { x: 20000, y: 0.25 },
+ { x: 39999, y: 0.25 },
+ { x: 40000, y: 0.5 },
+ { x: 59999, y: 0.5 },
+ { x: 60000, y: 0.75 },
+ { x: 79999, y: 0.75 },
+ { x: 80000, y: 1 },
+ { x: 99999, y: 1 },
{ x: 100000, y: 0 },
]
]
},
"keyframe-easing": {
expectedKeyframeEasingGraphs: [
[
{ x: 0, y: 0 },
--- a/devtools/client/animationinspector/test/doc_multiple_easings.html
+++ b/devtools/client/animationinspector/test/doc_multiple_easings.html
@@ -20,17 +20,17 @@
timing: {
duration: DURATION
}
},
{
id: "effect-easing",
frames: { opacity: [1, 0] },
timing: {
- easing: "steps(2)",
+ easing: "frames(5)",
duration: DURATION
}
},
{
id: "keyframe-easing",
frames: [
{
offset: 0,
--- a/devtools/client/animationinspector/test/doc_multiple_property_types.html
+++ b/devtools/client/animationinspector/test/doc_multiple_property_types.html
@@ -10,16 +10,17 @@
</style>
</head>
<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>
<script>
"use strict";
const timing = {
duration: 1000,
fill: "forwards"
};
@@ -85,11 +86,15 @@
marginLeft: "100px",
opacity: 1,
textAlign: "center",
transform: "translate(100px)" }], timing).pause();
timing.easing = "steps(2)";
document.querySelector("#target5").animate(
[{ opacity: 0 }, { opacity: 1 }], timing).pause();
+
+ timing.easing = "linear";
+ document.querySelector("#target6").animate(
+ [{ opacity: 0, easing: "frames(5)" }, { opacity: 1 }], timing).pause();
</script>
</body>
</html>