mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 03:15:11 +00:00
Bug 1452495: Split browser_animation_keyframes-graph_computed-value-path test. r=gl
MozReview-Commit-ID: CNJxH3JxJzE --HG-- extra : rebase_source : 6371618ba52d06df2ddbc97d5f0bed53b1b51879
This commit is contained in:
Daisuke Akatsuka
parent
dc23fc9878
commit
a491f34bbd
@ -36,7 +36,8 @@ support-files =
|
||||
[browser_animation_current-time-scrubber_each-different-creation-time-animations.js]
|
||||
[browser_animation_empty_on_invalid_nodes.js]
|
||||
[browser_animation_inspector_exists.js]
|
||||
[browser_animation_keyframes-graph_computed-value-path.js]
|
||||
[browser_animation_keyframes-graph_computed-value-path-01.js]
|
||||
[browser_animation_keyframes-graph_computed-value-path-02.js]
|
||||
[browser_animation_keyframes-graph_computed-value-path_easing-hint.js]
|
||||
skip-if = (os == "win") || (os == "linux") #1461899
|
||||
[browser_animation_keyframes-graph_keyframe-marker.js]
|
||||
|
||||
@ -334,130 +334,8 @@ const TEST_DATA = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
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 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
targetClass: "frames-keyframe",
|
||||
properties: [
|
||||
{
|
||||
name: "opacity",
|
||||
computedValuePathClass: "distance-path",
|
||||
expectedPathSegments: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 199, y: 0 },
|
||||
{ x: 200, y: 25 },
|
||||
{ x: 399, y: 25 },
|
||||
{ x: 400, y: 50 },
|
||||
{ x: 599, y: 50 },
|
||||
{ x: 600, y: 75 },
|
||||
{ x: 799, y: 75 },
|
||||
{ x: 800, y: 100 },
|
||||
{ x: 1000, y: 100 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
targetClass: "narrow-offsets",
|
||||
properties: [
|
||||
{
|
||||
name: "opacity",
|
||||
computedValuePathClass: "distance-path",
|
||||
expectedPathSegments: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 110, y: 100 },
|
||||
{ x: 114.9, y: 100 },
|
||||
{ x: 115, y: 50 },
|
||||
{ x: 129.9, y: 50 },
|
||||
{ x: 130, y: 0 },
|
||||
{ x: 1000, y: 100 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
targetClass: "duplicate-offsets",
|
||||
properties: [
|
||||
{
|
||||
name: "opacity",
|
||||
computedValuePathClass: "distance-path",
|
||||
expectedPathSegments: [
|
||||
{ x: 0, y: 100 },
|
||||
{ x: 250, y: 100 },
|
||||
{ x: 499, y: 100 },
|
||||
{ x: 500, y: 100 },
|
||||
{ x: 500, y: 0 },
|
||||
{ x: 750, y: 50 },
|
||||
{ x: 1000, y: 100 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
await addTab(URL_ROOT + "doc_multi_keyframes.html");
|
||||
const { animationInspector, panel } = await openAnimationInspector();
|
||||
|
||||
for (const { properties, targetClass } of TEST_DATA) {
|
||||
info(`Checking keyframes graph for ${ targetClass }`);
|
||||
await clickOnAnimationByTargetSelector(animationInspector,
|
||||
panel, `.${ targetClass }`);
|
||||
|
||||
for (const property of properties) {
|
||||
const {
|
||||
name,
|
||||
computedValuePathClass,
|
||||
expectedPathSegments,
|
||||
expectedStopColors,
|
||||
} = property;
|
||||
|
||||
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 =
|
||||
keyframesGraphPathEl.querySelector(`.${ computedValuePathClass }`);
|
||||
ok(computedValuePathEl,
|
||||
`The computed value path element of ${ testTarget } should be existence`);
|
||||
|
||||
info(`Checking path segments for ${ testTarget }`);
|
||||
const pathEl = computedValuePathEl.querySelector("path");
|
||||
ok(pathEl, `The <path> element of ${ testTarget } should be existence`);
|
||||
assertPathSegments(pathEl, true, expectedPathSegments);
|
||||
|
||||
if (!expectedStopColors) {
|
||||
continue;
|
||||
}
|
||||
|
||||
info(`Checking linearGradient for ${ testTarget }`);
|
||||
const linearGradientEl = computedValuePathEl.querySelector("linearGradient");
|
||||
ok(linearGradientEl,
|
||||
`The <linearGradientEl> element of ${ testTarget } should be existence`);
|
||||
|
||||
for (const expectedStopColor of expectedStopColors) {
|
||||
const { offset, color } = expectedStopColor;
|
||||
assertLinearGradient(linearGradientEl, offset, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
await testKeyframesGraphComputedValuePath(TEST_DATA);
|
||||
});
|
||||
@ -0,0 +1,91 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test for following ComputedValuePath component:
|
||||
// * element existence
|
||||
// * path segments
|
||||
|
||||
requestLongerTimeout(2);
|
||||
|
||||
const TEST_DATA = [
|
||||
{
|
||||
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 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
targetClass: "frames-keyframe",
|
||||
properties: [
|
||||
{
|
||||
name: "opacity",
|
||||
computedValuePathClass: "distance-path",
|
||||
expectedPathSegments: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 199, y: 0 },
|
||||
{ x: 200, y: 25 },
|
||||
{ x: 399, y: 25 },
|
||||
{ x: 400, y: 50 },
|
||||
{ x: 599, y: 50 },
|
||||
{ x: 600, y: 75 },
|
||||
{ x: 799, y: 75 },
|
||||
{ x: 800, y: 100 },
|
||||
{ x: 1000, y: 100 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
targetClass: "narrow-offsets",
|
||||
properties: [
|
||||
{
|
||||
name: "opacity",
|
||||
computedValuePathClass: "distance-path",
|
||||
expectedPathSegments: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 110, y: 100 },
|
||||
{ x: 114.9, y: 100 },
|
||||
{ x: 115, y: 50 },
|
||||
{ x: 129.9, y: 50 },
|
||||
{ x: 130, y: 0 },
|
||||
{ x: 1000, y: 100 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
targetClass: "duplicate-offsets",
|
||||
properties: [
|
||||
{
|
||||
name: "opacity",
|
||||
computedValuePathClass: "distance-path",
|
||||
expectedPathSegments: [
|
||||
{ x: 0, y: 100 },
|
||||
{ x: 250, y: 100 },
|
||||
{ x: 499, y: 100 },
|
||||
{ x: 500, y: 100 },
|
||||
{ x: 500, y: 0 },
|
||||
{ x: 750, y: 50 },
|
||||
{ x: 1000, y: 100 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
await testKeyframesGraphComputedValuePath(TEST_DATA);
|
||||
});
|
||||
@ -761,3 +761,61 @@ function findStopElement(linearGradientEl, offset) {
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Do test for keyframes-graph_computed-value-path-1/2.
|
||||
*
|
||||
* @param {Array} testData
|
||||
*/
|
||||
async function testKeyframesGraphComputedValuePath(testData) {
|
||||
await addTab(URL_ROOT + "doc_multi_keyframes.html");
|
||||
await removeAnimatedElementsExcept(testData.map(t => `.${ t.targetClass }`));
|
||||
const { animationInspector, panel } = await openAnimationInspector();
|
||||
|
||||
for (const { properties, targetClass } of testData) {
|
||||
info(`Checking keyframes graph for ${ targetClass }`);
|
||||
await clickOnAnimationByTargetSelector(animationInspector,
|
||||
panel, `.${ targetClass }`);
|
||||
|
||||
for (const property of properties) {
|
||||
const {
|
||||
name,
|
||||
computedValuePathClass,
|
||||
expectedPathSegments,
|
||||
expectedStopColors,
|
||||
} = property;
|
||||
|
||||
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 =
|
||||
keyframesGraphPathEl.querySelector(`.${ computedValuePathClass }`);
|
||||
ok(computedValuePathEl,
|
||||
`The computed value path element of ${ testTarget } should be existence`);
|
||||
|
||||
info(`Checking path segments for ${ testTarget }`);
|
||||
const pathEl = computedValuePathEl.querySelector("path");
|
||||
ok(pathEl, `The <path> element of ${ testTarget } should be existence`);
|
||||
assertPathSegments(pathEl, true, expectedPathSegments);
|
||||
|
||||
if (!expectedStopColors) {
|
||||
continue;
|
||||
}
|
||||
|
||||
info(`Checking linearGradient for ${ testTarget }`);
|
||||
const linearGradientEl = computedValuePathEl.querySelector("linearGradient");
|
||||
ok(linearGradientEl,
|
||||
`The <linearGradientEl> element of ${ testTarget } should be existence`);
|
||||
|
||||
for (const expectedStopColor of expectedStopColors) {
|
||||
const { offset, color } = expectedStopColor;
|
||||
assertLinearGradient(linearGradientEl, offset, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user