Comprehensive box-sizing fix. This patch changes all form controls to

        have the right box-sizing values (text fields and text areas actually only
        use border-box in quirks mode now, and image buttons never use border-box).

        Tables are supposed to use border-box box-sizing as well, but that's a scary
        enough change that I'm saving it for a separate patch.

        Reviewed by mjs

        * css/html4.css:
        * css/quirks.css:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@14227 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 01ac75db39416a5aabe9729db4ff0f00af435eca..5d1fbe55d13acce3d15d4bdb486a79caeb66641e 100644 (file)
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,17 @@
+2006-05-08  David Hyatt  <hyatt@apple.com>
+
+        Comprehensive box-sizing fix.  This patch changes all form controls to
+        have the right box-sizing values (text fields and text areas actually only
+        use border-box in quirks mode now, and image buttons never use border-box).
+
+        Tables are supposed to use border-box box-sizing as well, but that's a scary
+        enough change that I'm saving it for a separate patch.
+
+        Reviewed by mjs
+
+        * css/html4.css:
+        * css/quirks.css:
+
 2006-05-06  Darin Adler  <darin@apple.com>
         
         Suggested by Mitz. Reviewed and landed by Maciej.

diff --git a/WebCore/css/html4.css b/WebCore/css/html4.css
index 3193e012ff5ff2ead56084c988bdf89dd95de128..1e47a519e94a78ca492a2f3106a35986563fc86e 100644 (file)
--- a/WebCore/css/html4.css
+++ b/WebCore/css/html4.css
@@ -218,7 +218,8 @@ th {
 
 caption {
     display: table-caption;
-    text-align: -webkit-center
+    text-align: -webkit-center;
+    box-sizing: border-box
 }
 
 /* lists */
@@ -306,7 +307,6 @@ input, textarea, select, button {
     text-transform: none;
     text-indent: 0;
     display: inline-block;
-    box-sizing: border-box;
 }
 
 input[type="hidden"] {
@@ -355,7 +355,8 @@ input[type="button"], input[type="submit"], input[type="reset"], button {
     color: ButtonText;
     padding: 2px 6px 3px 6px;
     border: 2px outset ButtonFace;
-    background-color: ButtonFace
+    background-color: ButtonFace;
+    box-sizing: border-box
 }
 
 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, button:disabled {
@@ -379,11 +380,17 @@ option, optgroup, area, param {
 }
 
 input[type="checkbox"] {
-    -webkit-appearance: checkbox
+    -webkit-appearance: checkbox;
+    box-sizing: border-box;
 }
 
 input[type="radio"] {
-    -webkit-appearance: radio
+    -webkit-appearance: radio;
+    box-sizing: border-box;
+}
+
+select {
+    box-sizing: border-box;
 }
 
 /* inline elements */

diff --git a/WebCore/css/quirks.css b/WebCore/css/quirks.css
index e9747a8e9cc759684f5b3df3f950a2711762a887..f8fb04e3236bcabf9517ee0cf24b0c98b5f8e104 100644 (file)
--- a/WebCore/css/quirks.css
+++ b/WebCore/css/quirks.css
@@ -40,3 +40,8 @@ table {
     font-style: normal;
     color: -webkit-text;
 }
+
+/* This will apply only to text fields, since all other inputs already use border box sizing */
+input:not([type=image]), textarea {
+    box-sizing: border-box;
+}