fix IE10+11 bugs, mark tests for unsupported range

Author: Narretz

src/ng/directive/input.js

@@ -1530,6 +1530,11 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
 
     // TODO(matsko): implement validateLater to reduce number of validations
     if (minAttrType === 'min') {
+      var elVal = element.val();
+      // IE11 doesn't set the el val correctly if the maxVal is less than the element value
+      if (minVal > elVal) {
+        element.val(minVal);
+      }
       ctrl.$setViewValue(element.val());
     } else {
       ctrl.$validate();
@@ -1540,7 +1545,7 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   if (minAttrType) {
     ctrl.$validators.min = isDefined(attr.min) && supportsRange && isDefined(validity.rangeUnderflow) ?
       function nativeMinValidator(value) {
-        return !element[0].validity.rangeOverflow;
+        return !element[0].validity.rangeUnderflow;
       } :
       function minValidator(modelValue, viewValue) {
         return ctrl.$isEmpty(viewValue) || isUndefined(minVal) || viewValue >= minVal;
@@ -1563,24 +1568,28 @@ function rangeInputType(scope, element, attr, ctrl, $sniffer, $browser) {
     }
 
     if (maxAttrType === 'max') {
+      var elVal = element.val();
+      // IE11 doesn't set the el val correctly if the maxVal is less than the element value
+      if (maxVal < elVal) {
+        element.val(maxVal);
+      }
       ctrl.$setViewValue(element.val());
     } else {
       ctrl.$validate();
     }
   }
-
   var maxAttrType = isDefined(attr.max) ? 'max' : attr.ngMax ? 'ngMax' : false;
   if (maxAttrType) {
     // Since ngMax doesn't set the max attr, the browser doesn't adjust the input value as setting max would
     ctrl.$validators.max = isDefined(attr.max) && supportsRange && isDefined(validity.rangeOverflow) ?
-      function nativeMaxValidator(value) {
-        return !element[0].validity.rangeOverflow;
+      function nativeMaxValidator() {
+        // IE10+11 incorrectly set the rangeOverflow error when max < min
+        return (msie > 9 && maxVal < minVal) ? true : !element[0].validity.rangeOverflow;
       } :
       function maxValidator(modelValue, viewValue) {
         return ctrl.$isEmpty(viewValue) || isUndefined(maxVal) || viewValue <= maxVal;
       };
 
-    console.log('max initial', attr.max);
     // Assign maxVal when the directive is linked. This won't $validate as the model isn't ready yet
     maxChange(attr.max);
     attr.$observe('max', maxChange);

test/ng/directive/inputSpec.js

@@ -2830,50 +2830,31 @@ describe('input', function() {
     var rangeTestEl = angular.element('<input type="range">');
     var supportsRange = rangeTestEl[0].type === 'range';
 
-    it('should reset the model if view is invalid', function() {
-      var inputElm = helper.compileInput('<input type="range" ng-model="age"/>');
-
-      scope.$apply('age = 100');
-      expect(inputElm.val()).toBe('100');
-
-      try {
-        // to allow non-number values, we have to change type so that
-        // the browser which have number validation will not interfere with
-        // this test. IE8 won't allow it hence the catch.
-        inputElm[0].setAttribute('type', 'text');
-      } catch (e) {}
-
-      helper.changeInputValueTo('100X');
-      expect(inputElm.val()).toBe('100X');
-      expect(scope.age).toBeUndefined();
-      expect(inputElm).toBeInvalid();
-    });
-
+    if (supportsRange) {
+      // This behavior only applies to browsers that implement the range input, which do not
+      // allow to set a non-number value and will set the value of the input to 50 even when you
+      // change it directly on the element.
+      // Other browsers fall back to text inputs, where setting a model value of 50 does not make
+      // sense if the input value is a string. These browser will mark the input as invalid instead.
 
-    it('should render as 50 if null', function() {
-      var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
+      it('should render as 50 if null', function() {
+        var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
 
-      scope.$apply('age = null');
+        scope.$apply('age = null');
 
-      expect(inputElm.val()).toEqual('50');
-    });
+        expect(inputElm.val()).toEqual('50');
+      });
 
-    it('should set model to 50 when no value specified', function() {
-      var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
+      it('should set model to 50 when no value specified', function() {
+        var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
 
-      expect(inputElm.val()).toBe('50');
+        expect(inputElm.val()).toBe('50');
 
-      scope.$apply('age = null');
+        scope.$apply('age = null');
 
-      expect(scope.age).toBe(50);
-    });
+        expect(scope.age).toBe(50);
+      });
 
-    if (supportsRange) {
-      // This behavior only applies to browsers that implement the range input, which do not
-      // allow to set a non-number value and will set the value of the input to 50 even when you
-      // change it directly on the element.
-      // Other browsers fall back to text inputs, where setting a model value of 50 does not make
-      // sense if the input value is a string. These browser will mark the input as invalid instead.
       it('should parse non-number values to 50', function() {
         var inputElm = helper.compileInput('<input type="range" ng-model="age" />');
 
@@ -2884,6 +2865,20 @@ describe('input', function() {
         expect(scope.age).toBe(50);
         expect(inputElm).toBeValid();
       });
+
+    } else {
+
+      it('should reset the model if view is invalid', function() {
+        var inputElm = helper.compileInput('<input type="range" ng-model="age"/>');
+
+        scope.$apply('age = 100');
+        expect(inputElm.val()).toBe('100');
+
+        helper.changeInputValueTo('100X');
+        expect(inputElm.val()).toBe('100X');
+        expect(scope.age).toBeUndefined();
+        expect(inputElm).toBeInvalid();
+      });
     }
 
     it('should only invalidate the model if suffering from bad input when the data is parsed', function() {
@@ -3183,14 +3178,34 @@ describe('input', function() {
     });
 
     if (supportsRange) {
-      it('should keep the initial default value when min and max are specified', function() {
-        scope.max = 80;
-        scope.min = 40;
-        var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" min="{{min}}" />');
 
-        expect(inputElm.val()).toBe('50');
-        expect(scope.value).toBe(50);
+      describe('min and max', function() {
+
+        it('should keep the initial default value when min and max are specified', function() {
+          scope.max = 80;
+          scope.min = 40;
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" min="{{min}}" />');
+
+          expect(inputElm.val()).toBe('50');
+          expect(scope.value).toBe(50);
+        });
+
+
+        it('should set element and model value to min if max is less than min', function() {
+          scope.min = 40;
+          var inputElm = helper.compileInput('<input type="range" ng-model="value" name="alias" max="{{max}}" min="{{min}}" />');
+
+          expect(inputElm.val()).toBe('50');
+          expect(scope.value).toBe(50);
+
+          scope.max = 20;
+          scope.$digest();
+
+          expect(inputElm.val()).toBe('40');
+          expect(scope.value).toBe(40);
+        });
       });
+
     }
 
   });