Bug 1254408 - Part2 Modifing tests for animation property warnings r=pbro
[mq]: Expose_animation_performance_information_in_DevTools_test
MozReview-Commit-ID: GVTiHhHbKlN
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@@ -1,14 +1,18 @@
/* 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";
+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.
const EXPECTED_PROPERTIES = [
"background-color",
"background-position",
"background-size",
"border-bottom-left-radius",
@@ -36,16 +40,19 @@ add_task(function* () {
ok(isNodeVisible(propertiesList),
"The list of properties panel is shown");
ok(propertiesList.querySelectorAll(".property").length,
"The list of properties panel actually contains properties");
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);
ok(!isNodeVisible(propertiesList),
"The list of properties panel is hidden again");
});
function hasExpectedProperties(containerEl) {
@@ -60,8 +67,19 @@ function hasExpectedProperties(container
for (let i = 0; i < names.length; i++) {
if (names[i] !== EXPECTED_PROPERTIES[i]) {
return false;
}
}
return true;
}
+
+function hasExpectedWarnings(containerEl) {
+ let warnings = [...containerEl.querySelectorAll(".warning")];
+ for (let warning of warnings) {
+ if (warning.getAttribute("title") ==
+ L10N.getStr("AnimationWarningTransformWithGeometricProperties")) {
+ return false;
+ }
+ }
+ return true;
+}
--- a/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
+++ b/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
@@ -20,28 +20,43 @@ add_task(function* () {
let timeline = panel.animationsTimelineComponent;
info("Select a test node we know has an animation running on the compositor");
yield selectNodeAndWaitForAnimations(".animated", inspector);
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");
yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
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;
}
--- a/devtools/client/animationinspector/test/doc_simple_animation.html
+++ b/devtools/client/animationinspector/test/doc_simple_animation.html
@@ -77,16 +77,20 @@
.no-compositor {
top: 0;
right: 10px;
background: gold;
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);
}
}
@keyframes other-animation {
100% {
@@ -94,30 +98,44 @@
}
}
@keyframes no-compositor {
100% {
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>
<!-- Comment node -->
<div class="ball still"></div>
<div class="ball animated"></div>
<div class="ball multi"></div>
<div class="ball delayed"></div>
<div class="ball multi-finite"></div>
<div class="ball short"></div>
<div class="ball long"></div>
<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";
var el = document.getElementById("endDelayed");
let effect = new KeyframeEffect(el, [
{ opacity: 0, offset: 0 },
{ opacity: 1, offset: 1 }