mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 02:05:42 +00:00
Bug 1254408 - Part 2 - Modifing tests for animation property warnings. r=pbro
MozReview-Commit-ID: GVTiHhHbKlN
This commit is contained in:
parent
be5a1aae1f
commit
bd7fd252a0
@ -4,6 +4,10 @@
|
||||
|
||||
"use strict";
|
||||
|
||||
const { LocalizationHelper } = require("devtools/client/shared/l10n");
|
||||
const STRINGS_URI = "chrome://global/locale/layout_errors.properties";
|
||||
const L10N = new LocalizationHelper(STRINGS_URI);
|
||||
|
||||
// Test that when an animation is selected, its list of animated properties is
|
||||
// displayed below it.
|
||||
|
||||
@ -42,6 +46,9 @@ add_task(function* () {
|
||||
ok(hasExpectedProperties(propertiesList),
|
||||
"The list of properties panel contains the right properties");
|
||||
|
||||
ok(hasExpectedWarnings(propertiesList),
|
||||
"The list of properties panel contains the right warnings");
|
||||
|
||||
info("Click to unselect the animation");
|
||||
yield clickOnAnimation(panel, 0, true);
|
||||
|
||||
@ -66,3 +73,14 @@ function hasExpectedProperties(containerEl) {
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function hasExpectedWarnings(containerEl) {
|
||||
let warnings = [...containerEl.querySelectorAll(".warning")];
|
||||
for (let warning of warnings) {
|
||||
if (warning.getAttribute("title") ==
|
||||
L10N.getStr("AnimationWarningTransformWithGeometricProperties")) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
@ -25,7 +25,8 @@ add_task(function* () {
|
||||
let animationEl = timeline.animationsEl.querySelector(".animation");
|
||||
ok(animationEl.classList.contains("fast-track"),
|
||||
"The animation element has the fast-track css class");
|
||||
ok(hasTooltip(animationEl),
|
||||
ok(hasTooltip(animationEl,
|
||||
L10N.getStr("player.allPropertiesOnCompositorTooltip")),
|
||||
"The animation element has the right tooltip content");
|
||||
|
||||
info("Select a node we know doesn't have an animation on the compositor");
|
||||
@ -34,14 +35,28 @@ add_task(function* () {
|
||||
animationEl = timeline.animationsEl.querySelector(".animation");
|
||||
ok(!animationEl.classList.contains("fast-track"),
|
||||
"The animation element does not have the fast-track css class");
|
||||
ok(!hasTooltip(animationEl),
|
||||
ok(!hasTooltip(animationEl,
|
||||
L10N.getStr("player.allPropertiesOnCompositorTooltip")),
|
||||
"The animation element does not have oncompositor tooltip content");
|
||||
ok(!hasTooltip(animationEl,
|
||||
L10N.getStr("player.somePropertiesOnCompositorTooltip")),
|
||||
"The animation element does not have oncompositor tooltip content");
|
||||
|
||||
info("Select a node we know has animation on the compositor and not on the" +
|
||||
" compositor");
|
||||
yield selectNodeAndWaitForAnimations(".compositor-notall", inspector);
|
||||
|
||||
animationEl = timeline.animationsEl.querySelector(".animation");
|
||||
ok(animationEl.classList.contains("fast-track"),
|
||||
"The animation element has the fast-track css class");
|
||||
ok(hasTooltip(animationEl,
|
||||
L10N.getStr("player.somePropertiesOnCompositorTooltip")),
|
||||
"The animation element has the right tooltip content");
|
||||
});
|
||||
|
||||
function hasTooltip(animationEl) {
|
||||
function hasTooltip(animationEl, expected) {
|
||||
let el = animationEl.querySelector(".name");
|
||||
let tooltip = el.getAttribute("title");
|
||||
|
||||
let expected = L10N.getStr("player.runningOnCompositorTooltip");
|
||||
return tooltip.indexOf(expected) !== -1;
|
||||
}
|
||||
|
@ -82,6 +82,10 @@
|
||||
animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
|
||||
}
|
||||
|
||||
.compositor-notall {
|
||||
animation: compositor-notall 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes simple-animation {
|
||||
100% {
|
||||
transform: translateX(300px);
|
||||
@ -99,6 +103,19 @@
|
||||
margin-right: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes compositor-notall {
|
||||
from {
|
||||
opacity: 0;
|
||||
width: 0px;
|
||||
transform: translate(0px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
width: 100px;
|
||||
transform: translate(100px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -113,6 +130,7 @@
|
||||
<div class="ball negative-delay"></div>
|
||||
<div class="ball no-compositor"></div>
|
||||
<div class="ball" id="endDelayed"></div>
|
||||
<div class="ball compositor-notall"></div>
|
||||
<script>
|
||||
/* globals KeyframeEffect, Animation */
|
||||
"use strict";
|
||||
|
Loading…
Reference in New Issue
Block a user