Allow Meter element to have writing mode vertical for native appearance
This CL allows <meter> element to have writing-mode vertical for the
native appearance. Currently, Chrome doesn't render the <meter>
element if appearance is set to none [1]. This change is under the flag
FormControlsVerticalWritingModeSupport.
Opened a github PR to update HTML spec [2].
[1] crbug.com/632510
[2] https://github.com/whatwg/html/pull/8536
Change-Id: I68155f146b1608587ad4facb0918b9c054114976
Bug: 681917
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4024368
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1076534}
diff --git a/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html b/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html
new file mode 100644
index 0000000..58e1dae
--- /dev/null
+++ b/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-meter-element-2">
+<title>Meter appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<meter value="40" min="0" max="100" style="writing-mode: horizontal-tb"></meter>
+<meter value="40" min="0" max="100" style="writing-mode: vertical-lr"></meter>
+<meter value="40" min="0" max="100" style="writing-mode: vertical-rl"></meter>
+
+<script>
+test(() => {
+ const meter = document.querySelector(`meter[style="writing-mode: horizontal-tb"]`);
+ const style = getComputedStyle(meter);
+ assert_equals(style.blockSize, "16px");
+ assert_equals(style.inlineSize, "80px");
+ assert_equals(style.blockSize, style.height);
+ assert_equals(style.inlineSize, style.width);
+}, `meter[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`);
+
+for (const writingMode of ["vertical-lr", "vertical-rl"]) {
+ test(() => {
+ const meter = document.querySelector(`meter[style="writing-mode: ${writingMode}"]`);
+ const style = getComputedStyle(meter);
+ assert_equals(style.blockSize, "16px");
+ assert_equals(style.inlineSize, "80px");
+ assert_equals(style.blockSize, style.width);
+ assert_equals(style.inlineSize, style.height);
+ }, `meter[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`);
+};
+</script>
\ No newline at end of file
diff --git a/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html b/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000..7b25e1a
--- /dev/null
+++ b/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The meter element below should match the correct writing mode.</p>
+<meter value="70" min="0" max="100" style="writing-mode: horizontal-tb"></meter>
diff --git a/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html b/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html
new file mode 100644
index 0000000..6beca6b
--- /dev/null
+++ b/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The meter element below should match the correct writing mode.</p>
+<meter value="70" min="0" max="100" style="writing-mode: vertical-rl"></meter>
diff --git a/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html b/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html
index 6bb48bf..47cd65e 100644
--- a/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html
+++ b/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html
@@ -17,7 +17,7 @@
assert_equals(style.inlineSize, "160px");
assert_equals(style.blockSize, style.height);
assert_equals(style.inlineSize, style.width);
-}, `progress[style="writing-mode: horizontal-tb"] block size should match height and inline should match width`);
+}, `progress[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`);
for (const writingMode of ["vertical-lr", "vertical-rl"]) {
test(() => {
@@ -27,6 +27,6 @@
assert_equals(style.inlineSize, "160px");
assert_equals(style.blockSize, style.width);
assert_equals(style.inlineSize, style.height);
- }, `progress[style="writing-mode: ${writingMode}"] block size should match width and inline should match width`);
+ }, `progress[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`);
};
</script>
\ No newline at end of file
