Move settings-section animations into setting-section, make better

chrome/test/data/webui/settings/open_section_transition_browsertest.js

Index: chrome/test/data/webui/settings/open_section_transition_browsertest.js
diff --git a/chrome/test/data/webui/settings/open_section_transition_browsertest.js b/chrome/test/data/webui/settings/open_section_transition_browsertest.js
new file mode 100644
index 0000000000000000000000000000000000000000..b7314f4c9cc72dbbee7856a33eb98e1f5a656cd9
--- /dev/null
+++ b/chrome/test/data/webui/settings/open_section_transition_browsertest.js
@@ -0,0 +1,102 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Tests for settings.OpenSectionTransition and
+ * settings.CloseSectionTransition.
+ */
+
+/** @const {string} Path to root from chrome/test/data/webui/settings/. */
+var ROOT_PATH = '../../../../../';
+
+// Polymer BrowserTest fixture.
+GEN_INCLUDE(
+    [ROOT_PATH + 'chrome/test/data/webui/polymer_browser_test_base.js']);
+
+/**
+ * @constructor
+ * @extends PolymerTest
+*/
+function SettingsOpenSectionTransitionBrowserTest() {}
+
+SettingsOpenSectionTransitionBrowserTest.prototype = {
+  __proto__: PolymerTest.prototype,
+
+  /** @override */
+  browsePreload:
+      'chrome://md-settings/settings_page/open_section_transition.html',
+
+  /** @override */
+  extraLibraries: PolymerTest.getLibraries(ROOT_PATH),
+
+  /** @override */
+  isAsync: true,
+
+  /** @override */
+  runAccessibilityChecks: false,
+};
+
+TEST_F('SettingsOpenSectionTransitionBrowserTest', 'OpenSectionTransition',
+    function() {
+  suite('settings.animation.OpenSectionTransition', function() {
+    var container;
+    var section;
+    var card;
+
+    suiteSetup(function() {
+      return PolymerTest.importHtml('/settings_page/settings_section.html');
+    });
+
+    setup(function() {
+      container = document.createElement('div');
+      container.style.height = '1000px';
+      container.style.height = '800px';
+      section = document.createElement('settings-section');
+      section.style.height = '300px';
+      card = section.$.card;
+      container.appendChild(section);
+      document.body.appendChild(container);
+
+      // Simulate content and setup.
+      card.style.top = '10px';
+      card.style.height = '200px';
+      card.origHeight_ = card.clientHeight;
+    });
+
+    teardown(function() {
+      container.remove();
+    });
+
+    test('transition finishes', function() {
+      settings.animation.Timing.DURATION = 200;
+      var openTransition =
+          new settings.OpenSectionTransition(section, container);
+      var startTime = performance.now();
+      var finished = openTransition.play();
+      expectEquals('fixed', getComputedStyle(card).position);
+      return finished.then(function() {
+        // Ensure the animation actually played over a length of time.
+        // TODO(michaelpg): Verify this is not flaky.
+        var totalTime = performance.now() - startTime;
+        expectLE(settings.animation.Timing.DURATION, totalTime);
+        expectEquals('', card.style.position);
+
+        var closeTransition =
+            new settings.CloseSectionTransition(section, container);
+        closeTransition.setUp();
+        startTime = performance.now();
+        finished = closeTransition.play();
+        return finished.then(function() {
+          totalTime = performance.now() - startTime;
+          expectLE(settings.animation.Timing.DURATION, totalTime);
+          expectEquals('static', getComputedStyle(card).position);
+        });
+      });
+    });
+    // TODO(michaelpg): More tests.
+  });
+
+  // Run all registered tests.
+  mocha.run();
+});