| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| |
| [name=victim] { |
| background-color: #0f0; |
| } |
| |
| [name=victim]:invalid { |
| background-color: #f00; |
| } |
| |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description"></p> |
| |
| <select name="victim"></select> |
| <textarea name="victim"></textarea> |
| <input name="victim"> |
| |
| <div id="console"></div> |
| <script> |
| |
| description('This test checks if setCustomValidity causes CSS to get applied correctly.'); |
| |
| var v = document.getElementsByName('victim'); |
| var test; |
| |
| for (var i = 0; i < v.length; i++) { |
| test = v[i]; |
| |
| shouldBeFalse('test.validity.customError'); |
| shouldBeEqualToString('test.validationMessage', ''); |
| shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(0, 255, 0)'); |
| |
| var message = 'Custom validation message'; |
| test.setCustomValidity(message); |
| shouldBeTrue('test.validity.customError'); |
| shouldBeEqualToString('test.validationMessage', message); |
| shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(255, 0, 0)'); |
| |
| test.setCustomValidity(''); |
| shouldBeFalse('test.validity.customError'); |
| shouldBeEqualToString('test.validationMessage', ''); |
| shouldBeEqualToString('getComputedStyle(test).backgroundColor', 'rgb(0, 255, 0)'); |
| } |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
