-webkit-writing-mode: vertical-lr; does not work on input text element. but can work on contenteditable div. 1. http://dev.w3.org/csswg/css-writing-modes/#text-flow 2. http://fantasai.inkedblade.net/style/discuss/vertical-text/#logical-orientation 3. http://fantasai.inkedblade.net/style/discuss/vertical-text/diagrams/mongolian-vectors.jpg
Created attachment 203756 [details] actual
Created attachment 203757 [details] expected
Submitted test on various input and button elements and vertical-lr writing mode: http://test.csswg.org/suites/css-writing-modes-3_dev/nightly-unstable/html/form-controls-vlr-005.htm Note that a) the test uses a "SHOULD": so passing that test is recommended but not required to be able to claim conformance with the spec. b) the tests in all CSS test suites never use vendor prefixes
This issue have a relation to https://bugs.webkit.org/show_bug.cgi?id=70211 https://bugs.webkit.org/attachment.cgi?id=192264&action=diff
Created attachment 315962 [details] Form controls don't go vertical
SiqinBilige, Your attachment 203757 [details] (mongolian_text_expected.PNG expected result) most likely originate from Firefox rendering... but I want to point out that the used content height of text input should not be too tall (approx. 500px in your attachment 203757 [details] screen shot, which is too much), especially since you did not specify the size attribute for that text input in your test/mongolian_text.html test. The default size in HTML5 for text input is 20 characters. More info: https://bugzilla.mozilla.org/show_bug.cgi?id=1387690
The only thing that's broken with the preference on is the painting of the native borders. Needs to be rotated.
<rdar://problem/102633864>
Morphing this issue once again, since the border actually should not get rotated here