Intent to Ship: Form Controls Support Vertical Writing Mode Direction Support

[Di Zhang]

Contact emails

dizh...@chromium.org

Explainer

None

Specification

https://github.com/whatwg/html/issues/8413

Summary

CSS property writing-mode allow elements to go vertical, but users cannot set the direction in which value changes. With this feature, we are allowing the form control elements meter, progress and range input type to have vertical writing mode and choose the form control's value direction. If direction is rtl, the value is rendered from bottom to top. If direction is ltr, the value is rendered from top to bottom. For Web compatibility, we plan to slowly rollout the change in 123 and enable in stable in 124.

Blink component

Blink>Forms

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Chrome: implemented behind flag Safari: implemented behind flag Firefox: implemented for <input type=range> in stable, issue created for meter/progress.

Gecko: No signal

WebKit: In development (https://developer.apple.com/documentation/safari-release-notes/safari-17_4-release-notes) Added support for vertical writing mode support for form controls. (12072686)

Web developers: No signals

Other signals:

Ergonomics

No, there are no other platform APIs this feature will be frequently be used in tandem with.

Activation

It should not be challenging for developers to take advantage of this feature immediately as it is simply using the CSS properties on the desired form control elements.

Security

This is a form control feature and I don't expect security risks.

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

There are no WebView specific changes with this feature.

Debuggability

This feature is debuggable by trying to access the form control element's writing-mode and direction CSS values in DevTools.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes

https://wpt.fyi/results/css/css-writing-modes/forms?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2022-forms%20or%20label%3Ainterop-2023-forms

Flag name on chrome://flags

FormControlsVerticalWritingModeDirectionSupport

Finch feature name

FormControlsVerticalWritingModeDirectionSupport

Requires code in //chrome?

False

Measurement

None

Availability expectation

Feature is available on Web Platform mainline within 12 months of launch in Chrome.

Adoption expectation

Feature is considered a best practice for some use case within 12 months of reaching Web Platform baseline.

Adoption plan

We plan to release this feature in milestone 124 (Finch in 123). Safari has already implemented this feature.

Non-OSS dependencies

Does the feature depend on any code or APIs outside the Chromium open source repository and its open-source dependencies to function?

No

Estimated milestones

Shipping on desktop	124
DevTrial on desktop	123

Shipping on Android	124
DevTrial on Android	123

Shipping on WebView

124

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

HTML spec currently under review: https://github.com/whatwg/html/pull/10096

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5082460523331584

This intent message was generated by Chrome Platform Status.

[Manuel Rego Casasnovas]

On 23/02/2024 21:42, Di Zhang wrote:
> Specification
>
> https://github.com/whatwg/html/issues/8413
> <https://github.com/whatwg/html/issues/8413>

What's the status of this issue? Is there any spec text that needs to
change?

> Interoperability and Compatibility
>
> Chrome: implemented behind flag Safari: implemented behind flag Firefox:
> implemented for <input type=range> in stable, issue created for
> meter/progress.
>
>
>

> /Gecko/: No signal

It seems something is implemented already and you mention there's a bug
for some other things, could you link that bug? Are they currently
working on it?

> /WebKit/: In development
> (https://developer.apple.com/documentation/safari-release-notes/safari-17_4-release-notes <https://developer.apple.com/documentation/safari-release-notes/safari-17_4-release-notes>) Added support for vertical writing mode support for form controls. (12072686)

Has this actually shipped in WebKit or is "in development"?

You first mentioned "Safari: implemented behind flag", but you're
linking to some release notes.

Which parts are shipped in Safari and which are not yet?

> Is this feature fully tested by web-platform-tests

> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?
>
> Yes
>
> https://wpt.fyi/results/css/css-writing-modes/forms?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2022-forms%20or%20label%3Ainterop-2023-forms <https://wpt.fyi/results/css/css-writing-modes/forms?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2022-forms%20or%20label%3Ainterop-2023-forms>

These tests are all passing in Chrome and Safari (only 3 failing in
Firefox). Is this feature adding new tests?

> Open questions about a feature may be a source of future web compat or
> interop issues. Please list open issues (e.g. links to known github
> issues in the project for the feature specification) whose resolution
> may introduce web compat/interop risk (e.g., changing to naming or
> structure of the API in a non-backward-compatible way).
>
> HTML spec currently under review:
> https://github.com/whatwg/html/pull/10096

> <https://github.com/whatwg/html/pull/10096>

Ok, answering my own question on the Spec link, there's indeed a PR
here. How far is this from being merged?

Thanks,
Rego

[Di Zhang]

Based on the release note, the Webkit implementation is already implemented and currently shipping. Everything vertical writing-mode related is shipping, including the changes included in this feature.

https://developer.apple.com/documentation/safari-release-notes/safari-17_4-release-notes

For Gecko, there has been no update. The bug has been open for a year.

https://bugzilla.mozilla.org/show_bug.cgi?id=1801791

This feature is adding a few new WPT tests (listed in the HTML spec PR description [1], specifically [2]).

> How far is this from being merged?

The comments are addressed and I am pinging the HTML reviewers to take a final look.

[1] https://github.com/whatwg/html/pull/10096

[2] https://github.com/web-platform-tests/wpt/commit/7f56feea538b986d5681532c0dcba8c9773cd6c4

[Domenic Denicola]

With my HTML editor hat on, I can confirm the spec PR looks good and only has editorial issues left. It fell between the cracks for 2 weeks; apologies for that.

With my API Owner hat on, LGTM1. There are a few borderline aspects here:

• Security review on ChromeStatus has not yet been completed. However, I trust you will not ship this until that is resolved.
• Technically this does not yet meet the criteria for being exempt from TAG review, since Safari has only shipped to beta and the specification isn't yet merged. However, as mentioned above the spec PR is in good shape, and I think it's unlikely to be worth the TAG's time to perform a review at this stage, for a small change of this sort.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/fb0208e3-06e4-4d8f-8095-7b2d9e7d32f6n%40chromium.org.

[Mike Taylor]

LGTM2

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAM0wra8LmY8A7Z%2BKHhTxnqeaJS6mVChpRoU28qM8%3DOLxzJb80w%40mail.gmail.com.

[Yoav Weiss (@Shopify)]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/0badde60-508b-4754-9d76-b113f2d5eb96%40chromium.org.