Bug 1438072 - Part 3: Add test. r?pbro
MozReview-Commit-ID: HHlBQkKr59U
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -11,16 +11,17 @@ support-files =
!/devtools/client/inspector/test/head.js
!/devtools/client/inspector/test/shared-head.js
!/devtools/client/shared/test/frame-script-utils.js
!/devtools/client/shared/test/shared-head.js
!/devtools/client/shared/test/test-actor-registry.js
!/devtools/client/shared/test/test-actor.js
[browser_animation_animated-property-list.js]
+[browser_animation_animated-property-list_unchanged-items.js]
[browser_animation_animated-property-name.js]
[browser_animation_animation-detail_close-button.js]
[browser_animation_animation-detail_title.js]
[browser_animation_animation-detail_visibility.js]
[browser_animation_animation-list.js]
[browser_animation_animation-target.js]
[browser_animation_animation-timeline-tick.js]
[browser_animation_current-time-label.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the position and the class of unchanged animated property items.
+
+const TEST_DATA = [
+ { property: "background-color", isUnchanged: false },
+ { property: "padding-left", isUnchanged: false },
+ { property: "background-attachment", isUnchanged: true },
+ { property: "background-clip", isUnchanged: true },
+ { property: "background-image", isUnchanged: true },
+ { property: "background-origin", isUnchanged: true },
+ { property: "background-position-x", isUnchanged: true },
+ { property: "background-position-y", isUnchanged: true },
+ { property: "background-repeat", isUnchanged: true },
+ { property: "background-size", isUnchanged: true },
+ { property: "padding-bottom", isUnchanged: true },
+ { property: "padding-right", isUnchanged: true },
+ { property: "padding-top", isUnchanged: true },
+];
+
+add_task(async function() {
+ await addTab(URL_ROOT + "doc_simple_animation.html");
+ const { inspector, panel } = await openAnimationInspector();
+
+ info("Checking unchanged animated property item");
+ await selectNodeAndWaitForAnimations(".longhand", inspector);
+ const itemEls = panel.querySelectorAll(".animated-property-item");
+ is(itemEls.length, TEST_DATA.length,
+ `Count of animated property item should be ${ TEST_DATA.length }`);
+
+ for (let i = 0; i < TEST_DATA.length; i++) {
+ const { property, isUnchanged } = TEST_DATA[i];
+ const itemEl = itemEls[i];
+
+ ok(itemEl.querySelector(`.keyframes-graph.${ property }`),
+ `Item of ${ property } should display at here`);
+
+ if (isUnchanged) {
+ ok(itemEl.classList.contains("unchanged"),
+ "Animated property item should have 'unchanged' class");
+ } else {
+ ok(!itemEl.classList.contains("unchanged"),
+ "Animated property item should not have 'unchanged' class");
+ }
+ }
+});
--- a/devtools/client/inspector/animation/test/doc_simple_animation.html
+++ b/devtools/client/inspector/animation/test/doc_simple_animation.html
@@ -87,16 +87,20 @@
.compositor-all {
animation: compositor-all 2s infinite;
}
.compositor-notall {
animation: compositor-notall 2s infinite;
}
+ .longhand {
+ animation: longhand 10s infinite;
+ }
+
@keyframes simple-animation {
100% {
transform: translateX(300px);
}
}
@keyframes other-animation {
100% {
@@ -121,32 +125,44 @@
transform: translate(0px);
}
to {
opacity: 1;
width: 100px;
transform: translate(100px);
}
}
+
+ @keyframes longhand {
+ from {
+ background: red;
+ padding: 0 0 0 10px;
+ }
+ to {
+ background: lime;
+ padding: 0 0 0 20px;
+ }
+ }
</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-all"></div>
<div class="ball compositor-notall"></div>
+ <div class="ball longhand"></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 }