| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <style> |
| :invalid { |
| background-color: #ff0000; |
| } |
| </style> |
| </head> |
| <body> |
| <div id=parent> |
| <input type=number id=number> |
| <input id=another> |
| </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 elment 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 'a' additionally. The element becomes badInput again."); |
| document.execCommand('InsertText', false, 'a'); |
| 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 '-1a'. |
| number.focus(); |
| document.execCommand('SelectAll'); |
| shouldBeEqualToString('document.getSelection().toString()', '-1a'); |
| 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()', ''); |
| |
| document.getElementById('parent').innerHTML = ''; |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
