Enable a11y audit for chrome://print and fix failing tests.

chrome/test/data/webui/print_preview.js

Index: chrome/test/data/webui/print_preview.js
diff --git a/chrome/test/data/webui/print_preview.js b/chrome/test/data/webui/print_preview.js
index d5dc8dac97af6b3e95348be078f579f1c4dfed20..9a467f5fb1d9bce3ef400314aac428979a24de3b 100644
--- a/chrome/test/data/webui/print_preview.js
+++ b/chrome/test/data/webui/print_preview.js
@@ -45,6 +45,12 @@ PrintPreviewWebUITest.prototype = {
    */
   browsePrintPreload: 'print_preview_hello_world_test.html',
 
+  /** @override */
+  runAccessibilityChecks: true,
+
+  /** @override */
+  accessibilityIssuesAreErrors: true,
+
   /**
    * Stub out low-level functionality like the NativeLayer and
    * CloudPrintInterface.
@@ -139,15 +145,7 @@ GEN('#include "chrome/test/data/webui/print_preview.h"');
 
 // Test some basic assumptions about the print preview WebUI.
 TEST_F('PrintPreviewWebUITest', 'TestPrinterList', function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
+  this.setUpPreview();
 
   var recentList = $('destination-search').querySelector('.recent-list ul');
   var localList = $('destination-search').querySelector('.local-list ul');
@@ -173,15 +171,7 @@ TEST_F('PrintPreviewWebUITest', 'TestPrinterList', function() {
 // Test that the printer list is structured correctly after calling
 // addCloudPrinters with an empty list.
 TEST_F('PrintPreviewWebUITest', 'TestPrinterListCloudEmpty', function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
+  this.setUpPreview();
 
   var cloudPrintEnableEvent =
       new Event(print_preview.NativeLayer.EventType.CLOUD_PRINT_ENABLE);
@@ -299,16 +289,7 @@ TEST_F('PrintPreviewWebUITest', 'TestSectionsDisabled', function() {
   checkSectionVisible($('layout-settings'), false);
   checkSectionVisible($('color-settings'), false);
   checkSectionVisible($('copies-settings'), false);
-
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
+  this.setUpPreview();
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
@@ -375,69 +356,23 @@ TEST_F('PrintPreviewWebUITest', 'PrintToPDFSelectedCapabilities', function() {
   checkSectionVisible($('media-size-settings'), false);
 });
 
-// When the source is 'HTML', we always hide the fit to page option and show
-// media size option.
-TEST_F('PrintPreviewWebUITest', 'SourceIsHTMLCapabilities', function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
-
-  var capsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
-  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
-  this.nativeLayer_.dispatchEvent(capsSetEvent);
-
-  var moreSettingsDiv = $('more-settings');
-  var mediaSizeDiv = $('media-size-settings');
-  var otherOptionsDiv = $('other-options-settings');
-  var fitToPageEl = otherOptionsDiv.querySelector('.fit-to-page-container');
-
-  // Check that options are collapsed (section is visible, because duplex is
-  // available).
-  checkSectionVisible(otherOptionsDiv, true);
-  checkElementDisplayed(fitToPageEl, false);
-  checkSectionVisible(mediaSizeDiv, false);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
-
-  checkElementDisplayed(fitToPageEl, false);
-  checkSectionVisible(mediaSizeDiv, true);
-});
-
 // When the source is "PDF", depending on the selected destination printer, we
 // show/hide the fit to page option and hide media size selection.
 TEST_F('PrintPreviewWebUITest', 'SourceIsPDFCapabilities', function() {
   this.initialSettings_.isDocumentModifiable_ = false;
-
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
+  this.setUpPreview();
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  var otherOptionsDiv = $('other-options-settings');
-
-  checkSectionVisible(otherOptionsDiv, true);
+  var otherOptions = $('other-options-settings');
+  checkSectionVisible(otherOptions, true);
   checkElementDisplayed(
-      otherOptionsDiv.querySelector('.fit-to-page-container'), true);
+      otherOptions.querySelector('.fit-to-page-container'), true);
   expectTrue(
-      otherOptionsDiv.querySelector('.fit-to-page-checkbox').checked);
+      otherOptions.querySelector('.fit-to-page-checkbox').checked);
   checkSectionVisible($('media-size-settings'), true);
 });
 
@@ -445,16 +380,7 @@ TEST_F('PrintPreviewWebUITest', 'SourceIsPDFCapabilities', function() {
 // to page option but the state is unchecked by default.
 TEST_F('PrintPreviewWebUITest', 'PrintScalingDisabledForPlugin', function() {
   this.initialSettings_.isDocumentModifiable_ = false;
-
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
+  this.setUpPreview();
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
@@ -465,27 +391,17 @@ TEST_F('PrintPreviewWebUITest', 'PrintScalingDisabledForPlugin', function() {
   cr.dispatchSimpleEvent(
       this.nativeLayer_, print_preview.NativeLayer.EventType.DISABLE_SCALING);
 
-  var otherOptionsDiv = $('other-options-settings');
-
-  checkSectionVisible(otherOptionsDiv, true);
-
+  var otherOptions = $('other-options-settings');
+  checkSectionVisible(otherOptions, true);
   checkElementDisplayed(
-      otherOptionsDiv.querySelector('.fit-to-page-container'), true);
+      otherOptions.querySelector('.fit-to-page-container'), true);
   expectFalse(
-      otherOptionsDiv.querySelector('.fit-to-page-checkbox').checked);
+      otherOptions.querySelector('.fit-to-page-checkbox').checked);
 });
 
 // Make sure that custom margins controls are properly set up.
 TEST_F('PrintPreviewWebUITest', 'CustomMarginsControlsCheck', function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
+  this.setUpPreview();
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
@@ -504,173 +420,6 @@ TEST_F('PrintPreviewWebUITest', 'CustomMarginsControlsCheck', function() {
   });
 });
 
-// Page layout has zero margins. Hide header and footer option.
-TEST_F('PrintPreviewWebUITest', 'PageLayoutHasNoMarginsHideHeaderFooter',
-    function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
-
-  var capsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
-  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
-  this.nativeLayer_.dispatchEvent(capsSetEvent);
-
-  var moreSettingsDiv = $('more-settings');
-  var otherOptionsDiv = $('other-options-settings');
-  var headerFooterEl =
-      otherOptionsDiv.querySelector('.header-footer-container');
-
-  // Check that options are collapsed (section is visible, because duplex is
-  // available).
-  checkSectionVisible(otherOptionsDiv, true);
-  checkElementDisplayed(headerFooterEl, false);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
-
-  checkElementDisplayed(headerFooterEl, true);
-
-  printPreview.printTicketStore_.marginsType.updateValue(
-      print_preview.ticket_items.MarginsType.Value.CUSTOM);
-  printPreview.printTicketStore_.customMargins.updateValue(
-      new print_preview.Margins(0, 0, 0, 0));
-
-  checkElementDisplayed(headerFooterEl, false);
-});
-
-// Page layout has half-inch margins. Show header and footer option.
-TEST_F('PrintPreviewWebUITest', 'PageLayoutHasMarginsShowHeaderFooter',
-    function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
-
-  var capsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
-  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
-  this.nativeLayer_.dispatchEvent(capsSetEvent);
-
-  var moreSettingsDiv = $('more-settings');
-  var otherOptionsDiv = $('other-options-settings');
-  var headerFooterEl =
-      otherOptionsDiv.querySelector('.header-footer-container');
-
-  // Check that options are collapsed (section is visible, because duplex is
-  // available).
-  checkSectionVisible(otherOptionsDiv, true);
-  checkElementDisplayed(headerFooterEl, false);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
-
-  checkElementDisplayed(headerFooterEl, true);
-
-  printPreview.printTicketStore_.marginsType.updateValue(
-      print_preview.ticket_items.MarginsType.Value.CUSTOM);
-  printPreview.printTicketStore_.customMargins.updateValue(
-      new print_preview.Margins(36, 36, 36, 36));
-
-  checkElementDisplayed(headerFooterEl, true);
-});
-
-// Page layout has zero top and bottom margins. Hide header and footer option.
-TEST_F('PrintPreviewWebUITest',
-       'ZeroTopAndBottomMarginsHideHeaderFooter',
-       function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
-
-  var capsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
-  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
-  this.nativeLayer_.dispatchEvent(capsSetEvent);
-
-  var moreSettingsDiv = $('more-settings');
-  var otherOptionsDiv = $('other-options-settings');
-  var headerFooterEl =
-      otherOptionsDiv.querySelector('.header-footer-container');
-
-  // Check that options are collapsed (section is visible, because duplex is
-  // available).
-  checkSectionVisible(otherOptionsDiv, true);
-  checkElementDisplayed(headerFooterEl, false);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
-
-  checkElementDisplayed(headerFooterEl, true);
-
-  printPreview.printTicketStore_.marginsType.updateValue(
-      print_preview.ticket_items.MarginsType.Value.CUSTOM);
-  printPreview.printTicketStore_.customMargins.updateValue(
-      new print_preview.Margins(0, 36, 0, 36));
-
-  checkElementDisplayed(headerFooterEl, false);
-});
-
-// Page layout has zero top and half-inch bottom margin. Show header and footer
-// option.
-TEST_F('PrintPreviewWebUITest',
-       'ZeroTopAndNonZeroBottomMarginShowHeaderFooter',
-       function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
-
-  var capsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
-  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
-  this.nativeLayer_.dispatchEvent(capsSetEvent);
-
-  var moreSettingsDiv = $('more-settings');
-  var otherOptionsDiv = $('other-options-settings');
-  var headerFooterEl =
-      otherOptionsDiv.querySelector('.header-footer-container');
-
-  // Check that options are collapsed (section is visible, because duplex is
-  // available).
-  checkSectionVisible(otherOptionsDiv, true);
-  checkElementDisplayed(headerFooterEl, false);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
-
-  checkElementDisplayed(headerFooterEl, true);
-
-  printPreview.printTicketStore_.marginsType.updateValue(
-      print_preview.ticket_items.MarginsType.Value.CUSTOM);
-  printPreview.printTicketStore_.customMargins.updateValue(
-      new print_preview.Margins(0, 36, 36, 36));
-
-  checkElementDisplayed(headerFooterEl, true);
-});
-
 // Test that the color settings, one option, standard monochrome.
 TEST_F('PrintPreviewWebUITest', 'TestColorSettingsMonochrome', function() {
   this.setUpPreview();
@@ -811,75 +560,22 @@ TEST_F('PrintPreviewWebUITest',
 // Test to verify that duplex settings are set according to the printer
 // capabilities.
 TEST_F('PrintPreviewWebUITest', 'TestDuplexSettingsTrue', function() {
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
-
-  var otherOptionsDiv = $('other-options-settings');
-  var duplexDiv = otherOptionsDiv.querySelector('.duplex-container');
-  var duplexCheckbox = otherOptionsDiv.querySelector('.duplex-checkbox');
+  this.setUpPreview();
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  checkSectionVisible(otherOptionsDiv, true);
-  expectFalse(duplexDiv.hidden);
-  expectFalse(duplexCheckbox.checked);
-});
-
-// Test to verify that duplex settings are set according to the printer
-// capabilities.
-TEST_F('PrintPreviewWebUITest', 'TestDuplexSettingsFalse', function() {
-  var initialSettingsSetEvent =
-     new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-     new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
-
-  var moreSettingsDiv = $('more-settings');
-  var otherOptionsDiv = $('other-options-settings');
-  var duplexDiv = otherOptionsDiv.querySelector('.duplex-container');
-
-  var capsSetEvent =
-     new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
-  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
-  delete capsSetEvent.settingsInfo.capabilities.printer.duplex;
-  this.nativeLayer_.dispatchEvent(capsSetEvent);
-
-  // Check that it is collapsed.
-  checkSectionVisible(otherOptionsDiv, false);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
-  // Now it should be visible.
-  checkSectionVisible(otherOptionsDiv, true);
-  expectTrue(duplexDiv.hidden);
+  var otherOptions = $('other-options-settings');
+  checkSectionVisible(otherOptions, true);
+  expectFalse(otherOptions.querySelector('.duplex-container').hidden);
+  expectFalse(otherOptions.querySelector('.duplex-checkbox').checked);
 });
 
 // Test that changing the selected printer updates the preview.
 TEST_F('PrintPreviewWebUITest', 'TestPrinterChangeUpdatesPreview', function() {
-
-  var initialSettingsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.INITIAL_SETTINGS_SET);
-  initialSettingsSetEvent.initialSettings = this.initialSettings_;
-  this.nativeLayer_.dispatchEvent(initialSettingsSetEvent);
-
-  var localDestsSetEvent =
-      new Event(print_preview.NativeLayer.EventType.LOCAL_DESTINATIONS_SET);
-  localDestsSetEvent.destinationInfos = this.localDestinationInfos_;
-  this.nativeLayer_.dispatchEvent(localDestsSetEvent);
+  this.setUpPreview();
 
   var capsSetEvent =
       new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
@@ -932,3 +628,239 @@ TEST_F('PrintPreviewWebUITest', 'TestNoPDFPluginErrorMessage', function() {
       previewAreaEl.getElementsByClassName('preview-area-custom-message')[0];
   expectEquals(false, customMessageEl.hidden);
 });

[hcarmona, 2014/10/29 22:24:46]

Re-ordered the tests to match their original order since the secondary class no
longer exists. This will make it easier to track changes before this CL.

+
+/**
+ * Async test fixture for print preview WebUI testing.
+ * @constructor
+ * @extends {PrintPreviewWebUITest}
+ */
+function PrintPreviewWebUIAsyncTest() {
+}
+
+PrintPreviewWebUIAsyncTest.prototype = {
+  __proto__: PrintPreviewWebUITest.prototype,
+
+  /** @override */
+  isAsync: true,
+
+  /** @override */
+  typedefCppFixture: 'PrintPreviewWebUITest',
+
+  /**
+   * @this {PrintPreviewWebUIAsyncTest}
+   * @override
+   */
+  setUp: function() {
+    // Setup everything from the base class.
+    PrintPreviewWebUITest.prototype.setUp.call(this);
+
+    // Do this here because all tests need it.
+    this.setUpPreview();
+
+    // Make all transitions and animations take 0ms for testing purposes.
+    // Animations still happen and we will wait for the webkitAnimationEnd event
+    // for the "more-settings" element because it is responsible for hiding a
+    // lot of buttons.
+    var noAnimationStyle = document.createElement('style');
+    noAnimationStyle.textContent =
+      '* {' +
+      '  -webkit-transition-duration: 0s !important;' +
+      '  -webkit-transition-delay: 0s !important;' +
+      '  -webkit-animation-duration: 0s !important;' +
+      '  -webkit-animation-delay: 0s !important;' +
+      '}';
+    document.querySelector('head').appendChild(noAnimationStyle);
+  },
+
+  /**
+   * Even though animation duration and delay is set to zero, it is necessary to
+   * wait until the animation has finished.
+   */
+  waitForAnimationsToEnd: function() {
+    // add a listener for the transition end event
+    document.addEventListener('webkitAnimationEnd', function(e) {
+      if (e.target.id == 'more-settings')
+        testDone();
+    });
+  },
+
+  /**
+   * Expand the 'More Settings' div to expose all options.
+   */
+  expandMoreSettings: function() {
+    var moreSettings = $('more-settings');
+    checkSectionVisible(moreSettings, true);
+    moreSettings.click();
+  }
+};
+
+// When the source is 'HTML', we always hide the fit to page option and show
+// media size option.
+TEST_F('PrintPreviewWebUIAsyncTest', 'SourceIsHTMLCapabilities', function() {
+  var capsSetEvent =
+      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
+  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
+  this.nativeLayer_.dispatchEvent(capsSetEvent);
+
+  var otherOptions = $('other-options-settings');
+  var fitToPage = otherOptions.querySelector('.fit-to-page-container');
+  var mediaSize = $('media-size-settings');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptions, true);
+  checkElementDisplayed(fitToPage, false);
+  checkSectionVisible(mediaSize, false);
+
+  this.expandMoreSettings();
+
+  checkElementDisplayed(fitToPage, false);
+  checkSectionVisible(mediaSize, true);
+
+  this.waitForAnimationsToEnd();
+});
+
+// Page layout has zero margins. Hide header and footer option.
+TEST_F('PrintPreviewWebUIAsyncTest', 'PageLayoutHasNoMarginsHideHeaderFooter',
+    function() {
+  var capsSetEvent =
+      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
+  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
+  this.nativeLayer_.dispatchEvent(capsSetEvent);
+
+  var otherOptions = $('other-options-settings');
+  var headerFooter = otherOptions.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptions, true);
+  checkElementDisplayed(headerFooter, false);
+
+  this.expandMoreSettings();
+
+  checkElementDisplayed(headerFooter, true);
+
+  printPreview.printTicketStore_.marginsType.updateValue(
+      print_preview.ticket_items.MarginsType.Value.CUSTOM);
+  printPreview.printTicketStore_.customMargins.updateValue(
+      new print_preview.Margins(0, 0, 0, 0));
+
+  checkElementDisplayed(headerFooter, false);
+
+  this.waitForAnimationsToEnd();
+});
+
+// Page layout has half-inch margins. Show header and footer option.
+TEST_F('PrintPreviewWebUIAsyncTest', 'PageLayoutHasMarginsShowHeaderFooter',
+    function() {
+  var capsSetEvent =
+      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
+  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
+  this.nativeLayer_.dispatchEvent(capsSetEvent);
+
+  var otherOptions = $('other-options-settings');
+  var headerFooter = otherOptions.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptions, true);
+  checkElementDisplayed(headerFooter, false);
+
+  this.expandMoreSettings();
+
+  checkElementDisplayed(headerFooter, true);
+
+  printPreview.printTicketStore_.marginsType.updateValue(
+      print_preview.ticket_items.MarginsType.Value.CUSTOM);
+  printPreview.printTicketStore_.customMargins.updateValue(
+      new print_preview.Margins(36, 36, 36, 36));
+
+  checkElementDisplayed(headerFooter, true);
+
+  this.waitForAnimationsToEnd();
+});
+
+// Page layout has zero top and bottom margins. Hide header and footer option.
+TEST_F('PrintPreviewWebUIAsyncTest',
+       'ZeroTopAndBottomMarginsHideHeaderFooter',
+       function() {
+  var capsSetEvent =
+      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
+  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
+  this.nativeLayer_.dispatchEvent(capsSetEvent);
+
+  var otherOptions = $('other-options-settings');
+  var headerFooter = otherOptions.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptions, true);
+  checkElementDisplayed(headerFooter, false);
+
+  this.expandMoreSettings();
+
+  checkElementDisplayed(headerFooter, true);
+
+  printPreview.printTicketStore_.marginsType.updateValue(
+      print_preview.ticket_items.MarginsType.Value.CUSTOM);
+  printPreview.printTicketStore_.customMargins.updateValue(
+      new print_preview.Margins(0, 36, 0, 36));
+
+  checkElementDisplayed(headerFooter, false);
+
+  this.waitForAnimationsToEnd();
+});
+
+// Page layout has zero top and half-inch bottom margin. Show header and footer
+// option.
+TEST_F('PrintPreviewWebUIAsyncTest',
+       'ZeroTopAndNonZeroBottomMarginShowHeaderFooter',
+       function() {
+  var capsSetEvent =
+      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
+  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
+  this.nativeLayer_.dispatchEvent(capsSetEvent);
+
+  var otherOptions = $('other-options-settings');
+  var headerFooter = otherOptions.querySelector('.header-footer-container');
+
+  // Check that options are collapsed (section is visible, because duplex is
+  // available).
+  checkSectionVisible(otherOptions, true);
+  checkElementDisplayed(headerFooter, false);
+
+  this.expandMoreSettings();
+
+  checkElementDisplayed(headerFooter, true);
+
+  printPreview.printTicketStore_.marginsType.updateValue(
+      print_preview.ticket_items.MarginsType.Value.CUSTOM);
+  printPreview.printTicketStore_.customMargins.updateValue(
+      new print_preview.Margins(0, 36, 36, 36));
+
+  checkElementDisplayed(headerFooter, true);
+
+  this.waitForAnimationsToEnd();
+});
+
+// Test to verify that duplex settings are set according to the printer
+// capabilities.
+TEST_F('PrintPreviewWebUIAsyncTest', 'TestDuplexSettingsFalse', function() {
+  var capsSetEvent =
+      new Event(print_preview.NativeLayer.EventType.CAPABILITIES_SET);
+  capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
+  delete capsSetEvent.settingsInfo.capabilities.printer.duplex;
+  this.nativeLayer_.dispatchEvent(capsSetEvent);
+
+  // Check that it is collapsed.
+  var otherOptions = $('other-options-settings');
+  checkSectionVisible(otherOptions, false);
+
+  this.expandMoreSettings();
+
+  // Now it should be visible.
+  checkSectionVisible(otherOptions, true);
+  expectTrue(otherOptions.querySelector('.duplex-container').hidden);
+
+  this.waitForAnimationsToEnd();
+});