Fix checkbox, radio baseline position when in vertical writing mode
We update LogicalBoxFragment::BaselineMetrics such that if all following
conditions are met, then the baseline should be centered:
- writing mode is vertical
- control part is radio or checkbox
- baseline type is not alphabetic
Further, for vertical writing mode, we map the correct margin values to
the ascent/descent baseline values.
Change-Id: Ib87b1c412181acb0170bb4ea017383a9eb73df1e
Bug: 1511382
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5123415
Reviewed-by: Di Zhang <dizhangg@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1239547}
diff --git a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional-ref.html b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional-ref.html
index c3f6107..a43403c 100644
--- a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional-ref.html
+++ b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional-ref.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The checkbox should be center-aligned with the label text.</p>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
<div style="writing-mode: vertical-lr">
<input type="checkbox" id="checkbox" checked>
<label for="checkbox">こんにちわ</label>
</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+ <input type="checkbox" id="checkbox" checked>
+ <label for="checkbox">Baseline</label>
+</div>
diff --git a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional.html b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional.html
index b19de13..377a8e8 100644
--- a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional.html
+++ b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-lr-baseline.optional.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The checkbox should be center-aligned with the label text.</p>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
<div style="writing-mode: vertical-lr">
<input type="checkbox" id="checkbox" checked>
<label for="checkbox">こんにちわ</label>
</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+ <input type="checkbox" id="checkbox" checked>
+ <label for="checkbox">Baseline</label>
+</div>
diff --git a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional-ref.html b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional-ref.html
index a253a71..7fe6db3 100644
--- a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional-ref.html
+++ b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional-ref.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The checkbox should be center-aligned with the label text.</p>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
<div style="writing-mode: vertical-rl">
<input type="checkbox" id="checkbox" checked>
<label for="checkbox">こんにちわ</label>
</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+ <input type="checkbox" id="checkbox" checked>
+ <label for="checkbox">Baseline</label>
+</div>
diff --git a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional.html b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional.html
index 3efb211..630a83c 100644
--- a/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional.html
+++ b/css/css-writing-modes/forms/checkbox-appearance-native-vertical-rl-baseline.optional.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The checkbox should be center-aligned with the label text.</p>
+<p>The checkbox should be center-aligned with the label it since text is non-alphabetic.</p>
<div style="writing-mode: vertical-rl">
<input type="checkbox" id="checkbox" checked>
<label for="checkbox">こんにちわ</label>
</div>
+
+<br>
+
+<p>The checkbox should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+ <input type="checkbox" id="checkbox" checked>
+ <label for="checkbox">Baseline</label>
+</div>
diff --git a/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional-ref.html b/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional-ref.html
index 9b09537..6fca076 100644
--- a/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional-ref.html
+++ b/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional-ref.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The radio button should be center-aligned with the label text.</p>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
<div style="writing-mode: vertical-lr">
<input type="radio" id="radio" checked>
<label for="radio">こんにちわ</label>
</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+ <input type="radio" id="radio" checked>
+ <label for="radio">Baseline</label>
+</div>
diff --git a/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional.html b/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional.html
index 8d5bf75..c781003 100644
--- a/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional.html
+++ b/css/css-writing-modes/forms/radio-appearance-native-vertical-lr-baseline.optional.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The radio button should be center-aligned with the label text.</p>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
<div style="writing-mode: vertical-lr">
<input type="radio" id="radio" checked>
<label for="radio">こんにちわ</label>
</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+ <input type="radio" id="radio" checked>
+ <label for="radio">Baseline</label>
+</div>
diff --git a/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional-ref.html b/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional-ref.html
index 95871a5..9e5dda8 100644
--- a/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional-ref.html
+++ b/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional-ref.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The radio button should be center-aligned with the label text.</p>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
<div style="writing-mode: vertical-rl">
<input type="radio" id="radio" checked>
<label for="radio">こんにちわ</label>
</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+ <input type="radio" id="radio" checked>
+ <label for="radio">Baseline</label>
+</div>
diff --git a/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional.html b/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional.html
index 4c5a59a..6f7eed7 100644
--- a/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional.html
+++ b/css/css-writing-modes/forms/radio-appearance-native-vertical-rl-baseline.optional.html
@@ -14,8 +14,16 @@
}
</style>
-<p>The radio button should be center-aligned with the label text.</p>
+<p>The radio button should be center-aligned with the label text since it is non-alphabetic.</p>
<div style="writing-mode: vertical-rl">
<input type="radio" id="radio" checked>
<label for="radio">こんにちわ</label>
</div>
+
+<br>
+
+<p>The radio button should be left-aligned with the label text since it has text-orientation sideways.</p>
+<div style="writing-mode: vertical-rl; text-orientation: sideways;">
+ <input type="radio" id="radio" checked>
+ <label for="radio">Baseline</label>
+</div>
