fix(tabs): md-center-tabs causes tabs to not render (#11567)

only apply the width = 999999px work around when pagination is enabled
only one of center tabs or pagination can be activate at a time

Fixes #11566. Relates to #11432.

docs/app/partials/layout-children.tmpl.html

@@ -137,7 +137,7 @@ <h3>Children within a Layout Container</h3>
     <demo-file name="index.html">
       <div layout="column" layout-gt-sm="row">
         <!-- In order to work within a layout-gt-sm, the flex directive needs to match.
-             flex-gt-sm="33" will work when layout-gt-sm="row" is active", but flex="33" would
+             flex-gt-sm="33" will work when layout-gt-sm="row" is active, but flex="33" would
               only apply when layout="column" is active. -->
         <div flex-gt-sm="33">
           column layout on mobile, <br/>flex 33% on gt-sm devices.

src/components/tabs/demoCenterTabs/index.html

@@ -0,0 +1,39 @@
+<div ng-cloak>
+  <md-content>
+    <md-tabs class="md-primary" md-center-tabs>
+      <md-tab label="one">
+        <md-content class="md-padding">
+          <h2 class="md-display-1">Tab One</h2>
+          <p class="md-body-1">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+            Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In
+            sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+            feugiat ultricies mi.
+          </p>
+        </md-content>
+      </md-tab>
+      <md-tab label="two">
+        <md-content class="md-padding">
+          <h2 class="md-display-1">Tab Two</h2>
+          <p class="md-body-1">
+            Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa
+            orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in
+            condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim,
+            at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus.
+          </p>
+        </md-content>
+      </md-tab>
+      <md-tab label="three">
+        <md-content class="md-padding">
+          <h2 class="md-display-1">Tab Three</h2>
+          <p class="md-body-1">
+            Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur
+            posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse
+            vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci
+            commodo volutpat non ac est.
+          </p>
+        </md-content>
+      </md-tab>
+    </md-tabs>
+  </md-content>
+</div>

src/components/tabs/demoCenterTabs/script.js

@@ -0,0 +1,4 @@
+(function () {
+  'use strict';
+  angular.module('tabsDemoCenterTabs', ['ngMaterial']);
+})();

src/components/tabs/demoCenterTabs/style.scss

@@ -0,0 +1,12 @@
+/*
+ * Style tab width to align with the MD spec:
+ * https://material.io/archive/guidelines/components/tabs.html#tabs-specs
+ */
+md-tab-item {
+  min-width: 72px;
+}
+@media (min-width: 960px) {
+  md-tab-item {
+    min-width: 160px;
+  }
+}

src/components/tabs/demoDynamicHeight/index.html

@@ -4,21 +4,48 @@
       <md-tab label="one">
         <md-content class="md-padding">
           <h1 class="md-display-2">Tab One</h1>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+            Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In
+            sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+            feugiat ultricies mi.</p>
         </md-content>
       </md-tab>
       <md-tab label="two">
         <md-content class="md-padding">
           <h1 class="md-display-2">Tab Two</h1>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p>
-          <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
-          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+            Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In
+            sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+            feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+            orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante
+            varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam
+            malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae
+            posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis,
+            vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec
+            ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor
+            purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris
+            semper.</p>
+          <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa
+            orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum
+            facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam
+            pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet
+            nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam
+            vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p>
+          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur
+            posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae
+            hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo
+            volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo
+            lectus.</p>
         </md-content>
       </md-tab>
       <md-tab label="three">
         <md-content class="md-padding">
           <h1 class="md-display-2">Tab Three</h1>
-          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
+          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur
+            posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae
+            hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo
+            volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo
+            lectus.</p>
         </md-content>
       </md-tab>
     </md-tabs>

src/components/tabs/demoDynamicTabs/index.html

@@ -1,4 +1,4 @@
-<div ng-controller="AppCtrl" class="sample" layout="column" ng-cloak>
+<div ng-controller="AppCtrl" layout="column" ng-cloak>
   <md-content class="md-padding">
     <md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect md-swipe-content>
       <md-tab ng-repeat="tab in tabs"

src/components/tabs/demoDynamicTabs/script.js

@@ -35,7 +35,7 @@
     $scope.$watch('selectedIndex', function(current, old) {
       previous = selected;
       selected = tabs[current];
-      if (old + 1 && (old != current)) {
+      if (old + 1 && (old !== current)) {
         $log.debug('Goodbye ' + previous.title + '!');
       }
       if (current + 1) {

src/components/tabs/js/tabsController.js

@@ -219,15 +219,15 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
 
   /**
    * Add/remove the `md-no-tab-content` class depending on `ctrl.hasContent`
-   * @param hasContent
+   * @param {boolean} hasContent
    */
   function handleHasContent (hasContent) {
     $element[ hasContent ? 'removeClass' : 'addClass' ]('md-no-tab-content');
   }
 
   /**
    * Apply ctrl.offsetLeft to the paging element when it changes
-   * @param left
+   * @param {string|number} left
    */
   function handleOffsetChange (left) {
     var elements = getElements();
@@ -242,8 +242,8 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
 
   /**
    * Update the UI whenever `ctrl.focusIndex` is updated
-   * @param newIndex
-   * @param oldIndex
+   * @param {number} newIndex
+   * @param {number} oldIndex
    */
   function handleFocusIndexChange (newIndex, oldIndex) {
     if (newIndex === oldIndex) return;
@@ -552,25 +552,33 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
 
   /**
    * Determines if the tabs should appear centered.
-   * @returns {string|boolean}
+   * @returns {boolean}
    */
   function shouldCenterTabs () {
     return ctrl.centerTabs && !ctrl.shouldPaginate;
   }
 
   /**
    * Determines if pagination is necessary to display the tabs within the available space.
-   * @returns {boolean}
+   * @returns {boolean} true if pagination is necessary, false otherwise
    */
   function shouldPaginate () {
+    var shouldPaginate;
     if (ctrl.noPagination || !loaded) return false;
     var canvasWidth = $element.prop('clientWidth');
 
     angular.forEach(getElements().tabs, function (tab) {
       canvasWidth -= tab.offsetWidth;
     });
 
-    return canvasWidth < 0;
+    shouldPaginate = canvasWidth < 0;
+    // Work around width calculation issues on IE11 when pagination is enabled
+    if (shouldPaginate) {
+      getElements().paging.style.width = '999999px';
+    } else {
+      getElements().paging.style.width = undefined;
+    }
+    return shouldPaginate;
   }
 
   /**

src/components/tabs/js/tabsDirective.js

@@ -76,7 +76,7 @@
  *  contents of the selected tab.
  * @param {boolean=} md-border-bottom If present, shows a solid `1px` border between the tabs and
  *  their content.
- * @param {boolean=} md-center-tabs When enabled, tabs will be centered provided there is no need
+ * @param {boolean=} md-center-tabs If defined, tabs will be centered provided there is no need
  *  for pagination.
  * @param {boolean=} md-no-pagination When enabled, pagination will remain off.
  * @param {boolean=} md-swipe-content When enabled, swipe gestures will be enabled for the content

src/components/tabs/tabs.scss

@@ -166,7 +166,6 @@ md-pagination-wrapper {
   display: flex;
   transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
   position: absolute;
-  width: 999999px;
   @include rtl-prop(left, right, 0, auto);
   transform: translate(0, 0);
   &.md-center-tabs {