diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html new file mode 100644 index 000000000000..6deed489163b --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html @@ -0,0 +1,8 @@ + + + + + +
+ + diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html new file mode 100644 index 000000000000..7a78830629d5 --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html @@ -0,0 +1,8 @@ + + + + + +
+ + diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html new file mode 100644 index 000000000000..73a537387727 --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html @@ -0,0 +1,8 @@ + + + + + +
+ + diff --git a/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html new file mode 100644 index 000000000000..3bc3a388a16a --- /dev/null +++ b/layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html @@ -0,0 +1,8 @@ + + + + + +
+ + diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list index 710b05ab98ef..42a9b5be6bf0 100644 --- a/layout/reftests/forms/input/number/reftest.list +++ b/layout/reftests/forms/input/number/reftest.list @@ -10,6 +10,8 @@ skip-if(!Android&&!B2G&&!Mulet) == number-same-as-text-unthemed.html number-same # 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 diff --git a/layout/style/forms.css b/layout/style/forms.css index df901f648c08..b436b2c28a53 100644 --- a/layout/style/forms.css +++ b/layout/style/forms.css @@ -990,17 +990,24 @@ input[type=number]::-moz-number-text { } 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; } diff --git a/layout/style/number-control.css b/layout/style/number-control.css index 0ea55f650853..b4c784cf2743 100644 --- a/layout/style/number-control.css +++ b/layout/style/number-control.css @@ -8,7 +8,6 @@ */ 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;