1112954 - Form element select not working correctly in vertical writing-mode

Status: RESOLVED DUPLICATE of bug 1113206

(Core :: Layout: Form Controls, defect)

Description

[siqinbilige]

Attachment: correct.png

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20141217030202

Steps to reproduce:

access form element select sample page
http://www.mongolfont.com/test/firefox/select.html



Actual results:

incorrect.png


Expected results:

correct.png
But we hope , in vertical-lr the select list display left size of the box.

Comment 1

[siqinbilige]

Attachment: incorrect.png

Comment 2

[siqinbilige]

Correction
>But we hope , in vertical-lr the select list display left size of the box.
But we hope , in vertical-lr the select list display right size of the box. (vertical-lr)

Comment 3

[Gérard Talbot]

The options in the mongolian select should be rendered from left (option 1) to right (option 5).
In the screenshot
https://bugzilla.mozilla.org/attachment.cgi?id=8538194
Firefox renders the options from left to right (block flow direction); at least, it got that part correct.

http://www.gtalbot.org/BugzillaSection/Bug1112954SelectVerticalWritingMode-Mongolian.html
You must be using Firefox 38 or higher with layout.css.vertical-text.enabled set to true.

Comment 4

[Gérard Talbot]

Vendor-prefixed tests with default 'text-orientation: mixed'
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Chinese:

  select has size="1":
http://www.gtalbot.org/BugzillaSection/Bug1112954Select-size1-VRL-Chinese.html

  select has size="5":
http://www.gtalbot.org/BugzillaSection/Bug1112954Select-size5-VRL-Chinese.html

* * * * * * * * * * * * * * * 

Japanese:

  select has size="1":
http://www.gtalbot.org/BugzillaSection/Bug1112954Select-size1-VRL-Japanese.html

  select has size="5":
http://www.gtalbot.org/BugzillaSection/Bug1112954Select-size5-VRL-Japanese.html

* * * * * * * * * * * * * * * 

Mongolian:

  select has size="1":
http://www.gtalbot.org/BugzillaSection/Bug1112954Select-size1-VLR-Mongolian.html

  select has size="5":
http://www.gtalbot.org/BugzillaSection/Bug1112954Select-size5-VLR-Mongolian.html


When the select is collapsed (size="1") and then the list of options is being expanded with a left mouse button click, Firefox 44.0a1 buildID=20150927044550 fails the tests.

When the select is expanded (size="5"), Firefox 44.0a1 buildID=20150927044550 passes the tests.

Comment 5

[Jonathan Kew [:jfkthame]]

I suspect the remaining issue here is bug 1170129. To confirm that, could you re-test without e10s enabled (uncheck Enable multi-process Nightly in about:preferences#general)? Thanks.

Comment 6

[Gérard Talbot]

I confirm: without e10s enabled, all 6 tests now passes in Firefox 44.0a1 buildID=20150927044550 .

Comment 7

[Jonathan Kew [:jfkthame]]

OK, I'm going to close this as a duplicate of bug 1113206, which is where we basically fixed <select> for vertical writing modes.

The unfortunate fact that e10s will regress their behavior is bug 1170129, which ideally should be fixed before e10s ships to release, but I doubt it will be considered a blocker given that I don't think there's much content on the web that actually uses vertical form controls.

(If there are current sites that are affected by this, please let us know -- that would be a reason to raise the priority of bug 1170129.)

Comment 8

[siqinbilige]

There is a sample page.
http://www.mongolfont.com/test/firefox/select.html
It seams not working correctly.

Comment 9

[siqinbilige]

Attachment: firefox_select_vertical.png

Comment 10

[Gérard Talbot]

Siqinblilige, 
I tried your test and I get expected results (the list of options expands laterally and not vertically on a left mouse button click of the select) in Firefox 41 and in Firefox 44.0a1 buildID=20150927044550 with e10s disabled.

This is your test with a bunch of modifications (the body 200px margin-left allows the list of options to display leftwardedly for the selects with class rl):

http://www.gtalbot.org/BugzillaSection/Bug1112954-siqinbilige.html

and I get expected results with Firefox 41 (albeit the digits in the chinese select do not appear) and with Firefox 44.0a1 buildID=20150927044550 . I am using Linux Kubuntu 14.04.03 LTS KDE 4.13.3.

I still get expected results even if I remove doctype declaration. I tried to remove many declarations but nevertheless still get expected results: the list of options displayed laterally and not vertically.

What is the exact browser version and buildID (javascript: navigator.buildID) you are using?

Siqinblilige, I believe you are using Windows 7...

Comment 11

[Gérard Talbot]

Siqinblilige, can you retest again your test and all of my tests with e10s disabled, with multi-processus mode disabled like Jonathan Kew explained in comment #5 ? 

Type in the address bar: 
about:preferences#general 
and then uncheck Activate multi-processus mode . Click OK and then Firefox should restart with the same opened tabs

Comment 12

[siqinbilige]

(In reply to Gérard Talbot from comment #10)

I using Firefox Nightly 44.0a1 (2015-09-28) on Windows 7 Ultimate (64bit).

The problem is that the options not vertical in vertical writing mode.

Comment 13

[siqinbilige]

When I uncheck Activate multi-processus mode, it works fine.

Comment 14

[siqinbilige]

By the way, it is better to change the arrow direction.
left in rl mode and right in lr mode.

Comment 15

[siqinbilige]

In http://www.gtalbot.org/BugzillaSection/Bug1112954-siqinbilige.html
It seams that the font-size and font-family not inherit from div to select.

Comment 16

[Jonathan Kew [:jfkthame]]

I believe that in general, form controls do not inherit their font but use the platform's default styling for the type of control involved. You can explicitly ask them to inherit if this is desired:

  select { font: inherit; }

which will override the control's default (system) font.

Comment 17

[Gérard Talbot]

> By the way, it is better to change the arrow direction.
> left in rl mode and right in lr mode.

Isn't that the case? Actual: the select has a pointing-toward-left arrow in vertical-rl and a pointing-toward-right arrow in vertical-lr.

- - - - - 

Yes, you are correct. Selects have, by default, the font declaration: font: -moz-list. 

 select { font: inherit; }

is good. Thanks.

Comment 18

[Jonathan Kew [:jfkthame]]

(In reply to siqinbilige from comment #14)
> By the way, it is better to change the arrow direction.
> left in rl mode and right in lr mode.

This was done in bug 1187605, but from your screenshot it appears this didn't fix it for Windows (and I can confirm the same on Win8.1). Filed bug 1209411 for this.