Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-writing-modes/forms
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
60 files changed, 2266 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..ef5fc29fcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=color] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="color-input-appearance-none-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..9e19f51eb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-native-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=color] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="color-input-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color" style="writing-mode: vertical-rl">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..bfe8839395
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=color] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="color-input-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color" style="appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..a6ce538679
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/color-input-appearance-none-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#color-state-(type=color)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=color] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="color-input-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="color-input-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The color input below should match the correct writing mode.</p>
+<input type="color" style="writing-mode: vertical-lr; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-007-manual.xht
new file mode 100644
index 0000000000..7774f4b617
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-007-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'sideways-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'sideways-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      writing-mode: sideways-lr;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/form-controls-slr.png" width="180" height="185" alt="Image download support must be enabled" />
+<!--
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from bottom to top and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's righthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are rotated 90 degrees counter-clockwise.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-008-manual.xht
new file mode 100644
index 0000000000..35b4ace523
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-slr-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'sideways-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'sideways-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from bottom to top, b) the glyphs must be rotated 90° counter-clockwise and c) the block flow direction must be from left to right." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: sideways-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° counter-clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-007-manual.xht
new file mode 100644
index 0000000000..37f4bb4733
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-007-manual.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'sideways-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'sideways-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      margin-left: 7em;
+      writing-mode: sideways-rl;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/form-controls-srl.png" width="180" height="185" alt="Image download support must be enabled" />
+<!--
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from top to bottom and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's lefthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are rotated 90 degrees clockwise.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-008-manual.xht
new file mode 100644
index 0000000000..f092ecc1d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-srl-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'sideways-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'sideways-rl' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from right to left." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: sideways-rl;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the right of the page and with Text sample10 on the left and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-001-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-001-manual.html
new file mode 100644
index 0000000000..a6ce755f71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-001-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, input type=text</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="flags" content="should"/>
+<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+input { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<input type="text" value="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" />
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-002-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-002-manual.html
new file mode 100644
index 0000000000..9f331a0ec8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-002-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, input type=text placeholder</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="flags" content="should"/>
+<meta name="assert" content="writing-mode:vertical-lr will display an input field for text vertically, and with vertical placeholder text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+input { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<input type="text" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ" />
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-003-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-003-manual.html
new file mode 100644
index 0000000000..624cd242cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-003-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, textarea</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="flags" content="should"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+textarea { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<textarea rows="3">ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ</textarea>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-004-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-004-manual.html
new file mode 100644
index 0000000000..ce11f1fcb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-004-manual.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, textarea placeholder</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="flags" content="should"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a textarea field vertically, and with vertical placeholder text inside."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+textarea { font-family: webfont; font-size: 34px; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the input field is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<textarea rows="3" placeholder="ᠮᠤᠩᠭᠤᠯ W3C i18n ᠤᠯᠤᠰ"></textarea>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-005-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-005-manual.html
new file mode 100644
index 0000000000..c2bf8bb00b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-005-manual.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, select, selected item</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="flags" content="should"/>
+<meta name="assert" content="writing-mode:vertical-lr will display a select box vertically, and the selected item will be displayed vertically."/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+select { font-family: webfont; font-size: 24px; }
+.test { text-align: center; vertical-align: middle; width: 100%; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the displayed selection area is vertical and the text inside it has default vertical settings.</p>
+<div class="test">
+<select>
+<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option>
+<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option>
+<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option>
+</select>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-006-manual.html b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-006-manual.html
new file mode 100644
index 0000000000..78416009a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-006-manual.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>writing mode:vertical-lr, select, options</title>
+<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#block-flow"/>
+<meta name="assert" content="writing-mode:vertical-lr will display selection options vertically."/>
+<meta name="flags" content="should"/>
+<style type="text/css">
+@font-face {
+    font-family: 'webfont';
+    src: 	url('/fonts/noto/NotoSansMongolian-regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+	}
+select { font-family: webfont; font-size: 24px; }
+.test { text-align: center; vertical-align: middle; width: 100%; }
+</style>
+<!-- this is the test -->
+<style type="text/css">
+.test { writing-mode: vertical-lr; }
+</style>
+</head>
+<body>
+<p class="instructions">Test passes if the selection options displayed when you click on the selector are vertical.</p>
+<div class="test">
+<select>
+<option value="1">ᠮᠤᠩᠭᠤᠯ item 1 ᠤᠯᠤᠰ</option>
+<option value="2">ᠮᠤᠩᠭᠤᠯ item 2 ᠤᠯᠤᠰ</option>
+<option value="3">ᠮᠤᠩᠭᠤᠯ item 3 ᠤᠯᠤᠰ</option>
+</select>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-007-manual.xht
new file mode 100644
index 0000000000..8d5f5c9280
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-007-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-lr'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      writing-mode: vertical-lr;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/form-controls-vlr.png" width="188" height="228" alt="Image download support must be enabled" />
+<!--
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from top to bottom and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's righthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are translated upright.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht
new file mode 100644
index 0000000000..9f103e10f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vlr-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'vertical-lr' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-lr' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from left to right." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: vertical-lr;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the left of the page and with Text sample10 on the right and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-007-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-007-manual.xht
new file mode 100644
index 0000000000..89ad197a57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-007-manual.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: order, orientation and layout of form controls in 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="bookmark" type="image/png" href="http://www.w3.org/TR/css-writing-modes-3/vertical-form.png" title="Screenshot of vertical layout of form controls and characters" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="image should" name="flags" />
+  <meta content="This test checks the order, the flow, the orientation and layout of form controls used in Example 4 of section 3.1 when the 'writing-mode' of the whole form element is set to 'vertical-rl'." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 18px;
+      margin-left: 7em;
+      writing-mode: vertical-rl;
+    }
+
+  select
+    {
+      vertical-align: top;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <form action="">
+    <p><label>姓名　<input value="艾俐俐" size="10" /></label></p>
+
+    <p><label>语言　<select size="1"><option>English</option>
+                         <option>français</option>
+                         <option>فارسی</option>
+                         <option>中文</option>
+                         <option>日本語</option></select></label></p>
+  </form>
+
+  <p>Test passes if the characters and form controls of the form above have the <strong>same order</strong>, the <strong>same orientation</strong> and the <strong>same layout</strong> as the ones of the form below:</p>
+
+  <p><img src="support/vertical-form.png" width="182" height="266" alt="Image download support must be enabled" />
+<!--
+  original source of the image is:
+  http://www.w3.org/TR/css-writing-modes-3/vertical-form.png
+  Long description of image:
+  Screenshot of vertical layout: the input element is laid lengthwise
+  from top to bottom and its content rendered in a vertical writing mode,
+  matching the label outside it. The drop-down selection control (located on
+  the input element's lefthand side) slides out to the side (towards the
+  after edge of the block) rather than downward as it would in horizontal writing mode.
+  The Asian glyphs in the input element and in the drop-down selection
+  control are translated upright.
+-->
+  </p>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-008-manual.xht b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-008-manual.xht
new file mode 100644
index 0000000000..f873373ca9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/form-controls-vrl-008-manual.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: form controls in 'vertical-rl' writing-mode</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#block-flow" title="3.1 Block Flow Direction: the writing-mode property" />
+
+  <meta content="should" name="flags" />
+  <meta content="This test checks the rendering of various form controls (select, optgroup, options, various types of input and buttons) written with latin text in 'vertical-rl' writing mode. The text of replaced content should match the replaced element's writing mode and line orientation; therefore, in this test, a) the text's inline base direction must be from top to bottom, b) the glyphs must be rotated 90° clockwise and c) the block flow direction must be from right to left." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  form
+    {
+      font-size: 1.25em;
+      writing-mode: vertical-rl;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if a) the form controls are appearing with Text sample1 on the right of the page and with Text sample10 on the left and if b) each of the 10 "Text sample" in the form controls are <strong>rotated 90° clockwise</strong>.</p>
+
+  <form action="">
+
+    <p><input value="Text sample1" size="12" /></p>
+
+    <p>
+      <select size="3">
+        <optgroup label="Text sample2">
+          <option>Text sample3</option>
+          <option>Text sample4</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <p><textarea cols="12" rows="2">Text sample5</textarea></p>
+
+    <p><input type="button" value="Text sample6" /></p>
+
+    <p><input type="submit" value="Text sample7" /></p>
+
+    <p><input type="reset" value="Text sample8" /></p>
+
+    <p><button type="button">Text sample9</button></p>
+
+    <p><button type="submit">Text sample10</button></p>
+
+  </form>
+
+ </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-slr.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-slr.png
new file mode 100644
index 0000000000..ac9b2a3072
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-slr.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-srl.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-srl.png
new file mode 100644
index 0000000000..da9d401f91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-srl.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-vlr.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-vlr.png
new file mode 100644
index 0000000000..ebe4df21f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/form-controls-vlr.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/vertical-form.png b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/vertical-form.png
new file mode 100644
index 0000000000..53a3af92cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/manual/support/vertical-form.png
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-computed-style.optional.html
new file mode 100644
index 0000000000..58e1daee47
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..7b25e1a900
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/meter-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..6beca6bfa1
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow-ref.html
new file mode 100644
index 0000000000..ad1ecc35ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Reference: Number input in vertical writing mode with long value does not cause ink overflow</title>
+<p>Number input with long value does not cause ink overflow</p>
+<style>
+    input {
+        writing-mode: vertical-lr;
+        appearance: none;
+        inline-size: 10em;
+    }
+</style>
+<input type="number">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow.html b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow.html
new file mode 100644
index 0000000000..dfd8100a01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/number-input-vertical-overflow.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Number input in vertical writing mode with long value does not cause ink overflow</title>
+<meta charset="utf-8">
+<link rel="match" href="number-input-vertical-overflow-ref.html">
+<style>
+    input {
+        writing-mode: vertical-lr;
+        color: transparent;
+        appearance: none;
+        inline-size: 10em;
+    }
+</style>
+<p>Number input with long value does not cause ink overflow</p>
+<input type="number" value="11111111111111111111111111111111111">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-computed-style.optional.html
new file mode 100644
index 0000000000..47cd65ecf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-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-progress-element-2">
+<title>Progress appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<progress value="30" min="0" max="100" style="writing-mode: horizontal-tb"></progress>
+<progress value="30" min="0" max="100" style="writing-mode: vertical-lr"></progress>
+<progress value="30" min="0" max="100" style="writing-mode: vertical-rl"></progress>
+
+<script>
+test(() => {
+  const progress = document.querySelector(`progress[style="writing-mode: horizontal-tb"]`);
+  const style = getComputedStyle(progress);
+  assert_equals(style.blockSize, "16px");
+  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 size should match width`);
+
+for (const writingMode of ["vertical-lr", "vertical-rl"]) {
+  test(() => {
+    const progress = document.querySelector(`progress[style="writing-mode: ${writingMode}"]`);
+    const style = getComputedStyle(progress);
+    assert_equals(style.blockSize, "16px");
+    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 size should match height`);
+};
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..ad7d2aa447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-horizontal.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-progress-element">
+<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-vertical.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>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..38ca538b09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-native-vertical.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-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<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">
+
+<!-- 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"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..adb05704c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.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-progress-element">
+<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-vertical.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>
+<progress value="70" min="0" max="100" style="writing-mode: horizontal-tb; appearance: none;"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..db9aac21f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/progress-appearance-none-vertical.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-progress-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<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">
+
+<!-- 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-lr; appearance: none;"></progress>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html
new file mode 100644
index 0000000000..9382f890fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in horizontal writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.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>
+<input type="range" min="0" max="100" value="10" style="direction: rtl">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..1651d83326
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-vertical.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>
+<input type="range" min="0" max="100" value="10">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html
new file mode 100644
index 0000000000..74b24b56af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in vertical writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-vertical.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>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-rl; direction: rtl;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html
new file mode 100644
index 0000000000..ca7eb994ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native input[type=range] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.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>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-rl">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html
new file mode 100644
index 0000000000..c1485688d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in horizontal writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.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>
+<input type="range" min="0" max="100" value="10" style="direction: rtl; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..1f4bfe4c68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-vertical.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>
+<input type="range" min="0" max="100" value="10" style="appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html
new file mode 100644
index 0000000000..a4696e40c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in vertical writing mode & RTL direction</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-vertical.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-vertical.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>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-lr; direction: rtl; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html
new file mode 100644
index 0000000000..9c151c659e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled input[type=range] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="range-input-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="range-input-appearance-native-horizontal.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>
+<input type="range" min="0" max="100" value="10" style="writing-mode: vertical-lr; appearance: none;">
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-painting-ref.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-painting-ref.html
new file mode 100644
index 0000000000..650a8139ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-painting-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<title>Reference: painting of input[type=range] does not happen outside of its bounds</title>
+<p>The range input below should be fully covered.</p>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html
new file mode 100644
index 0000000000..03e02b10a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test that painting of input[type=range] does not happen outside of its bounds</title>
+<meta charset="utf-8">
+<link rel="match" href="range-input-painting-ref.html">
+
+<style>
+    #container {
+        position: relative;
+    }
+    #cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+    }
+    @supports (writing-mode: vertical-lr) {
+        #cover {
+            background-color: Canvas;
+        }
+    }
+    input {
+        appearance: none;
+        writing-mode: vertical-lr;
+    }
+</style>
+
+<p>The range input below should be fully covered.</p>
+
+<div id="container">
+    <input type="range">
+    <div id="cover"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html
new file mode 100644
index 0000000000..8c7d234db5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#range-state-(type=range)">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test that painting of input[type=range] does not happen outside of its bounds</title>
+<meta charset="utf-8">
+<link rel="match" href="range-input-painting-ref.html">
+
+<style>
+    #container {
+        position: relative;
+    }
+    #cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+    }
+    @supports (writing-mode: vertical-lr) and (direction: rtl) {
+        #cover {
+            background-color: Canvas;
+        }
+    }
+    input {
+        appearance: none;
+        writing-mode: vertical-lr;
+        direction: rtl;
+    }
+</style>
+
+<p>The range input below should be fully covered.</p>
+
+<div id="container">
+    <input type="range">
+    <div id="cover"></div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..57b84109a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native select[multiple] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html
new file mode 100644
index 0000000000..dcec498ff0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-lr">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html
new file mode 100644
index 0000000000..bdad9390c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-rl">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..784451c336
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled select[multiple] in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="appearance: none">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html
new file mode 100644
index 0000000000..6099eb271d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-lr; appearance: none">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html
new file mode 100644
index 0000000000..dfb0269b66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled select[multiple] in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-multiple-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="select-multiple-appearance-native-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select below should match the correct writing mode.</p>
+<select multiple style="writing-mode: vertical-rl; appearance: none">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+    <option>Option 6</option>
+    <option>Option 7</option>
+    <option>Option 8</option>
+    <option>Option 9</option>
+    <option>Option 10</option>
+    <option>Option 11</option>
+    <option>Option 12</option>
+    <option>Option 13</option>
+    <option>Option 14</option>
+    <option>Option 15</option>
+    <option>Option 16</option>
+    <option>Option 17</option>
+    <option>Option 18</option>
+    <option>Option 19</option>
+    <option>Option 20</option>
+    <option>Option 21</option>
+    <option>Option 22</option>
+    <option>Option 23</option>
+    <option>Option 24</option>
+    <option>Option 25</option>
+    <option>Option 26</option>
+    <option>Option 27</option>
+    <option>Option 28</option>
+    <option>Option 29</option>
+    <option>Option 30</option>
+    <option>Option 31</option>
+    <option>Option 32</option>
+    <option>Option 33</option>
+    <option>Option 34</option>
+    <option>Option 35</option>
+    <option>Option 36</option>
+    <option>Option 37</option>
+    <option>Option 38</option>
+    <option>Option 39</option>
+    <option>Option 40</option>
+    <option>Option 41</option>
+    <option>Option 42</option>
+    <option>Option 43</option>
+    <option>Option 44</option>
+    <option>Option 45</option>
+    <option>Option 46</option>
+    <option>Option 47</option>
+    <option>Option 48</option>
+    <option>Option 49</option>
+    <option>Option 50</option>
+    <option>Option 51</option>
+    <option>Option 52</option>
+    <option>Option 53</option>
+    <option>Option 54</option>
+    <option>Option 55</option>
+    <option>Option 56</option>
+    <option>Option 57</option>
+    <option>Option 58</option>
+    <option>Option 59</option>
+    <option>Option 60</option>
+    <option>Option 61</option>
+    <option>Option 62</option>
+    <option>Option 63</option>
+    <option>Option 64</option>
+    <option>Option 65</option>
+    <option>Option 66</option>
+    <option>Option 67</option>
+    <option>Option 68</option>
+    <option>Option 69</option>
+    <option>Option 70</option>
+    <option>Option 71</option>
+    <option>Option 72</option>
+    <option>Option 73</option>
+    <option>Option 74</option>
+    <option>Option 75</option>
+    <option>Option 76</option>
+    <option>Option 77</option>
+    <option>Option 78</option>
+    <option>Option 79</option>
+    <option>Option 80</option>
+    <option>Option 81</option>
+    <option>Option 82</option>
+    <option>Option 83</option>
+    <option>Option 84</option>
+    <option>Option 85</option>
+    <option>Option 86</option>
+    <option>Option 87</option>
+    <option>Option 88</option>
+    <option>Option 89</option>
+    <option>Option 90</option>
+    <option>Option 91</option>
+    <option>Option 92</option>
+    <option>Option 93</option>
+    <option>Option 94</option>
+    <option>Option 95</option>
+    <option>Option 96</option>
+    <option>Option 97</option>
+    <option>Option 98</option>
+    <option>Option 99</option>
+    <option>Option 100</option>
+</select>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html
new file mode 100644
index 0000000000..ffaba9fe55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area">
+<title>Test &lt;select&gt; multiple attribute scroll progression</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select multiple size="5"></select>
+<script>
+const select = document.querySelector("select");
+for (let i = 0; i < 100; i++) {
+    const option = document.createElement("option");
+    option.textContent = `Option ${i + 1}`;
+    select.appendChild(option);
+}
+
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const scrollBlockAxis = (() => {
+        switch (writingMode) {
+        case "horizontal-tb":
+            return "scrollTop";
+        case "vertical-lr":
+        case "sideways-lr":
+        case "vertical-rl":
+        case "sideways-rl":
+            return "scrollLeft";
+        }
+    })();
+    const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop";
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const clientBlock = isHorizontal ? "clientHeight" : "clientWidth";
+    const clientInline = isHorizontal ? "clientWidth" : "clientHeight";
+    const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth";
+    const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight";
+
+    test(t => {
+        select.scrollTop = select.scrollLeft = 0;
+        select.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            select.removeAttribute("style");
+            select.scrollTop = select.scrollLeft = 0;
+        });
+
+        assert_true(
+            select[scrollBlock] > select[clientBlock],
+            "select should be scrollable in block axis"
+        );
+        assert_equals(
+            select[scrollInline], select[clientInline],
+            "select should not be scrollable in inline axis"
+        );
+
+        assert_equals(
+            select[scrollBlockAxis], 0,
+            `scrolling is initially at block start for writing-mode: ${writingMode}`
+        );
+
+        const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
+        select[scrollBlockAxis] = 100;
+        if (!isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] > 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollBlockAxis] = -100;
+        if (isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] < 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollInlineAxis] = 100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}`
+        );
+        select[scrollInlineAxis] = -100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}`
+        );
+    }, `select[multiple][style="writing-mode: ${writingMode}"] scrolls correctly`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html
new file mode 100644
index 0000000000..d70e018da7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#scrolling-area">
+<title>Test &lt;select&gt; size attribute scroll progression and sizing</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select size="5"></select>
+<script>
+const select = document.querySelector("select");
+for (let i = 0; i < 100; i++) {
+    const option = document.createElement("option");
+    option.textContent = `Option ${i + 1}`;
+    select.appendChild(option);
+}
+
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const scrollBlockAxis = (() => {
+        switch (writingMode) {
+        case "horizontal-tb":
+            return "scrollTop";
+        case "vertical-lr":
+        case "sideways-lr":
+        case "vertical-rl":
+        case "sideways-rl":
+            return "scrollLeft";
+        }
+    })();
+    const scrollInlineAxis = scrollBlockAxis === "scrollTop" ? "scrollLeft" : "scrollTop";
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const clientBlock = isHorizontal ? "clientHeight" : "clientWidth";
+    const clientInline = isHorizontal ? "clientWidth" : "clientHeight";
+    const scrollBlock = isHorizontal ? "scrollHeight" : "scrollWidth";
+    const scrollInline = isHorizontal ? "scrollWidth" : "scrollHeight";
+
+    const select = document.querySelector("select");
+
+    test(t => {
+        select.scrollTop = select.scrollLeft = 0;
+        select.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            select.removeAttribute("style");
+            select.scrollTop = select.scrollLeft = 0;
+        });
+
+        assert_true(
+            select[scrollBlock] > select[clientBlock],
+            "select should be scrollable in block axis"
+        );
+        assert_equals(
+            select[scrollInline], select[clientInline],
+            "select should not be scrollable in inline axis"
+        );
+
+        assert_equals(
+            select[scrollBlockAxis], 0,
+            `scrolling is initially at block start for writing-mode: ${writingMode}`
+        );
+
+        const isReversedBlockFlowDirection = writingMode.endsWith("-rl");
+        select[scrollBlockAxis] = 100;
+        if (!isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] > 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a positive value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollBlockAxis] = -100;
+        if (isReversedBlockFlowDirection) {
+            assert_true(
+                select[scrollBlockAxis] < 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list works for writing-mode: ${writingMode}`
+            );
+        } else {
+            assert_equals(
+                select[scrollBlockAxis], 0,
+                `Setting ${scrollBlockAxis} to a negative value of the list does not work for writing-mode: ${writingMode}`
+            );
+        }
+
+        select[scrollInlineAxis] = 100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a positive value should not scroll for writing-mode: ${writingMode}`
+        );
+        select[scrollInlineAxis] = -100;
+        assert_equals(
+            select[scrollInlineAxis], 0,
+            `setting ${scrollInlineAxis} to a negative value should not scroll for writing-mode: ${writingMode}`
+        );
+    }, `select[size][style="writing-mode: ${writingMode}"] scrolls correctly`);
+
+    test(t => {
+        select.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            select.removeAttribute("style");
+            select.size = 5;
+        });
+
+        let prevBlockSize = select[clientBlock];
+        let prevInlineSize = select[clientInline];
+        select.size = 10;
+        assert_true(
+            select[clientBlock] > prevBlockSize,
+            `${clientBlock} increased when increasing size`
+        );
+        assert_equals(
+            select[clientInline], prevInlineSize,
+            `${clientInline} did not change when increasing size`
+        );
+
+        prevBlockSize = select[clientBlock];
+        prevInlineSize = select[clientInline];
+        select.size = 8;
+        assert_true(
+            select[clientBlock] < prevBlockSize,
+            `${clientBlock} decreased when decreasing size`
+        );
+        assert_equals(
+            select[clientInline], prevInlineSize,
+            `${clientInline} did not change when decreasing size`
+        );
+    }, `select[size][style="writing-mode: ${writingMode}"] sizing works correctly`);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/text-input-block-size.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-block-size.optional.html
new file mode 100644
index 0000000000..75b679e2cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-block-size.optional.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test block-size of text-based inputs is consistent across writing-modes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+    input { appearance: none }
+</style>
+
+<input id="horizontalInput">
+<input id="verticalInput">
+
+<script>
+for (const inputType of ["text", "email", "password", "search", "tel", "url", "number"]) {
+    horizontalInput.type = inputType;
+    verticalInput.type = inputType;
+    for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+        if (!CSS.supports(`writing-mode: ${writingMode}`))
+            continue;
+        test(t => {
+            verticalInput.style.writingMode = writingMode;
+            t.add_cleanup(() => {
+                verticalInput.removeAttribute("style");
+            });
+
+            const verticalRect = verticalInput.getBoundingClientRect();
+            assert_true(
+                verticalRect.width < verticalRect.height,
+                "input has correct aspect ratio for default input size"
+            );
+
+            const horizontalRect = horizontalInput.getBoundingClientRect();
+            assert_equals(
+                Math.round(verticalRect.width),
+                Math.round(horizontalRect.height),
+                "width of vertical input matches height of horizontal input"
+            );
+        }, `Test input[type=${inputType}] block-size in writing-mode: ${writingMode}`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html
new file mode 100644
index 0000000000..c288d6472c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-input-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Test that typing lots of characters inside vertical text inputs doesn't cause scroll position changes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+    .spacer {
+        height: 100vh;
+    }
+    input { font-family: monospace; }
+</style>
+
+<div class="spacer"></div>
+<input id="testInput">
+<div class="spacer"></div>
+
+<script>
+for (const inputType of ["text", "password", "search", "number"]) {
+    testInput.type = inputType;
+    for (const writingMode of ["vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+        if (!CSS.supports("writing-mode", writingMode))
+            continue;
+        promise_test(async t => {
+            assert_true(
+                document.documentElement.scrollHeight > document.documentElement.clientHeight,
+                "Page is scrollable"
+            );
+            testInput.style.writingMode = writingMode;
+            document.documentElement.scrollTop = 0;
+            t.add_cleanup(() => {
+                document.documentElement.scrollTop = 0;
+                testInput.value = "";
+            });
+
+            // Align input to the bottom edge
+            testInput.scrollIntoView({block: "end", inline: "nearest"});
+
+            assert_true(
+                document.documentElement.scrollTop > 0,
+                "Successfully scrolled"
+            );
+
+            const oldScrollTop = document.documentElement.scrollTop;
+
+            const numCharsToOverflow = document.documentElement.clientHeight / parseInt(getComputedStyle(testInput).fontSize);
+            const value = "1".repeat(numCharsToOverflow);
+
+            await test_driver.click(testInput);
+
+            assert_true(testInput.matches(":focus"), "input is focused");
+
+            await test_driver.send_keys(testInput, value);
+
+            assert_equals(
+                document.documentElement.scrollTop,
+                oldScrollTop,
+                "Typing lots of characters in input did not cause scrolling"
+            );
+        }, `input[type=${inputType}] in ${writingMode}: typing characters in input should not cause the page to scroll`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-horizontal.optional.html
new file mode 100644
index 0000000000..79c54d5063
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-horizontal.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native textarea in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea>Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vlr.optional.html
new file mode 100644
index 0000000000..3ce811fd69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vlr.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-lr">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vrl.optional.html
new file mode 100644
index 0000000000..c5f8b4c311
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-native-vrl.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>native textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-rl">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-horizontal.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-horizontal.optional.html
new file mode 100644
index 0000000000..be4dde195e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-horizontal.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled textarea in horizontal writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="appearance: none;">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vlr.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vlr.optional.html
new file mode 100644
index 0000000000..d5992962e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vlr.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vrl.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vrl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-lr; appearance: none;">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vrl.optional.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vrl.optional.html
new file mode 100644
index 0000000000..cbaddc3a0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-appearance-none-vrl.optional.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>unstyled textarea in vertical writing mode</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="textarea-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="textarea-appearance-none-vlr.optional.html">
+<link rel="mismatch" href="textarea-appearance-native-vlr.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The textarea below should match the correct writing mode.</p>
+<textarea style="writing-mode: vertical-rl; appearance: none;">Some sample text</textarea>
diff --git a/testing/web-platform/tests/css/css-writing-modes/forms/textarea-rows-cols-sizing.html b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-rows-cols-sizing.html
new file mode 100644
index 0000000000..8cd9c27d36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-writing-modes/forms/textarea-rows-cols-sizing.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Textarea rows/cols size mapping in different writing modes</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<textarea></textarea>
+
+<script>
+for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
+    if (!CSS.supports(`writing-mode: ${writingMode}`))
+        continue;
+
+    const isHorizontal = writingMode === "horizontal-tb";
+    const textarea = document.querySelector("textarea");
+
+    test(t => {
+        textarea.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            textarea.removeAttribute("style");
+            textarea.removeAttribute("rows");
+        });
+
+        const rowsDimension = isHorizontal ? "height" : "width";
+        const colsDimension = isHorizontal ? "width" : "height";
+
+        let previousRect = textarea.getBoundingClientRect();
+        textarea.rows = 10;
+        assert_equals(
+            textarea.getBoundingClientRect()[colsDimension],
+            previousRect[colsDimension],
+            `${colsDimension} shouldn't change when changing rows`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.rows = 9;
+        assert_true(
+            textarea.getBoundingClientRect()[rowsDimension] < previousRect[rowsDimension],
+            `${rowsDimension} should decrease when decreasing rows`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[colsDimension],
+            previousRect[colsDimension],
+            `${colsDimension} shouldn't change when changing rows`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.rows = 11;
+        assert_true(
+            textarea.getBoundingClientRect()[rowsDimension] > previousRect[rowsDimension],
+            `${rowsDimension} should increase when increasing rows`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[colsDimension],
+            previousRect[colsDimension],
+            `${colsDimension} shouldn't change when changing rows`
+        );
+    }, `textarea[style="writing-mode: ${writingMode}"] rows attribute changes the size correctly`);
+
+    test(t => {
+        textarea.style.writingMode = writingMode;
+        t.add_cleanup(() => {
+            textarea.removeAttribute("style");
+            textarea.removeAttribute("cols");
+        });
+
+        const rowsDimension = isHorizontal ? "height" : "width";
+        const colsDimension = isHorizontal ? "width" : "height";
+
+        let previousRect = textarea.getBoundingClientRect();
+        textarea.cols = 40;
+        assert_equals(
+            textarea.getBoundingClientRect()[rowsDimension],
+            previousRect[rowsDimension],
+            `${rowsDimension} shouldn't change when changing cols`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.cols = 30;
+        assert_true(
+            textarea.getBoundingClientRect()[colsDimension] < previousRect[colsDimension],
+            `${colsDimension} should decrease when decreasing cols`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[rowsDimension],
+            previousRect[rowsDimension],
+            `${rowsDimension} shouldn't change when changing cols`
+        );
+        previousRect = textarea.getBoundingClientRect();
+
+        textarea.cols = 50;
+        assert_true(
+            textarea.getBoundingClientRect()[colsDimension] > previousRect[colsDimension],
+            `${colsDimension} should increase when increasing cols`
+        );
+        assert_equals(
+            textarea.getBoundingClientRect()[rowsDimension],
+            previousRect[rowsDimension],
+            `${rowsDimension} shouldn't change when changing cols`
+        );
+    }, `textarea[style="writing-mode: ${writingMode}"] cols attribute changes the size correctly`);
+};
+</script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-writing-modes/forms
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip