Support input[type="range"] in vertical writing mode

https://bugs.webkit.org/show_bug.cgi?id=248208
rdar://102598641

Reviewed by Darin Adler.

Re-use `appearance: slider-vertical` for painting natively and adjust the thumb positioning code to take in account various inline direction configurations.

- horizontal writing mode + any appearance that is not slider-vertical: follows inline direction (left to right or right to left)
- horizontal writing mode + `appearance: slider-vertical`: always bottom to top regardless of direction (preserves old behavior)
- vertical writing mode + any appearance: follows inline direction (top to bottom in LTR, bottom to top in RTL)

WPT imported from web-platform-tests/wpt@3f94991

* LayoutTests/TestExpectations:
* LayoutTests/fast/multicol/client-rects-spanners-complex.html:
* LayoutTests/fast/multicol/client-rects-spanners.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002-expected.txt:
* LayoutTests/platform/gtk/TestExpectations:
* LayoutTests/platform/ios/TestExpectations:
* Source/WebCore/css/horizontalFormControls.css:
(@namespace "http://www.w3.org/1999/xhtml";):
* Source/WebCore/css/html.css:
(input:not([type="color"],[type="range"]), select, button, meter, progress):
(input:not([type="color"]), select, button, meter, progress): Deleted.
Enable input[type=range] when VerticalFormControlsEnabled setting is enabled.

* Source/WebCore/html/shadow/SliderThumbElement.cpp:
(WebCore::hasVerticalAppearance): Now also returns true for vertical writing modes regardless of the appearance value
(WebCore::RenderSliderContainer::computeLogicalHeight const): Logical height is writing-mode aware, adjust check to reflect this is specifically for appearance: slider-vertical in horizontal mode.
(WebCore::RenderSliderContainer::layout): Adjust initial positioning code for vertical writing mode support
(WebCore::SliderThumbElement::setPositionFromPoint): Adjust dragging code for vertical writing mode support
* Source/WebCore/rendering/RenderTheme.cpp:
(WebCore::RenderTheme::adjustStyle): we now pass in the style in autoAppearanceForElement so we can query the writing mode reliably
(WebCore::RenderTheme::autoAppearanceForElement const): paint slider using slider-vertical appearance in vertical writing mode
(WebCore::RenderTheme::paintSliderTicks): Adjust tick positioning code to correctly query reversed inline direction
* Source/WebCore/rendering/RenderTheme.h:
* Source/WebCore/rendering/RenderThemeIOS.mm:
(WebCore::RenderThemeIOS::paintSliderTicks): ditto.

* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional-expected-mismatch.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-scrolling.optional-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-scrolling.optional.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-size-scrolling-and-sizing.optional.html: Added.

Canonical link: https://commits.webkit.org/256994@main

LayoutTests/TestExpectations

@@ -4234,6 +4234,12 @@ webkit.org/b/247754 imported/w3c/web-platform-tests/css/css-writing-modes/forms/
 webkit.org/b/247754 imported/w3c/web-platform-tests/css/css-writing-modes/forms/progress-appearance-native-vertical.optional.html [ ImageOnlyFailure ]
 webkit.org/b/247754 imported/w3c/web-platform-tests/css/css-writing-modes/forms/progress-appearance-none-horizontal.optional.html [ ImageOnlyFailure ]
 webkit.org/b/247754 imported/w3c/web-platform-tests/css/css-writing-modes/forms/progress-appearance-none-vertical.optional.html [ ImageOnlyFailure ]
+webkit.org/b/248262 imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-horizontal.optional.html [ ImageOnlyFailure ]
+webkit.org/b/248262 imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vlr.optional.html [ ImageOnlyFailure ]
+webkit.org/b/248262 imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-native-vrl.optional.html [ ImageOnlyFailure ]
+webkit.org/b/248262 imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-horizontal.optional.html [ ImageOnlyFailure ]
+webkit.org/b/248262 imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vlr.optional.html [ ImageOnlyFailure ]
+webkit.org/b/248262 imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-multiple-appearance-none-vrl.optional.html [ ImageOnlyFailure ]
 
 # Untriaged writing-mode failures.
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/abs-pos-border-offset-001.html [ ImageOnlyFailure ]

LayoutTests/fast/multicol/client-rects-spanners-complex.html

@@ -4,16 +4,12 @@
         display:inline-block;
         block-size: 90px;
         inline-size: 100px;
-        margin-block-start: 10px;
-        margin-block-end: 10px;
-         padding: 5px;
+        margin-block: 10px;
+        padding: 5px;
         border: solid black;
         font-family: ahem;
         font-size: 25px;
         color: lightblue;
-        -webkit-columns: 2;
-        -webkit-column-gap: 5px;
-        -webkit-column-fill: auto;
         columns: 2;
         column-gap: 5px;
         column-fill: auto;
@@ -22,27 +18,27 @@
     div.marker {
         position: absolute;
         border: solid rgba(0, 0, 255, 0.5);
-        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
     }
 
     input[type="range"] {
-        -webkit-appearance: none;
+        appearance: none;
+        writing-mode: horizontal-tb;
         width: 25px;
         height: 25px;
         background-color: lightblue;
     }
 
     input[type="range"]::-webkit-slider-thumb {
-        -webkit-appearance: none;
+        appearance: none;
     }
 
-    .vertical { -webkit-writing-mode: vertical-lr; }
-    .vertical.flipped { -webkit-writing-mode: vertical-rl; }
+    .vertical { writing-mode: vertical-lr; }
+    .vertical.flipped { writing-mode: vertical-rl; }
+
+    div.span { column-span: all; block-size:30px; background-color:silver; }
 
-    div.span { -webkit-column-span: all; block-size:30px; background-color:silver; }
-
     div.above { background-color: navy; block-size:10px; }
-
 </style>
 </head>
 <p>

LayoutTests/fast/multicol/client-rects-spanners.html

@@ -4,16 +4,12 @@
         display:inline-block;
         block-size: 60px;
         inline-size: 100px;
-        margin-block-start: 10px;
-        margin-block-end: 10px;
-         padding: 5px;
+        margin-block: 10px;
+        padding: 5px;
         border: solid black;
         font-family: ahem;
         font-size: 25px;
         color: lightblue;
-        -webkit-columns: 2;
-        -webkit-column-gap: 5px;
-        -webkit-column-fill: auto;
         columns: 2;
         column-gap: 5px;
         column-fill: auto;
@@ -22,24 +18,25 @@
     div.marker {
         position: absolute;
         border: solid rgba(0, 0, 255, 0.5);
-        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
     }
 
     input[type="range"] {
-        -webkit-appearance: none;
+        appearance: none;
+        writing-mode: horizontal-tb;
         width: 25px;
         height: 25px;
         background-color: lightblue;
     }
 
     input[type="range"]::-webkit-slider-thumb {
-        -webkit-appearance: none;
+        appearance: none;
     }
 
-    .vertical { -webkit-writing-mode: vertical-lr; }
-    .vertical.flipped { -webkit-writing-mode: vertical-rl; }
+    .vertical { writing-mode: vertical-lr; }
+    .vertical.flipped { writing-mode: vertical-rl; }
 
-    div.span { -webkit-column-span: all; block-size:10px; background-color:silver; }
+    div.span { column-span: all; block-size:10px; background-color:silver; }
 
 </style>
 </head>

LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/flex-item-compressible-002-expected.txt

@@ -21,7 +21,12 @@ Test3: "height: calc(140px + 100%)"
 
 
 PASS .flexbox 1
-PASS .flexbox 2
+FAIL .flexbox 2 assert_equals:
+<div class="flexbox">
+      <div class="spacer"></div>
+      <input type="range" class="test1" data-expected-height="100">
+    </div>
+height expected 100 but got 40
 FAIL .flexbox 3 assert_equals:
 <div class="flexbox">
       <div class="spacer"></div>
@@ -41,7 +46,12 @@ FAIL .flexbox 5 assert_equals:
     </div>
 height expected 140 but got 100
 PASS .flexbox 6
-PASS .flexbox 7
+FAIL .flexbox 7 assert_equals:
+<div class="flexbox">
+      <div class="spacer"></div>
+      <input type="range" class="test2" data-expected-height="100">
+    </div>
+height expected 100 but got 40
 FAIL .flexbox 8 assert_equals:
 <div class="flexbox">
       <div class="spacer"></div>
@@ -71,7 +81,7 @@ FAIL .flexbox 12 assert_equals:
       <div class="spacer"></div>
       <input type="range" class="test3" data-expected-height="140">
     </div>
-height expected 140 but got 100
+height expected 140 but got 129
 FAIL .flexbox 13 assert_equals:
 <div class="flexbox">
       <div class="spacer"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal-rtl.optional-expected-mismatch.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">

LayoutTests/imported/w3c/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">

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-horizontal.optional-expected-mismatch.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">

LayoutTests/imported/w3c/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">

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical-rtl.optional-expected-mismatch.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">

LayoutTests/imported/w3c/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;">

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-native-vertical.optional-expected-mismatch.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">

LayoutTests/imported/w3c/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">

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal-rtl.optional-expected-mismatch.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;">

LayoutTests/imported/w3c/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;">

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-horizontal.optional-expected-mismatch.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;">

LayoutTests/imported/w3c/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;">

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical-rtl.optional-expected-mismatch.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;">

LayoutTests/imported/w3c/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;">

LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-appearance-none-vertical.optional-expected-mismatch.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;">

LayoutTests/imported/w3c/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;">