Bug 971955 - Make overflow-clip-box:content-box the default for all <input> @type values except type=file/button/reset/submit. r=roc
authorMats Palmgren <matspal@gmail.com>
Thu, 06 Mar 2014 10:03:38 +0000
changeset 189500 6fb8bc793891a8a2309b37e651e407bb50ea59c6
parent 189499 47882484a98db000eb488ff10574d3fa303a6d2a
child 189501 4c9d799155d2461f1362f5c488bc299a77c43e94
push id3503
push userraliiev@mozilla.com
push dateMon, 28 Apr 2014 18:51:11 +0000
treeherdermozilla-beta@c95ac01e332e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersroc
bugs971955
milestone30.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 971955 - Make overflow-clip-box:content-box the default for all <input> @type values except type=file/button/reset/submit. r=roc
layout/reftests/bugs/966992-1-ref.html
layout/reftests/bugs/966992-1.html
layout/style/forms.css
layout/style/number-control.css
--- a/layout/reftests/bugs/966992-1-ref.html
+++ b/layout/reftests/bugs/966992-1-ref.html
@@ -36,16 +36,17 @@ p {
   overflow:auto; overflow-clip-box:padding-box;
 }
 .rel { position:relative; }
 .mask1 { position:absolute; width:20px; background:white; top:0; bottom:0; right:0; }
 .mask2 { position:absolute; width:20px; background:white; top:0px; bottom:-15px; right:220px; z-index:99; }
 .mask3 { position:absolute; width:20px; background:white; top:0; bottom:0; left:200px; }
 .mask4 { position:absolute; height:40px; background:white; top:4px; left:3px; width:210px; z-index:99; }
 .mask5 { position:absolute; height:40px; background:white; top:3px; right:3px; width:50px; }
+.button { width:100px; padding:0 50px; overflow:hidden; }
     </style>
 <script>
 function runTest() {
   // the timeout is for avoiding differences in scrollbar fading
   document.documentElement.removeAttribute("class");
 }
 </script>
 </head>
@@ -63,11 +64,21 @@ function runTest() {
 <script>
 document.getElementById("d1").scrollLeft = "100000";
 </script>
 <div class="block"><span style="padding-right:20px"><span style="position:relative;"><div class=mask3></div>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></span><p></p></div>
 
 <span style="position:relative"><input spellcheck=false type="text" placeholder="someveryveryveryveryverylongvalue"><div class=mask5></div></span>
 <span style="position:relative"><input spellcheck=false type="text" value="someveryveryveryveryverylongvalue"><div class=mask5></div></span><br>
 <span style="position:relative"><input spellcheck=false type="password" value="someveryveryveryveryverylongpassword"><div class=mask5></div></span>
+<span style="position:relative"><input spellcheck=false type="email" value="someveryveryveryveryverylongvalue"><div class=mask5></div></span>
+<span style="position:relative"><input spellcheck=false type="blah" value="someveryveryveryveryverylongvalue"><div class=mask5></div></span>
+<br>
+<input spellcheck=false type="button" value="button" class="button" style="overflow-clip-box:initial">
+<input spellcheck=false type="button" value="button" class="button">
+<input spellcheck=false type="reset" class="button">
+<input spellcheck=false type="submit" class="button"><br>
+<input spellcheck=false type="button" value="" class="button">
+<input spellcheck=false type="reset" value="" class="button">
+<input spellcheck=false type="submit" value="" class="button"><br>
 
 </body>
 </html>
--- a/layout/reftests/bugs/966992-1.html
+++ b/layout/reftests/bugs/966992-1.html
@@ -29,16 +29,19 @@ p {
  background:magenta;
 }
 .rel p { width:200%; }
 .block {
   border:1px solid grey; height:50px; width:200px; padding:20px;
   overflow:auto; overflow-clip-box:content-box;
 }
 .rel { position:relative; }
+.button { width:0px; padding:0 50px; overflow:hidden; }
+.pb { overflow-clip-box:padding-box; }
+.cb { overflow-clip-box:content-box; }
     </style>
 <script>
 function runTest() {
   // the timeout is for avoiding differences in scrollbar fading
   document.documentElement.removeAttribute("class");
 }
 </script>
 </head>
@@ -55,11 +58,20 @@ function runTest() {
 <script>
 document.getElementById("d1").scrollLeft = "100000";
 </script>
 <div class="block">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<p></p></div>
 
 <input spellcheck=false type="text" placeholder="someveryveryveryveryverylongvalue">
 <input spellcheck=false type="text" value="someveryveryveryveryverylongvalue"><br>
 <input spellcheck=false type="password" value="someveryveryveryveryverylongpassword">
+<input spellcheck=false type="email" value="someveryveryveryveryverylongvalue">
+<input spellcheck=false type="blah" value="someveryveryveryveryverylongvalue"><br>
+<input spellcheck=false type="button" value="button" class="button" style="overflow-clip-box:initial">
+<input spellcheck=false type="button" value="button" class="button pb">
+<input spellcheck=false type="reset" class="button pb">
+<input spellcheck=false type="submit" class="button pb"><br>
+<input spellcheck=false type="button" value="button" class="button cb">
+<input spellcheck=false type="reset" class="button cb">
+<input spellcheck=false type="submit" class="button cb"><br>
 
 </body>
 </html>
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -64,16 +64,17 @@ input {
   text-transform: none;
   word-spacing: normal;
   letter-spacing: normal;
   cursor: text;
   -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
   text-indent: 0;
   -moz-user-select: text;
   text-shadow: none;
+  overflow-clip-box: content-box;
 }
 
 input > .anonymous-div,
 input::-moz-placeholder {
   word-wrap: normal !important;
   /* Make the line-height equal to the available height */
   line-height: -moz-block-height;
 }
@@ -375,21 +376,16 @@ textarea:disabled {
   cursor: default;
 }
 
 option:disabled,
 optgroup:disabled {
   background-color: transparent;
 }
 
-input[type="text"],
-input[type="password"] {
-  overflow-clip-box: content-box;
-}
-
 /* hidden inputs */
 input[type="hidden"] {
   -moz-appearance: none;
   display: none !important;
   padding: 0;
   border: 0;
   cursor: auto;
   -moz-user-focus: ignore;
@@ -417,16 +413,17 @@ input[type="image"]:-moz-focusring {
   outline: 1px dotted;
 }
 
 /* file selector */
 input[type="file"] {
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
+  overflow-clip-box: padding-box;
   color: inherit;
 
   /* Revert rules which apply on all inputs. */
   -moz-appearance: none;
   -moz-binding: none;
   cursor: default;
 
   border: none;
@@ -572,16 +569,17 @@ input[type="reset"],
 input[type="button"],
 input[type="submit"] {
   color: ButtonText; 
   font: -moz-button;
   line-height: normal;
   white-space: pre;
   text-align: center;
   text-shadow: none;
+  overflow-clip-box: padding-box;
 }
 
 input[type="color"]:-moz-system-metric(color-picker-available) {
   width: 64px;
   height: 23px;
 }
 
 button {
--- a/layout/style/number-control.css
+++ b/layout/style/number-control.css
@@ -7,11 +7,10 @@
  * fixed this rule can move back to forms.css.
  */
 
 input[type="number"] {
   -moz-appearance: number-input;
   /* Has to revert some properties applied by the generic input rule. */
   -moz-binding: none;
   width: 149px; /* to match type=text */
-  overflow-clip-box: content-box;
 }