Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 21:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jonathan Kew 2015-06-16 11:07:22 +01:00
parent 8fde9bc26f
commit 674cd507a1
7 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr-ref.html Normal file
View File

@ -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>

8
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-lr.html Normal file
View File

@ -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>

8
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl-ref.html Normal file
View File

@ -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>

8
layout/reftests/forms/input/number/number-similar-to-text-unthemed-vertical-rl.html Normal file
View File

@ -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>

2
layout/reftests/forms/input/number/reftest.list
View File

@ -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

13
layout/style/forms.css
View File

@ -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;
}

1
layout/style/number-control.css
View File

@ -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;