Bug 117229 - -webkit-writing-mode: vertical-lr; does not work on input text elements.
Summary: -webkit-writing-mode: vertical-lr; does not work on input text elements.
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: http://www.mongolfont.com/test/mongol...
Depends on: 112488
  Show dependency treegraph
Reported: 2013-06-05 00:10 PDT by SiqinBilige
Modified: 2017-08-05 14:01 PDT (History)
1 user (show)

See Also:

actual (1.58 KB, image/png)
2013-06-05 00:11 PDT, SiqinBilige
no flags Details
expected (2.23 KB, image/png)
2013-06-05 00:11 PDT, SiqinBilige
no flags Details
Form controls don't go vertical (8.31 KB, image/png)
2017-07-19 18:53 PDT, SiqinBilige
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description SiqinBilige 2013-06-05 00:10:34 PDT
-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
Comment 1 SiqinBilige 2013-06-05 00:11:11 PDT
Created attachment 203756 [details]
Comment 2 SiqinBilige 2013-06-05 00:11:34 PDT
Created attachment 203757 [details]
Comment 3 Gérard Talbot 2017-07-19 11:55:47 PDT
Submitted test on various input and button elements and vertical-lr writing mode:


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
Comment 5 SiqinBilige 2017-07-19 18:53:52 PDT
Created attachment 315962 [details]
Form controls don't go vertical
Comment 6 Gérard Talbot 2017-08-05 14:01:41 PDT

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: