Add WPT tests for WM vertical and direction RTL for progress, meter, range
Per HTML spec PR, we should add more WPT tests to cover <meter> and
<progress> cases.
https://github.com/whatwg/html/pull/10096
Change-Id: I29afd2d6ff47a4651540904231613f0f8925dbd4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5241236
Auto-Submit: Di Zhang <dizhangg@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1253403}
diff --git a/css/css-writing-modes/forms/meter-appearance-native-horizontal-rtl.optional.html b/css/css-writing-modes/forms/meter-appearance-native-horizontal-rtl.optional.html
new file mode 100644
index 0000000..65bbd65
--- /dev/null
+++ b/css/css-writing-modes/forms/meter-appearance-native-horizontal-rtl.optional.html
@@ -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/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode horizontal & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="meter-appearance-native-vertical-rtl.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; direction: rtl"></meter>
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
index 7b25e1a..1e7a8df 100644
--- a/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html
+++ b/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html
@@ -4,6 +4,7 @@
<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-rtl.optional.html">
<link rel="mismatch" href="meter-appearance-native-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
diff --git a/css/css-writing-modes/forms/meter-appearance-native-vertical-rtl.optional.html b/css/css-writing-modes/forms/meter-appearance-native-vertical-rtl.optional.html
new file mode 100644
index 0000000..e488d8d
--- /dev/null
+++ b/css/css-writing-modes/forms/meter-appearance-native-vertical-rtl.optional.html
@@ -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/#the-meter-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Meter appearance native writing mode vertical & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="meter-appearance-native-horizontal-rtl.optional.html">
+<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: vertical-rl; direction: rtl"></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
index 6beca6b..2205d56 100644
--- a/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html
+++ b/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html
@@ -2,9 +2,10 @@
<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>
+<title>Meter appearance native writing mode vertical</title>
<meta charset="utf-8">
<link rel="mismatch" href="meter-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="meter-appearance-native-vertical-rtl.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>
diff --git a/css/css-writing-modes/forms/progress-appearance-native-horizontal-rtl.optional.html b/css/css-writing-modes/forms/progress-appearance-native-horizontal-rtl.optional.html
new file mode 100644
index 0000000..3190506
--- /dev/null
+++ b/css/css-writing-modes/forms/progress-appearance-native-horizontal-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance native writing mode horizontal & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-none-horizontal-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The range input below should match the correct writing mode & direction.</p>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; direction: rtl"></progress>
diff --git a/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html b/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html
index ad7d2aa..bdda286 100644
--- a/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html
+++ b/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html
@@ -4,8 +4,9 @@
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Progress appearance native writing mode horizontal</title>
<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-native-horizontal-rtl.optional.html">
<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
-<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
diff --git a/css/css-writing-modes/forms/progress-appearance-native-vertical-rtl.optional.html b/css/css-writing-modes/forms/progress-appearance-native-vertical-rtl.optional.html
new file mode 100644
index 0000000..9a1834e
--- /dev/null
+++ b/css/css-writing-modes/forms/progress-appearance-native-vertical-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance native writing mode vertical & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-native-horizontal-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: vertical-rl; direction: rtl"></progress>
diff --git a/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html b/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html
index 38ca538..5ddfa20 100644
--- a/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html
+++ b/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html
@@ -5,7 +5,8 @@
<title>Progress appearance native writing mode vertical</title>
<meta charset="utf-8">
<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
-<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
diff --git a/css/css-writing-modes/forms/progress-appearance-none-horizontal-rtl.optional.html b/css/css-writing-modes/forms/progress-appearance-none-horizontal-rtl.optional.html
new file mode 100644
index 0000000..4276cac
--- /dev/null
+++ b/css/css-writing-modes/forms/progress-appearance-none-horizontal-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance none writing mode horizontal & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-horizontal-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; appearance: none; direction: rtl"></progress>
diff --git a/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html b/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html
index adb0570..cda8a00 100644
--- a/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html
+++ b/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html
@@ -4,8 +4,9 @@
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Progress appearance none writing mode horizontal</title>
<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-none-horizontal-rtl.optional.html">
<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
-<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
diff --git a/css/css-writing-modes/forms/progress-appearance-none-vertical-rtl.optional.html b/css/css-writing-modes/forms/progress-appearance-none-vertical-rtl.optional.html
new file mode 100644
index 0000000..56baeb4
--- /dev/null
+++ b/css/css-writing-modes/forms/progress-appearance-none-vertical-rtl.optional.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#the-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Progress appearance none writing mode vertical & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="progress-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-none-horizontal-rtl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The progress element below should match the correct writing mode.</p>
+<progress value="70" min="0" max="100" style="appearance: none; writing-mode: vertical-rl; direction: rtl"></progress>
diff --git a/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html b/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html
index db9aac2..b02f725 100644
--- a/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html
+++ b/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html
@@ -5,7 +5,8 @@
<title>Progress appearance none writing mode vertical</title>
<meta charset="utf-8">
<link rel="mismatch" href="progress-appearance-none-horizontal.optional.html">
-<link rel="mismatch" href="progress-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="progress-appearance-none-vertical-rtl.optional.html">
+<link rel="mismatch" href="progress-appearance-native-vertical.optional.html">
<!-- Note test description should be the same across all files to mismatch on. -->
<p>The progress element below should match the correct writing mode.</p>
