Skip to content

Commit

Permalink
Allow input type date etc to have vertical writign mode
Browse files Browse the repository at this point in the history 
This CL allows <input> types "date", "datetime-local", "month", "time",
"week"  to have writing-mode vertical for both the default native
appearance and when appearance is set to none.

We also put the change behind the feature flag
FormControlsVerticalWritingModeSupport so it can be turned on safely.

Note that, for direction RTL, the calendar picker (for both horizontal
and vertical writing mode) is currently only on the right side. That
change will be tackled by issue 1432009.

Change-Id: Ib1aa557109e234ae697a15b5e8cb4eff1360a5d6
Bug: 681917
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4652558
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1166732}
  • Loading branch information
@dizhang168 @pull
dizhang168 authored and pull[bot] committed Jul 21, 2023
1 parent 4c9130d commit 1253275
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 0 deletions.
12 changes: 12 additions & 0 deletions css/css-writing-modes/forms/date-input-appearance-native-horizontal.optional.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=date] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="date-input-appearance-native-vertical.optional.html">
<link rel="mismatch" href="date-input-appearance-none-vertical.optional.html">

<!-- Note test description should be the same across all files to mismatch on. -->
<p>The date input below should match the correct writing mode.</p>
<input type="date">
12 changes: 12 additions & 0 deletions css/css-writing-modes/forms/date-input-appearance-native-vertical.optional.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>native input[type=date] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="date-input-appearance-native-horizontal.optional.html">
<link rel="mismatch" href="date-input-appearance-none-horizontal.optional.html">

<!-- Note test description should be the same across all files to mismatch on. -->
<p>The date input below should match the correct writing mode.</p>
<input type="date" style="writing-mode: vertical-rl">
12 changes: 12 additions & 0 deletions css/css-writing-modes/forms/date-input-appearance-none-horizontal.optional.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=date] in horizontal writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="date-input-appearance-none-vertical.optional.html">
<link rel="mismatch" href="date-input-appearance-native-vertical.optional.html">

<!-- Note test description should be the same across all files to mismatch on. -->
<p>The date input below should match the correct writing mode.</p>
<input type="date" style="appearance: none;">
12 changes: 12 additions & 0 deletions css/css-writing-modes/forms/date-input-appearance-none-vertical.optional.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/#date-state-(type=date)">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>unstyled input[type=date] in vertical writing mode</title>
<meta charset="utf-8">
<link rel="mismatch" href="date-input-appearance-none-horizontal.optional.html">
<link rel="mismatch" href="date-input-appearance-native-horizontal.optional.html">

<!-- Note test description should be the same across all files to mismatch on. -->
<p>The date input below should match the correct writing mode.</p>
<input type="date" style="writing-mode: vertical-lr; appearance: none;">

0 comments on commit 1253275

Please sign in to comment.