| <head> |
| <script src="../../resources/js-test.js"></script> |
| <script src="resources/common.js"></script> |
| <script> |
| |
| function backgroundOf(element) { |
| return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color'); |
| } |
| |
| function foregroundOf(element) { |
| return document.defaultView.getComputedStyle(element, null).getPropertyValue('color'); |
| } |
| |
| var select2; |
| var autofilledSelectForeground; |
| var autofilledSelectBackground; |
| var originalForeground = 'rgb(255, 255, 255)'; |
| var originalBackground = 'rgb(255, 255, 255)'; |
| |
| function test() { |
| if (!window.internals) { |
| testFailed('This test requires the test harness to run.'); |
| return; |
| } |
| |
| var field = document.getElementById('field'); |
| var search = document.getElementById('search'); |
| var textarea1 = document.getElementById('textarea1'); |
| var textarea2 = document.getElementById('textarea2'); |
| textarea2.value = 'autofilled is true'; |
| var select1 = document.getElementById('select1'); |
| select2 = document.getElementById('select2'); |
| var select3 = document.getElementById('select3'); |
| |
| shouldBe('foregroundOf(textarea1)', 'originalForeground'); |
| shouldBe('backgroundOf(textarea1)', 'originalBackground'); |
| |
| internals.setAutofilled(field, true); |
| internals.setAutofilled(search, true); |
| internals.setAutofilled(textarea1, true); |
| internals.setAutofilled(textarea2, true); |
| internals.setAutofilled(select1, true); |
| internals.setAutofilled(select2, true); |
| internals.setAutofilled(select3, true); |
| |
| shouldBeEqualToString('search.value', 'Search value'); |
| |
| // Both the foreground and background colors should change. |
| shouldNotBe('foregroundOf(field)', 'originalForeground'); |
| shouldNotBe('backgroundOf(field)', 'originalBackground'); |
| shouldNotBe('foregroundOf(search)', 'originalForeground'); |
| shouldNotBe('backgroundOf(search)', 'originalBackground'); |
| shouldNotBe('foregroundOf(textarea1)', 'originalForeground'); |
| shouldNotBe('backgroundOf(textarea1)', 'originalBackground'); |
| shouldNotBe('foregroundOf(textarea2)', 'originalForeground'); |
| shouldNotBe('backgroundOf(textarea2)', 'originalBackground'); |
| shouldNotBe('foregroundOf(select1)', 'originalForeground'); |
| shouldNotBe('backgroundOf(select1)', 'originalBackground'); |
| shouldNotBe('foregroundOf(select2)', 'originalForeground'); |
| shouldNotBe('backgroundOf(select2)', 'originalBackground'); |
| shouldNotBe('foregroundOf(select3)', 'originalForeground'); |
| shouldNotBe('backgroundOf(select3)', 'originalBackground'); |
| |
| // Remove an unselected option from <select> element. This should not affect the background color for the autofilled <select> element. |
| shouldBe('select2.options.length', '3'); |
| select2.removeChild(select2.childNodes[1]); |
| shouldBe('select2.options.length', '2'); |
| autofilledSelectForeground = foregroundOf(select2); |
| autofilledSelectBackground = backgroundOf(select2); |
| shouldBe('foregroundOf(select2)', 'autofilledSelectForeground'); |
| shouldBe('backgroundOf(select2)', 'autofilledSelectBackground'); |
| |
| internals.setAutofilled(field, false); |
| internals.setAutofilled(textarea1, false); |
| internals.setAutofilled(select1, false); |
| |
| // Cancel search by pressing cancel button |
| var cancelPos = searchCancelButtonPosition(search); |
| eventSender.mouseMoveTo(cancelPos.x, cancelPos.y); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| shouldBeEmptyString('search.value'); |
| |
| // Edit text in the autofilled textarea. |
| textarea2.focus(); |
| document.execCommand('Delete', false, null); |
| document.execCommand('Delete', false, null); |
| document.execCommand('Delete', false, null); |
| document.execCommand('Delete', false, null); |
| document.execCommand('InsertText', false, 'false'); |
| |
| // Remove selected option for select2 element |
| select2.removeChild(select2[select2.selectedIndex]); |
| |
| // Change selected option for select3 element |
| select3.selectedIndex = 2; |
| |
| // Colors should be restored. |
| shouldBe('foregroundOf(field)', 'originalForeground'); |
| shouldBe('backgroundOf(field)', 'originalBackground'); |
| shouldBe('foregroundOf(search)', 'originalForeground'); |
| shouldBe('backgroundOf(search)', 'originalBackground'); |
| shouldBe('foregroundOf(textarea1)', 'originalForeground'); |
| shouldBe('backgroundOf(textarea1)', 'originalBackground'); |
| shouldBe('foregroundOf(textarea2)', 'originalForeground'); |
| shouldBe('backgroundOf(textarea2)', 'originalBackground'); |
| shouldBe('foregroundOf(select1)', 'originalForeground'); |
| shouldBe('backgroundOf(select1)', 'originalBackground'); |
| shouldBe('foregroundOf(select2)', 'originalForeground'); |
| shouldBe('backgroundOf(select2)', 'originalBackground'); |
| shouldBe('foregroundOf(select3)', 'originalForeground'); |
| shouldBe('backgroundOf(select3)', 'originalBackground'); |
| } |
| </script> |
| |
| <style> |
| #field, #search, #textarea1, #textarea2, #select1, #select2, #select3 { |
| color: #FFFFFF; |
| background-color: #FFFFFF; |
| } |
| </style> |
| </head> |
| <body onload="test()"> |
| This tests that foreground and background colors properly change for autofilled inputs or select options. It can only be run using the test harness.<br> |
| <form name="fm"> |
| <input type="text" id="field" value="Field value"> |
| <input type="search" id="search" value="Search value"> |
| <textarea id="textarea1"></textarea> |
| <textarea id="textarea2"></textarea> |
| <select id="select1"></select> |
| <select id="select2"> |
| <option selected>1</option> |
| <option >2</option> |
| <option>3</option> |
| </select> |
| <select id="select3"> |
| <option selected>1</option> |
| <option >2</option> |
| <option>3</option> |
| </select> |
| </form> |
| <div id="console"></div> |
| </body> |
