Bug 1123299 - Allow <input type=number> to be displayed in vertical writing mode; but keep the spinner arrows arranged as for horizontal writing mode. r=dholbert
authorJonathan Kew <jkew@mozilla.com>
Tue, 16 Jun 2015 11:07:22 +0100
changeset 279873 5b07aa1d76e22fb9df7218c2e93a4a1ea8e6cd5c
parent 279872 b43de5b593e7321321c90a560b03fd6698115441
child 279874 06f474c578d60a22a95a0f204214ca14e0034dfb
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1123299
milestone41.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 1123299 - Allow <input type=number> to be displayed in vertical writing mode; but keep the spinner arrows arranged as for horizontal writing mode. r=dholbert
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
layout/reftests/forms/input/number/reftest.list
layout/style/forms.css
layout/style/number-control.css
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+  <body>
+    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-lr;">
+  <body>
+    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; left:0px;">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+  <body>
+    <input type="text" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html style="writing-mode:vertical-rl;">
+  <body>
+    <input type="number" style="-moz-appearance:none; height:200px;" value="123">
+    <!-- div to cover spin box area -->
+    <div style="position:absolute; background-color:black; width:100px; height:200px; top:100px; right:0px;">
+  </body>
+</html>
--- a/layout/reftests/forms/input/number/reftest.list
+++ b/layout/reftests/forms/input/number/reftest.list
@@ -5,16 +5,18 @@ default-preferences pref(dom.forms.numbe
 skip-if(Android||B2G||Mulet) != not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html # Initial mulet triage: parity with B2G/B2G Desktop
 skip-if(Android||B2G||Mulet) != not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html # Initial mulet triage: parity with B2G/B2G Desktop
 # only valid on Android/B2G where type=number looks the same as type=text
 skip-if(!Android&&!B2G&&!Mulet) == number-same-as-text-unthemed.html number-same-as-text-unthemed-ref.html # Initial mulet triage: parity with B2G/B2G Desktop
 
 # should look the same as type=text, except for the spin box
 == number-similar-to-text-unthemed.html number-similar-to-text-unthemed-ref.html
 == number-similar-to-text-unthemed-rtl.html number-similar-to-text-unthemed-rtl-ref.html
+pref(layout.css.vertical-text.enabled,true) == number-similar-to-text-unthemed-vertical-lr.html number-similar-to-text-unthemed-vertical-lr-ref.html
+pref(layout.css.vertical-text.enabled,true) == number-similar-to-text-unthemed-vertical-rl.html number-similar-to-text-unthemed-vertical-rl-ref.html
 
 # dynamic type changes:
 fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),64,4) fuzzy-if(cocoaWidget,63,4) == to-number-from-other-type-unthemed-1.html to-number-from-other-type-unthemed-1-ref.html
 == from-number-to-other-type-unthemed-1.html from-number-to-other-type-unthemed-1-ref.html
 
 # dynamic value changes:
 == show-value.html show-value-ref.html
 
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -985,27 +985,34 @@ input[type=number]::-moz-number-text {
   flex: 1;
   min-inline-size: 0;
   padding: 0;
   border: 0;
   margin: 0;
 }
 
 input[type=number]::-moz-number-spin-box {
+  writing-mode: horizontal-tb;
   display: flex;
   flex-direction: column;
 %ifdef XP_WIN
   /* The Window's Theme's spin buttons have a very narrow minimum width, so
    * make it something reasonable:
-   * XXX What about vertical mode? How will the spin buttons be arranged?
-   * This may need to be adjusted when bug 1123299 is implemented.
    */
   width: 16px;
 %endif
-  height: 0;
+  /* If the spin-box has auto height, it ends up enlarging the default height
+   * of the control, so we limit it to 1em here. The height doesn't affect
+   * the rendering of the spinner-buttons; it's only for layout purposes.
+   *
+   * This is a temporary hack until we implement better positioning for the
+   * spin-box in vertical mode; it works OK at default size but less well
+   * if the font-size is made substantially larger or smaller. (Bug 1175074.)
+   */
+  max-height: 1em;
   align-self: center;
   justify-content: center;
 }
 
 input[type=number]::-moz-number-spin-up {
   -moz-appearance: spinner-upbutton;
   display: block; /* bug 926670 */
   flex: none;
--- a/layout/style/number-control.css
+++ b/layout/style/number-control.css
@@ -3,17 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* This file exists purely because we need the styling for input[type=number]
  * to apply only if the pref dom.forms.number is true. Once bug 677302 is
  * fixed this rule can move back to forms.css.
  */
 
 input[type="number"] {
-  writing-mode: horizontal-tb !important; /* XXX remove when bug 1123299 is done */
   -moz-appearance: number-input;
   /* Has to revert some properties applied by the generic input rule. */
   -moz-binding: none;
   inline-size: 20ch; /* It'd be nice if this matched the default inline-size
                         of <input type=text>, but that's not easy to achieve
                         due to platform differences. */
 }