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     var select3 = document.getElementById('select3');
  34
  35     shouldBe('foregroundOf(textarea1)', 'originalForeground');
  36     shouldBe('backgroundOf(textarea1)', 'originalBackground');
  37
  38     window.internals.setAutofilled(field, true);
  39     window.internals.setAutofilled(search, true);
  40     window.internals.setAutofilled(textarea1, true);
  41     window.internals.setAutofilled(textarea2, true);
  42     window.internals.setAutofilled(select1, true);
  43     window.internals.setAutofilled(select2, true);
  44     window.internals.setAutofilled(select3, true);
  45
  46     shouldBeEqualToString('search.value', 'Search value');
  47
  48     // Both the foreground and background colors should change.
  49     shouldNotBe('foregroundOf(field)', 'originalForeground');
  50     shouldNotBe('backgroundOf(field)', 'originalBackground');
  51     shouldNotBe('foregroundOf(search)', 'originalForeground');
  52     shouldNotBe('backgroundOf(search)', 'originalBackground');
  53     shouldNotBe('foregroundOf(textarea1)', 'originalForeground');
  54     shouldNotBe('backgroundOf(textarea1)', 'originalBackground');
  55     shouldNotBe('foregroundOf(textarea2)', 'originalForeground');
  56     shouldNotBe('backgroundOf(textarea2)', 'originalBackground');
  57     shouldNotBe('foregroundOf(select1)', 'originalForeground');
  58     shouldNotBe('backgroundOf(select1)', 'originalBackground');
  59     shouldNotBe('foregroundOf(select2)', 'originalForeground');
  60     shouldNotBe('backgroundOf(select2)', 'originalBackground');
  61     shouldNotBe('foregroundOf(select3)', 'originalForeground');
  62     shouldNotBe('backgroundOf(select3)', 'originalBackground');
  63
  64     // Remove an unselected option from <select> element. This should not affect the background color for the autofilled <select> element.
  65     shouldBe('select2.options.length', '3');
  66     select2.removeChild(select2.childNodes[1]);
  67     shouldBe('select2.options.length', '2');
  68     autofilledSelectForeground = foregroundOf(select2);
  69     autofilledSelectBackground = backgroundOf(select2);
  70     shouldBe('foregroundOf(select2)', 'autofilledSelectForeground');
  71     shouldBe('backgroundOf(select2)', 'autofilledSelectBackground');
  72
  73     window.internals.setAutofilled(field, false);
  74     window.internals.setAutofilled(textarea1, false);
  75     window.internals.setAutofilled(select1, false);
  76
  77     // Cancel search by pressing cancel button
  78     var cancelPos = searchCancelButtonPosition(search);
  79     eventSender.mouseMoveTo(cancelPos.x, cancelPos.y);
  80     eventSender.mouseDown();
  81     eventSender.mouseUp();
  82     shouldBeEmptyString('search.value');
  83
  84     // Edit text in the autofilled textarea.
  85     textarea2.focus();
  86     document.execCommand('Delete', false, null);
  87     document.execCommand('Delete', false, null);
  88     document.execCommand('Delete', false, null);
  89     document.execCommand('Delete', false, null);
  90     document.execCommand('InsertText', false, 'false');
  91
  92     // Remove selected option for select2 element
  93     select2.removeChild(select2[select2.selectedIndex]);
  94
  95     // Change selected option for select3 element
  96     select3.selectedIndex = 2;
  97
  98     // Colors should be restored.
  99     shouldBe('foregroundOf(field)', 'originalForeground');
 100     shouldBe('backgroundOf(field)', 'originalBackground');
 101     shouldBe('foregroundOf(search)', 'originalForeground');
 102     shouldBe('backgroundOf(search)', 'originalBackground');
 103     shouldBe('foregroundOf(textarea1)', 'originalForeground');
 104     shouldBe('backgroundOf(textarea1)', 'originalBackground');
 105     shouldBe('foregroundOf(textarea2)', 'originalForeground');
 106     shouldBe('backgroundOf(textarea2)', 'originalBackground');
 107     shouldBe('foregroundOf(select1)', 'originalForeground');
 108     shouldBe('backgroundOf(select1)', 'originalBackground');
 109     shouldBe('foregroundOf(select2)', 'originalForeground');
 110     shouldBe('backgroundOf(select2)', 'originalBackground');
 111     shouldBe('foregroundOf(select3)', 'originalForeground');
 112     shouldBe('backgroundOf(select3)', 'originalBackground');
 113 }
 114 </script>
 115
 116 <style>
 117 #field, #search, #textarea1, #textarea2, #select1, #select2, #select3 {
 118     color: #FFFFFF;
 119     background-color: #FFFFFF;
 120 }
 121 </style>
 122 </head>
 123 <body onload="test()">
 124     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>
 125     <form name="fm">
 126         <input type="text" id="field" value="Field value">
 127         <input type="search" id="search" value="Search value">
 128         <textarea id="textarea1"></textarea>
 129         <textarea id="textarea2"></textarea>
 130         <select id="select1"></select>
 131         <select id="select2">
 132             <option selected>1</option>
 133             <option >2</option>
 134             <option>3</option>
 135         </select>
 136         <select id="select3">
 137             <option selected>1</option>
 138             <option >2</option>
 139             <option>3</option>
 140         </select>
 141     </form>
 142     <div id="console"></div>
 143 </body>