| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test.js"></script> |
| <script> |
| if (window.internals) |
| internals.settings.setLangAttributeAwareFormControlUIEnabled(true); |
| else |
| debug('Require testRunner.'); |
| </script> |
| <style> |
| :invalid { |
| background-color: #ff0000; |
| } |
| </style> |
| </head> |
| <body> |
| <div id=parent> |
| <input type=number id=number> |
| <input id=another> |
| <input type="number" lang="ar-eg" id="number_ar"> |
| </div> |
| <script> |
| description('A number input fields with a bad input string should make validity.badInput true and have :invalid style.'); |
| |
| function colorOf(el) { |
| return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color'); |
| } |
| var invalidStyleColor = 'rgb(255, 0, 0)'; |
| |
| var number = document.getElementById('number'); |
| number.focus(); |
| debug('Initial state. The element has no value.'); |
| shouldNotBe('colorOf(number)', 'invalidStyleColor'); |
| shouldBeFalse('number.validity.badInput'); |
| |
| debug("Type '-'. The element becomes badInput."); |
| document.execCommand('InsertText', false, '-'); |
| shouldBe('colorOf(number)', 'invalidStyleColor'); |
| shouldBeFalse('number.validity.valid'); |
| shouldBeTrue('number.validity.badInput'); |
| shouldBeEqualToString('number.value', ''); |
| |
| debug("Type '1' additionally. The element becomes valid."); |
| document.execCommand('InsertText', false, '1'); |
| shouldNotBe('colorOf(number)', 'invalidStyleColor'); |
| shouldBeFalse('number.validity.badInput'); |
| shouldBeEqualToString('number.value', '-1'); |
| |
| debug("Type 'e' additionally. The element becomes badInput again."); |
| document.execCommand('InsertText', false, 'e'); |
| shouldBe('colorOf(number)', 'invalidStyleColor'); |
| shouldBeTrue('number.validity.badInput'); |
| shouldBeEqualToString('number.value', ''); |
| |
| debug("The element losts focus. The element state should not be changed."); |
| document.getElementById('another').focus(); |
| shouldBe('colorOf(number)', 'invalidStyleColor'); |
| shouldBeTrue('number.validity.badInput'); |
| // Visible value is '-1e'. |
| number.focus(); |
| document.execCommand('SelectAll'); |
| shouldBeEqualToString('document.getSelection().toString()', '-1e'); |
| shouldBeEqualToString('number.value', ''); |
| |
| debug("The element losts a renderer. The element state should not be changed."); |
| shouldBeTrue('number.style.display = "none"; number.validity.badInput'); |
| |
| number.style.display = 'inline-block'; |
| number.focus(); |
| debug('A bad input should be cleared by value="".'); |
| shouldBeEqualToString('number.value = ""; document.execCommand("SelectAll"); document.getSelection().toString()', ''); |
| |
| debug('Setting a valid value via |value| IDL attribute should clear badInput.'); |
| document.execCommand('InsertText', false, '-'); // Incomplete number |
| shouldBeTrue('number.validity.badInput'); |
| shouldBeFalse('number.checkValidity()'); |
| number.value = '123'; |
| shouldBeFalse('number.validity.badInput'); |
| shouldBeTrue('number.checkValidity()'); |
| |
| number.value = ''; |
| debug("' ' is not a badInput."); |
| document.execCommand('InsertText', false, ' '); |
| shouldBeFalse('number.validity.badInput'); |
| shouldBeEqualToString('number.value', ''); |
| debug("' +' is a badInput."); |
| document.execCommand('InsertText', false, '+'); |
| shouldBeTrue('number.validity.badInput'); |
| shouldBeEqualToString('number.value', ''); |
| debug("' +1' is not a badInput."); |
| document.execCommand('InsertText', false, '1'); |
| shouldBeFalse('number.validity.badInput'); |
| shouldBeEqualToString('number.value', '1'); |
| debug("' +1.' is not a badInput."); |
| document.execCommand('InsertText', false, '.'); |
| shouldBeFalse('number.validity.badInput'); |
| shouldBeEqualToString('number.value', '1'); |
| debug("' +1. ' is not a badInput."); |
| document.execCommand('InsertText', false, ' '); |
| shouldBeFalse('number.validity.badInput'); |
| shouldBeEqualToString('number.value', '1'); |
| |
| var number_ar = document.getElementById('number_ar'); |
| number_ar.focus(); |
| debug("Arabic number is not a badInput."); |
| var arabicNum = Number(1.1).toLocaleString('ar-eg'); |
| document.execCommand('InsertText', false, arabicNum); |
| // Windows seems to have issues with Arabic decimal separator, so use dot. |
| var isWindows = (number_ar.value == '11'); |
| if (isWindows) |
| { |
| arabicNum = arabicNum.replace(arabicNum[1], '.'); |
| number_ar.value = ""; |
| document.execCommand('InsertText', false, arabicNum); |
| } |
| shouldBeFalse('number_ar.validity.badInput'); |
| shouldBeEqualToString('number_ar.value', '1.1'); |
| debug("Arabic number with two decimal separators is a badInput."); |
| document.execCommand('InsertText', false, arabicNum[1]); |
| shouldBeTrue('number_ar.validity.badInput'); |
| shouldBeEqualToString('number_ar.value', ''); |
| |
| document.getElementById('parent').innerHTML = ''; |
| </script> |
| </body> |
| </html> |
