Vertical form controls not well supported

[r12a]

This issue is applicable to all languages that are written vertically.

All boxes used for form input should contain vertical text, should be rotated so that they progress down the page, and their content should progress in vertical lines from left to right. See User interaction in the requirements document. This is particularly important for Mongolian, among vertically set orthographies, because horizontal lines don't work.

Specs:
css-writing-modes-3 specifies the requirements for vertical text support, including examples of form controls rendered to match the writing mode.

Tests & results:
i18n test suite, Forms
Only Gecko vertically orients forms, but in pull-down select boxes it doesn't vertically orientate the selection options. Blink and Webkit fail to orient forms vertically at all. (The tests use Japanese text and don't check whether lines flow left to right for Mongolian.)

Here are some other tests, again in Japanese: standard syntax • proprietary syntax

Browser bug reports:
WebKit. The WebKit source has

358 /* Form controls don't go vertical. */
359 input, textarea, keygen, select, button, meter, progress {
360 -webkit-writing-mode: horizontal-tb !important;
361 }

Priority:
This has a significant impact for creation of general web sites.

For more details, see this GitHub issue, which is being used to track this gap. Please add any discussion there, and not to this issue.

[r12a]

The first comment in this issue contains text that will automatically appear in one or more gap-analysis documents as a subsection with the same title as this issue. Any edits made to that comment will be immediately available in the Editor's draft of the document.

Please add any discussion to the GitHub issue being used to track this gap, and not to this issue

[siqinbilige]

As reference,

It worked before until this issue was fixed.
https://bugs.webkit.org/show_bug.cgi?id=70211

Pay attention on Comment 13 by Dave Hyatt.
"This patch simply preps the code. It doesn't turn on vertical writing yet. I'm thinking the best approach for form controls is to slowly prep the code while leaving the feature off, and then once we have them all converted, we can worry about turning this on."

So, The vertical forms not working on Webkit, Safari, Chrome, Oprea and other browse using Webkit and Blink engine.

https://github.com/WebKit/webkit/blob/master/Source/WebCore/css/html.css

358 /* Form controls don't go vertical. */
359 input, textarea, keygen, select, button, meter, progress {
360 -webkit-writing-mode: horizontal-tb !important;
361 }

[r12a]

@siqinbilige I added some of your information to the text so that it will be displayed in the GA document. I'd like to add you to the Acknowledgements section. How would you like me to add your name?

[xfq]

We should probably add a link to w3c/clreq#247

[r12a]

We should probably add a link to w3c/clreq#247

Done.