Input write mode consistency

[scottkellum]

Description

Inputs, buttons, and select menus currently don’t respect writing-mode in all browsers. Firefox renders these elements as expected in the correct writing-mode, while Webkit and Chromium based browsers do not.

Rationale

When writing-mode isn’t respected it can create a disjointed and difficult to read experience. This also creates an inconsistent UI for developers to style that can not adequately be targeted with @supports.

Specification

https://drafts.csswg.org/css-writing-modes-4/#block-flow

Tests

No response

[scottkellum]

additional context can be found here: openui/open-ui#600

[foolip]

There are lots of tests in https://wpt.fyi/results/css/css-writing-modes but finding the relevant ones is a challenge.

Here's over 100 tests fitting the description of "Firefox renders these elements as expected in the correct writing-mode, while Webkit and Chromium based browsers do not", that is tests that pass in Firefox but fail in Chrome and Safari:
https://wpt.fyi/results/css/css-writing-modes?label=master&label=experimental&aligned&view=subtest&q=firefox%3Apass%20chrome%3Afail%20safari%3Afail

[foolip]

There are some manual tests in https://wpt.live/css/css-writing-modes/ named form-controls-*, but they seem to all involve vertical text, I can't find a simple RTL test among them. But https://wpt.live/css/css-writing-modes/form-controls-srl-005.xht is at least a test that looks different in Firefox compared to Chrome and Safari.

It looks like a bunch of work on a test list will be needed here.

[gsnedders]

% rg --files-with-matches '<(input|select|button)' css/css-writing-modes | sort -g
css/css-writing-modes/crashtests/orthogonal-percent-height-multicol-crash.html
css/css-writing-modes/crashtests/unicode-bidi-select-crash.html
css/css-writing-modes/form-controls-slr-004.xht
css/css-writing-modes/form-controls-slr-005.xht
css/css-writing-modes/form-controls-srl-004.xht
css/css-writing-modes/form-controls-srl-005.xht
css/css-writing-modes/form-controls-vlr-004.xht
css/css-writing-modes/form-controls-vlr-005.xht
css/css-writing-modes/form-controls-vrl-004.xht
css/css-writing-modes/form-controls-vrl-005.xht
css/css-writing-modes/writing-mode-vlr-012-manual.html
css/css-writing-modes/writing-mode-vlr-014-manual.html
css/css-writing-modes/writing-mode-vlr-forms-001-manual.html
css/css-writing-modes/writing-mode-vlr-forms-002-manual.html
css/css-writing-modes/writing-mode-vlr-forms-005-manual.html
css/css-writing-modes/writing-mode-vlr-forms-006-manual.html
css/css-writing-modes/writing-mode-vrl-012-manual.html
css/css-writing-modes/writing-mode-vrl-014-manual.html
css/css-writing-modes/writing-mode-vrl-forms-001-manual.html
css/css-writing-modes/writing-mode-vrl-forms-002-manual.html
css/css-writing-modes/writing-mode-vrl-forms-005-manual.html
css/css-writing-modes/writing-mode-vrl-forms-006-manual.html

(i.e., this on WPT.fyi, though inevitably this includes very few of them)

[gsnedders]

given the overwhelming majority of those are manual, see https://gist.github.com/gsnedders/cca2affaed6a5a68f0fb9ac750151aa8 for screenshots of them (but that still doesn't work for those that require interaction)

[gsnedders]

Based on that, manually looking at writing-mode-vlr-forms-006-manual.html and writing-mode-vrl-forms-006-manual.html and excluding writing-mode-vlr-012-manual.html, writing-mode-vlr-014-manual.html, writing-mode-vrl-012-manual.html, writing-mode-vrl-014-manual.html as they use form controls incidentally rather than testing them:

	Chrome	Firefox	Safari
form-controls-slr-004.html	FAIL	PASS	FAIL
form-controls-slr-005.html	FAIL	PASS	FAIL
form-controls-srl-004.html	FAIL	PASS	FAIL
form-controls-srl-005.html	FAIL	PASS	FAIL
form-controls-vlr-004.html	FAIL	PASS	FAIL
form-controls-vlr-005.html	FAIL	PASS	FAIL
form-controls-vrl-004.html	FAIL	PASS	FAIL
form-controls-vrl-005.html	FAIL	PASS	FAIL
writing-mode-vlr-forms-001-manual.html	FAIL	PASS	FAIL
writing-mode-vlr-forms-002-manual.html	FAIL	PASS	FAIL
writing-mode-vlr-forms-005-manual.html	FAIL	PASS	FAIL
writing-mode-vlr-forms-006-manual.html	FAIL	FAIL	FAIL
writing-mode-vrl-forms-001-manual.html	FAIL	PASS	FAIL
writing-mode-vrl-forms-002-manual.html	FAIL	PASS	FAIL
writing-mode-vrl-forms-005-manual.html	FAIL	PASS	FAIL
writing-mode-vrl-forms-006-manual.html	FAIL	FAIL	FAIL
Total	0%	88%	0%

[nt1m]

WPTs are being added in this directory: https://wpt.fyi/results/css/css-writing-modes/forms?label=master&label=experimental&aligned&view=subtest

[foolip]

A lot of tests have been mentioned in this issue and I'm not sure which ones are part of the proposal. Is it just the ones in https://wpt.fyi/results/css/css-writing-modes/forms in the end?

[gsnedders]

A lot of tests have been mentioned in this issue and I'm not sure which ones are part of the proposal. Is it just the ones in https://wpt.fyi/results/css/css-writing-modes/forms in the end?

Practically css-writing-modes/form*, but all the automated ones are in css-writing-modes/forms AFAIK.

[nt1m]

The manual ones were moved into css-writing-modes/forms/manual too

[foolip]

Thank you for proposing updated input write mode consistency tests for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as part of the existing Forms focus area. You can follow the progress of this Focus Areas on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.