Title: [113511] trunk
Revision
113511
Author
isher...@chromium.org
Date
2012-04-06 15:48:44 -0700 (Fri, 06 Apr 2012)

Log Message

Allow site authors to override autofilled fields' colors.
https://bugs.webkit.org/show_bug.cgi?id=66032
http://code.google.com/p/chromium/issues/detail?id=46543

Reviewed by Simon Fraser.

Source/WebCore:

* css/html.css:
(input:-webkit-autofill): Remove !important declarations.

LayoutTests:

* fast/forms/input-autofilled-expected.txt:
* fast/forms/input-autofilled.html:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (113510 => 113511)


--- trunk/LayoutTests/ChangeLog	2012-04-06 22:44:02 UTC (rev 113510)
+++ trunk/LayoutTests/ChangeLog	2012-04-06 22:48:44 UTC (rev 113511)
@@ -1,3 +1,14 @@
+2012-04-06  Ilya Sherman  <isher...@chromium.org>
+
+        Allow site authors to override autofilled fields' colors.
+        https://bugs.webkit.org/show_bug.cgi?id=66032
+        http://code.google.com/p/chromium/issues/detail?id=46543
+
+        Reviewed by Simon Fraser.
+
+        * fast/forms/input-autofilled-expected.txt:
+        * fast/forms/input-autofilled.html:
+
 2012-04-06  Dirk Pranke  <dpra...@chromium.org>
 
         clone baselines from platform/win to platform/chromium-win

Modified: trunk/LayoutTests/fast/forms/input-autofilled-expected.txt (113510 => 113511)


--- trunk/LayoutTests/fast/forms/input-autofilled-expected.txt	2012-04-06 22:44:02 UTC (rev 113510)
+++ trunk/LayoutTests/fast/forms/input-autofilled-expected.txt	2012-04-06 22:48:44 UTC (rev 113511)
@@ -1,4 +1,15 @@
 This tests that foreground and background colors properly change for autofilled inputs. It can only be run using DumpRenderTree.
+    
+PASS computedStyleUnstyled.color == originalForegroundUnstyled is true
+PASS computedStyleUnstyled.backgroundColor == originalBackgroundUnstyled is false
+PASS computedStyleStyled.color == originalForegroundStyled is true
+PASS computedStyleStyled.backgroundColor == originalBackgroundStyled is true
+PASS computedStyleStyledWithSelector.color == originalForegroundStyledWithSelector is false
+PASS computedStyleStyledWithSelector.backgroundColor == originalBackgroundStyledWithSelector is false
+PASS computedStyleUnstyled.color == originalForegroundUnstyled is true
+PASS computedStyleUnstyled.backgroundColor == originalBackgroundUnstyled is true
+PASS computedStyleStyled.color == originalForegroundStyled is true
+PASS computedStyleStyled.backgroundColor == originalBackgroundStyled is true
+PASS computedStyleStyledWithSelector.color == originalForegroundStyledWithSelector is true
+PASS computedStyleStyledWithSelector.backgroundColor == originalBackgroundStyledWithSelector is true
 
-PASS 
-

Modified: trunk/LayoutTests/fast/forms/input-autofilled.html (113510 => 113511)


--- trunk/LayoutTests/fast/forms/input-autofilled.html	2012-04-06 22:44:02 UTC (rev 113510)
+++ trunk/LayoutTests/fast/forms/input-autofilled.html	2012-04-06 22:48:44 UTC (rev 113511)
@@ -7,58 +7,76 @@
             layoutTestController.dumpAsText();
         }
 
-        var tf = document.getElementById('tf');
-        var computedStyle = document.defaultView.getComputedStyle(tf);
-        var originalForeground = computedStyle.color;
-        var originalBackground = computedStyle.backgroundColor;
+        var unstyled = document.getElementById('unstyled');
+        var styled = document.getElementById('styled');
+        var styledWithSelector = document.getElementById('styledWithSelector');
+        computedStyleUnstyled = document.defaultView.getComputedStyle(unstyled);
+        originalForegroundUnstyled = computedStyleUnstyled.color;
+        originalBackgroundUnstyled = computedStyleUnstyled.backgroundColor;
+        computedStyleStyled = document.defaultView.getComputedStyle(styled);
+        originalForegroundStyled = computedStyleStyled.color;
+        originalBackgroundStyled = computedStyleStyled.backgroundColor;
+        computedStyleStyledWithSelector = document.defaultView.getComputedStyle(styledWithSelector);
+        originalForegroundStyledWithSelector = computedStyleStyledWithSelector.color;
+        originalBackgroundStyledWithSelector = computedStyleStyledWithSelector.backgroundColor;
 
         if (window.layoutTestController) {
-            layoutTestController.setAutofilled(tf, true);
+            layoutTestController.setAutofilled(unstyled, true);
+            layoutTestController.setAutofilled(styled, true);
+            layoutTestController.setAutofilled(styledWithSelector, true);
         }
 
-        // Both the foreground and background colors should change.
-        computedStyle = document.defaultView.getComputedStyle(tf);
-        var autofilledForeground = computedStyle.color;
-        var autofilledBackground = computedStyle.backgroundColor;
-        if (autofilledForeground == originalForeground) {
-            testFailed('Foreground color did not change when autofilled.');
-            return;
-        }
-        if (autofilledBackground == originalBackground) {
-            testFailed('Background color did not change when autofilled.');
-            return;
-        }
+        // For the unstyled element, the background color should change.  The foreground color should not change,
+        // as the default foreground color for an autofilled input is the same as for a non-autofilled input.
+        // For the styled element, the author-specified style should take precedence, so neither color should change.
+        // For the element styled with the :-webkit-autofill selector, both the foreground and the background colors
+        // should change.
+        computedStyleUnstyled = document.defaultView.getComputedStyle(unstyled);
+        computedStyleStyled = document.defaultView.getComputedStyle(styled);
+        computedStyleStyledWithSelector = document.defaultView.getComputedStyle(styledWithSelector);
+        shouldBeTrue("computedStyleUnstyled.color == originalForegroundUnstyled");
+        shouldBeFalse("computedStyleUnstyled.backgroundColor == originalBackgroundUnstyled");
+        shouldBeTrue("computedStyleStyled.color == originalForegroundStyled");
+        shouldBeTrue("computedStyleStyled.backgroundColor == originalBackgroundStyled");
+        shouldBeFalse("computedStyleStyledWithSelector.color == originalForegroundStyledWithSelector");
+        shouldBeFalse("computedStyleStyledWithSelector.backgroundColor == originalBackgroundStyledWithSelector");
 
         if (window.layoutTestController) {
-            layoutTestController.setAutofilled(tf, false);
+            layoutTestController.setAutofilled(unstyled, false);
+            layoutTestController.setAutofilled(styled, false);
+            layoutTestController.setAutofilled(styledWithSelector, false);
         }
 
         // Colors should be restored.
-        computedStyle = document.defaultView.getComputedStyle(tf);
-        if (computedStyle.color != originalForeground) {
-            testFailed('Foreground color did not revert when un-autofilled.');
-            return;
-        }
-        if (computedStyle.backgroundColor != originalBackground) {
-            testFailed('Background color did not revert when un-autofilled.');
-            return;
-        }
-
-        testPassed('');
+        computedStyleUnstyled = document.defaultView.getComputedStyle(unstyled);
+        computedStyleStyled = document.defaultView.getComputedStyle(styled);
+        shouldBeTrue("computedStyleUnstyled.color == originalForegroundUnstyled");
+        shouldBeTrue("computedStyleUnstyled.backgroundColor == originalBackgroundUnstyled");
+        shouldBeTrue("computedStyleStyled.color == originalForegroundStyled");
+        shouldBeTrue("computedStyleStyled.backgroundColor == originalBackgroundStyled");
+        shouldBeTrue("computedStyleStyledWithSelector.color == originalForegroundStyledWithSelector");
+        shouldBeTrue("computedStyleStyledWithSelector.backgroundColor == originalBackgroundStyledWithSelector");
     }
     </script>
 
     <style>
-    #tf {
-      color: #FFFFFF;
-      background-color: #FFFFFF;
+    #styled {
+      color: #00FF00;
+      background-color: #00FF00;
     }
+    
+    #styledWithSelector:-webkit-autofill {
+      color: #00FF00;
+      background-color: #00FF00;
+    }
     </style>
 </head>
 <body _onload_="test()">
     This tests that foreground and background colors properly change for autofilled inputs.  It can only be run using DumpRenderTree.<br>
     <form name="fm">
-        <input type="text" id="tf" value="Field value" />
+        <input type="text" id="unstyled" value="Field value" />
+        <input type="text" id="styled" value="Field value" />
+        <input type="text" id="styledWithSelector" value="Field value" />
     </form>
     <div id="console"></div>
 </body>

Modified: trunk/Source/WebCore/ChangeLog (113510 => 113511)


--- trunk/Source/WebCore/ChangeLog	2012-04-06 22:44:02 UTC (rev 113510)
+++ trunk/Source/WebCore/ChangeLog	2012-04-06 22:48:44 UTC (rev 113511)
@@ -1,3 +1,14 @@
+2012-04-06  Ilya Sherman  <isher...@chromium.org>
+
+        Allow site authors to override autofilled fields' colors.
+        https://bugs.webkit.org/show_bug.cgi?id=66032
+        http://code.google.com/p/chromium/issues/detail?id=46543
+
+        Reviewed by Simon Fraser.
+
+        * css/html.css:
+        (input:-webkit-autofill): Remove !important declarations.
+
 2012-04-05  Enrica Casucci  <enr...@apple.com>
 
         Provide Obj-C private API to simplify markup.

Modified: trunk/Source/WebCore/css/html.css (113510 => 113511)


--- trunk/Source/WebCore/css/html.css	2012-04-06 22:44:02 UTC (rev 113510)
+++ trunk/Source/WebCore/css/html.css	2012-04-06 22:48:44 UTC (rev 113511)
@@ -537,9 +537,9 @@
 }
 
 input:-webkit-autofill {
-    background-color: #FAFFBD !important;
-    background-image:none !important;
-    color: #000000 !important;
+    background-color: #FAFFBD;
+    background-image: none;
+    color: #000000;
 }
 
 input[type="radio"], input[type="checkbox"] {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to