зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset ac3850461834 (bug 1383974
)
This commit is contained in:
Родитель
e42733acb1
Коммит
9a192e55b1
|
@ -34,7 +34,6 @@ support-files =
|
|||
[browser_animation_controller_exposes_document_currentTime.js]
|
||||
[browser_animation_detail_displayed.js]
|
||||
skip-if = os == "linux" && !debug # Bug 1234567
|
||||
[browser_animation_detail_easings.js]
|
||||
[browser_animation_empty_on_invalid_nodes.js]
|
||||
[browser_animation_keyframe_markers.js]
|
||||
[browser_animation_mutations_with_same_names.js]
|
||||
|
|
|
@ -1,118 +0,0 @@
|
|||
/* vim: set ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
requestLongerTimeout(5);
|
||||
|
||||
// This is a test for displaying the easing of keyframes.
|
||||
// Checks easing text which is displayed as popup and
|
||||
// the path which emphasises by mouseover.
|
||||
|
||||
const TEST_CASES = {
|
||||
"no-easing": {
|
||||
opacity: {
|
||||
expectedValues: ["linear"],
|
||||
}
|
||||
},
|
||||
"effect-easing": {
|
||||
opacity: {
|
||||
expectedValues: ["linear"],
|
||||
}
|
||||
},
|
||||
"keyframe-easing": {
|
||||
opacity: {
|
||||
expectedValues: ["steps(2)"],
|
||||
}
|
||||
},
|
||||
"both-easing": {
|
||||
opacity: {
|
||||
expectedValues: ["steps(2)"],
|
||||
}
|
||||
},
|
||||
"many-keyframes": {
|
||||
backgroundColor: {
|
||||
selector: "rect",
|
||||
expectedValues: ["steps(2)", "ease-out"],
|
||||
noEmphasisPath: true,
|
||||
},
|
||||
opacity: {
|
||||
expectedValues: ["steps(2)", "ease-in", "linear", "ease-out"],
|
||||
}
|
||||
},
|
||||
"css-animations": {
|
||||
opacity: {
|
||||
expectedValues: ["ease", "ease"],
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
add_task(function* () {
|
||||
yield addTab(URL_ROOT + "doc_multiple_easings.html");
|
||||
const { panel } = yield openAnimationInspector();
|
||||
|
||||
const timelineComponent = panel.animationsTimelineComponent;
|
||||
const timeBlocks = getAnimationTimeBlocks(panel);
|
||||
for (let i = 0; i < timeBlocks.length; i++) {
|
||||
yield clickOnAnimation(panel, i);
|
||||
|
||||
const detailComponent = timelineComponent.details;
|
||||
const detailEl = detailComponent.containerEl;
|
||||
const state = detailComponent.animation.state;
|
||||
|
||||
const testcase = TEST_CASES[state.name];
|
||||
if (!testcase) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Expand detail pane height to send mouseover event correct to tested path element.
|
||||
// This is because depending on the environment the target element may be out of
|
||||
// the window.
|
||||
detailEl.closest(".controlled").style.height = "100%";
|
||||
|
||||
for (let testProperty in testcase) {
|
||||
const testIdentity = `"${ testProperty }" of "${ state.name }"`;
|
||||
info(`Test for ${ testIdentity }`);
|
||||
|
||||
const testdata = testcase[testProperty];
|
||||
const selector = testdata.selector ? testdata.selector : `.${testProperty}`;
|
||||
const hintEls = detailEl.querySelectorAll(`${ selector }.hint`);
|
||||
const expectedValues = testdata.expectedValues;
|
||||
is(hintEls.length, expectedValues.length,
|
||||
`Length of hints for ${ testIdentity } should be ${expectedValues.length}`);
|
||||
|
||||
for (let j = 0; j < hintEls.length; j++) {
|
||||
const hintEl = hintEls[j];
|
||||
const expectedValue = expectedValues[j];
|
||||
|
||||
info("Test easing text");
|
||||
const gEl = hintEl.closest("g");
|
||||
ok(gEl, `<g> element for ${ testIdentity } should exists`);
|
||||
const titleEl = gEl.querySelector("title");
|
||||
ok(titleEl, `<title> element for ${ testIdentity } should exists`);
|
||||
is(titleEl.textContent, expectedValue,
|
||||
`textContent of <title> for ${ testIdentity } should be ${ expectedValue }`);
|
||||
|
||||
info("Test emphasis path");
|
||||
const win = hintEl.ownerDocument.defaultView;
|
||||
// Mouse out once from hintEl.
|
||||
EventUtils.synthesizeMouse(hintEl, -1, -1, {type: "mouseout"}, win);
|
||||
is(win.getComputedStyle(hintEl).strokeOpacity, 0,
|
||||
`stroke-opacity of hintEl for ${ testIdentity } should be 0 ` +
|
||||
`while mouse is out from the element`);
|
||||
// Mouse is over the hintEl.
|
||||
EventUtils.synthesizeMouseAtCenter(hintEl, {type: "mouseover"}, win);
|
||||
if (testdata.noEmphasisPath) {
|
||||
is(win.getComputedStyle(hintEl).strokeOpacity, 0,
|
||||
`stroke-opacity of hintEl for ${ testIdentity } should be 0 ` +
|
||||
`even while mouse is over the element`);
|
||||
} else {
|
||||
is(win.getComputedStyle(hintEl).strokeOpacity, 1,
|
||||
`stroke-opacity of hintEl for ${ testIdentity } should be 1 ` +
|
||||
`while mouse is over the element`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
|
@ -3,22 +3,6 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
@keyframes css-animations {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#css-animations {
|
||||
animation: css-animations 100s;
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: lime;
|
||||
height: 50px;
|
||||
|
@ -26,7 +10,6 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="css-animations"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
const DURATION = 100 * 1000;
|
||||
|
@ -89,45 +72,6 @@
|
|||
duration: DURATION,
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "many-keyframes",
|
||||
frames: [
|
||||
{
|
||||
offset: 0,
|
||||
easing: "steps(2)",
|
||||
opacity: 1,
|
||||
backgroundColor: "red",
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
easing: "ease-in",
|
||||
opacity: 0.25,
|
||||
},
|
||||
{
|
||||
offset: 0.3,
|
||||
easing: "ease-out",
|
||||
backgroundColor: "blue",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
easing: "linear",
|
||||
opacity: 0.5,
|
||||
},
|
||||
{
|
||||
offset: 0.75,
|
||||
easing: "ease-out",
|
||||
opacity: 0.75,
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
opacity: 0,
|
||||
backgroundColor: "lime",
|
||||
},
|
||||
],
|
||||
timing: {
|
||||
duration: DURATION,
|
||||
}
|
||||
},
|
||||
].forEach(({ id, frames, timing }) => {
|
||||
const target = document.createElement("div");
|
||||
document.body.appendChild(target);
|
||||
|
|
Загрузка…
Ссылка в новой задаче