src/third_party/WebKit/LayoutTests/fast/forms/autofilled.html

   1 <head>
   2 <script src="../../resources/js-test.js"></script>
   3 <script src="resources/common.js"></script>
   4 <script>
   5
   6 function backgroundOf(element) {
   7     return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
   8 }
   9
  10 function foregroundOf(element) {
  11     return document.defaultView.getComputedStyle(element, null).getPropertyValue('color');
  12 }
  13
  14 var select2;
  15 var autofilledSelectForeground;
  16 var autofilledSelectBackground;
  17 var originalForeground = 'rgb(255, 255, 255)';
  18 var originalBackground = 'rgb(255, 255, 255)';
  19
  20 function test() {
  21     if (!window.internals) {
  22         testFailed('This test requires the test harness to run.');
  23         return;
  24     }
  25
  26     var field = document.getElementById('field');
  27     var search = document.getElementById('search');
  28     var textarea1 = document.getElementById('textarea1');
  29     var textarea2 = document.getElementById('textarea2');
  30     textarea2.value = 'autofilled is true';
  31     var select1 = document.getElementById('select1');
  32     select2 = document.getElementById('select2');
  33
  34     shouldBe('foregroundOf(textarea1)', 'originalForeground');
  35     shouldBe('backgroundOf(textarea1)', 'originalBackground');
  36
  37     window.internals.setAutofilled(field, true);
  38     window.internals.setAutofilled(search, true);
  39     window.internals.setAutofilled(textarea1, true);
  40     window.internals.setAutofilled(textarea2, true);
  41     window.internals.setAutofilled(select1, true);
  42     window.internals.setAutofilled(select2, true);
  43
  44     shouldBeEqualToString('search.value', 'Search value');
  45
  46     // Both the foreground and background colors should change.
  47     shouldNotBe('foregroundOf(field)', 'originalForeground');
  48     shouldNotBe('backgroundOf(field)', 'originalBackground');
  49     shouldNotBe('foregroundOf(search)', 'originalForeground');
  50     shouldNotBe('backgroundOf(search)', 'originalBackground');
  51     shouldNotBe('foregroundOf(textarea1)', 'originalForeground');
  52     shouldNotBe('backgroundOf(textarea1)', 'originalBackground');
  53     shouldNotBe('foregroundOf(textarea2)', 'originalForeground');
  54     shouldNotBe('backgroundOf(textarea2)', 'originalBackground');
  55     shouldNotBe('foregroundOf(select1)', 'originalForeground');
  56     shouldNotBe('backgroundOf(select1)', 'originalBackground');
  57     shouldNotBe('foregroundOf(select2)', 'originalForeground');
  58     shouldNotBe('backgroundOf(select2)', 'originalBackground');
  59
  60     // Remove an unselected option from <select> element. This should not affect the background color for the autofilled <select> element.
  61     shouldBe('select2.options.length', '3');
  62     select2.removeChild(select2.childNodes[1]);
  63     shouldBe('select2.options.length', '2');
  64     autofilledSelectForeground = foregroundOf(select2);
  65     autofilledSelectBackground = backgroundOf(select2);
  66     shouldBe('foregroundOf(select2)', 'autofilledSelectForeground');
  67     shouldBe('backgroundOf(select2)', 'autofilledSelectBackground');
  68
  69     window.internals.setAutofilled(field, false);
  70     window.internals.setAutofilled(textarea1, false);
  71     window.internals.setAutofilled(select1, false);
  72
  73     // Cancel search by pressing cancel button
  74     var cancelPos = searchCancelButtonPosition(search);
  75     eventSender.mouseMoveTo(cancelPos.x, cancelPos.y);
  76     eventSender.mouseDown();
  77     eventSender.mouseUp();
  78     shouldBeEmptyString('search.value');
  79
  80     // Edit text in the autofilled textarea.
  81     textarea2.focus();
  82     document.execCommand('Delete', false, null);
  83     document.execCommand('Delete', false, null);
  84     document.execCommand('Delete', false, null);
  85     document.execCommand('Delete', false, null);
  86     document.execCommand('InsertText', false, 'false');
  87
  88     // Remove selected option for select2 element
  89     select2.removeChild(select2[select2.selectedIndex]);
  90
  91     // Colors should be restored.
  92     shouldBe('foregroundOf(field)', 'originalForeground');
  93     shouldBe('backgroundOf(field)', 'originalBackground');
  94     shouldBe('foregroundOf(search)', 'originalForeground');
  95     shouldBe('backgroundOf(search)', 'originalBackground');
  96     shouldBe('foregroundOf(textarea1)', 'originalForeground');
  97     shouldBe('backgroundOf(textarea1)', 'originalBackground');
  98     shouldBe('foregroundOf(textarea2)', 'originalForeground');
  99     shouldBe('backgroundOf(textarea2)', 'originalBackground');
 100     shouldBe('foregroundOf(select1)', 'originalForeground');
 101     shouldBe('backgroundOf(select1)', 'originalBackground');
 102     shouldBe('foregroundOf(select2)', 'originalForeground');
 103     shouldBe('backgroundOf(select2)', 'originalBackground');
 104 }
 105 </script>
 106
 107 <style>
 108 #field, #search, #textarea1, #textarea2, #select1, #select2 {
 109     color: #FFFFFF;
 110     background-color: #FFFFFF;
 111 }
 112 </style>
 113 </head>
 114 <body onload="test()">
 115     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>
 116     <form name="fm">
 117         <input type="text" id="field" value="Field value">
 118         <input type="search" id="search" value="Search value">
 119         <textarea id="textarea1"></textarea>
 120         <textarea id="textarea2"></textarea>
 121         <select id="select1"></select>
 122         <select id="select2">
 123             <option selected>1</option>
 124             <option >2</option>
 125             <option>3</option>
 126         </select>
 127     </form>
 128     <div id="console"></div>
 129 </body>