Bug 1416106 - Part 4: Add test for property name component. r=gl
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Wed, 14 Feb 2018 23:18:12 +0900
changeset 403998 3801cbab320d71ab651a7299b1d198559f31716d
parent 403997 8e8ce20893411b98c784b3b33a64aa7b6f25acb1
child 403999 3f449e2f4ef19d2021331354eff65f86e723a3ee
push id99924
push userebalazs@mozilla.com
push dateThu, 15 Feb 2018 20:43:51 +0000
treeherdermozilla-inbound@a7d2a49f46fb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1416106
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1416106 - Part 4: Add test for property name component. r=gl MozReview-Commit-ID: En70sbOhcsr
devtools/client/inspector/animation/test/browser.ini
devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -7,16 +7,17 @@ support-files =
   head.js
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/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-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_empty_on_invalid_nodes.js]
 [browser_animation_inspector_exists.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the following animated property name component features:
+// * name of property
+// * display compositor sign when the property was running on compositor.
+// * display warning when the property is runnable on compositor but was not.
+
+const TEST_DATA = [
+  {
+    property: "opacity",
+    isOnCompositor: true,
+  },
+  {
+    property: "transform",
+    isWarning: true,
+  },
+  {
+    property: "width",
+  },
+];
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_simple_animation.html");
+  const { inspector, panel } = await openAnimationInspector();
+
+  info("Checking animated property name component");
+  await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
+
+  const animatedPropertyNameEls = panel.querySelectorAll(".animated-property-name");
+  is(animatedPropertyNameEls.length, TEST_DATA.length,
+    `Number of animated property name elements should be ${ TEST_DATA.length }`);
+
+  for (const [index, animatedPropertyNameEl] of animatedPropertyNameEls.entries()) {
+    const testData = TEST_DATA[index];
+
+    info(`Checking text content for ${ testData.property }`);
+
+    const spanEl = animatedPropertyNameEl.querySelector("span");
+    ok(spanEl,
+      `<span> element should be in animated-property-name of ${ testData.property }`);
+    is(spanEl.textContent, testData.property,
+      `textContent should be ${ testData.property }`);
+
+    info(`Checking compositor sign for ${ testData.property }`);
+
+    if (testData.isOnCompositor) {
+      ok(animatedPropertyNameEl.classList.contains("compositor"),
+        "animatedPropertyNameEl should has .compositor class");
+      isnot(getComputedStyle(spanEl, "::before").width, "auto",
+        "width of ::before pseud should not be auto");
+    } else {
+      ok(!animatedPropertyNameEl.classList.contains("compositor"),
+        "animatedPropertyNameEl should not have .compositor class");
+      is(getComputedStyle(spanEl, "::before").width, "auto",
+        "width of ::before pseud should be auto");
+    }
+
+    info(`Checking warning for ${ testData.property }`);
+
+    if (testData.isWarning) {
+      ok(animatedPropertyNameEl.classList.contains("warning"),
+        "animatedPropertyNameEl should has .warning class");
+      is(getComputedStyle(spanEl).textDecorationStyle, "dotted",
+        "text-decoration-style of spanEl should be 'dotted'");
+      is(getComputedStyle(spanEl).textDecorationLine, "underline",
+        "text-decoration-line of spanEl should be 'underline'");
+    } else {
+      ok(!animatedPropertyNameEl.classList.contains("warning"),
+        "animatedPropertyNameEl should not have .warning class");
+      is(getComputedStyle(spanEl).textDecorationStyle, "solid",
+        "text-decoration-style of spanEl should be 'solid'");
+      is(getComputedStyle(spanEl).textDecorationLine, "none",
+        "text-decoration-line of spanEl should be 'none'");
+    }
+  }
+});