Update fast/forms/range/range-drag-vertical.html

* Change async_test() to test()
* Move test() inside the loops
* Add a loop with writing-modes, and cover sideways-rl and sideways-lr
* Remove duplicated </body>

Bug: 40501131
Change-Id: I9d3bef2527d7c65b29f4ec9092b0e3ba3ba7c259
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5749585
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Auto-Submit: Kent Tamura <tkent@chromium.org>
Reviewed-by: Di Zhang <dizhangg@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1335252}
diff --git a/third_party/blink/web_tests/fast/forms/range/range-drag-vertical-expected.txt b/third_party/blink/web_tests/fast/forms/range/range-drag-vertical-expected.txt
new file mode 100644
index 0000000..939c35dd
--- /dev/null
+++ b/third_party/blink/web_tests/fast/forms/range/range-drag-vertical-expected.txt
@@ -0,0 +1,11 @@
+This is a testharness.js-based test.
+[FAIL] writing-mode:sideways-lr, direction:rtl, appearance:none; All input[range] with vertical writing mode should change value on drag.
+  assert_equals: drag slider thumb up will decrease value. expected "0" but got "100"
+[FAIL] writing-mode:sideways-lr, direction:rtl, appearance:auto; All input[range] with vertical writing mode should change value on drag.
+  assert_equals: drag slider thumb up will decrease value. expected "0" but got "100"
+[FAIL] writing-mode:sideways-lr, direction:ltr, appearance:none; All input[range] with vertical writing mode should change value on drag.
+  assert_equals: drag slider thumb up will increase value. expected "100" but got "0"
+[FAIL] writing-mode:sideways-lr, direction:ltr, appearance:auto; All input[range] with vertical writing mode should change value on drag.
+  assert_equals: drag slider thumb up will increase value. expected "100" but got "0"
+Harness: the test ran to completion.
+
diff --git a/third_party/blink/web_tests/fast/forms/range/range-drag-vertical.html b/third_party/blink/web_tests/fast/forms/range/range-drag-vertical.html
index 7172891..094c2c0 100644
--- a/third_party/blink/web_tests/fast/forms/range/range-drag-vertical.html
+++ b/third_party/blink/web_tests/fast/forms/range/range-drag-vertical.html
@@ -3,13 +3,7 @@
 <script src="../../../resources/testharness.js"></script>
 <script src="../../../resources/testharnessreport.js"></script>
 <title>Test for input type range drag slider thumb.</title>
-<style>
-input {
-  writing-mode: vertical-lr;
-}
-</style>
-<body></body>
-
+<body>
 <script>
 function dragMouse(x, y0, y1) {
   eventSender.mouseMoveTo(x, y0);
@@ -18,46 +12,49 @@
   eventSender.mouseUp();
 }
 
-async_test(t => {
-  if (!window.eventSender)
-        return;
-
+for (const mode of ['vertical-rl', 'vertical-lr', 'sideways-rl', 'sideways-lr']) {
   for (const dir of ['rtl', 'ltr']) {
     for (const app of ['none', 'auto']) {
-      let range = document.createElement('input');
-      range.type = 'range';
-      range.style.direction = dir;
-      range.style.appearance = app;
-      range.min = 0;
-      range.max = 100;
-      range.value = 50;
-      document.body.appendChild(range);
+      test(() => {
+        if (!window.eventSender)
+          return;
 
-      const centerX = range.offsetLeft + range.offsetWidth / 2;
-      const centerY = range.offsetTop + range.offsetHeight / 2;
-      const topY = range.offsetTop;
-      const bottomY = range.offsetTop + range.offsetHeight;
+        let range = document.createElement('input');
+        range.type = 'range';
+        range.style.writingMode = mode;
+        range.style.direction = dir;
+        range.style.appearance = app;
+        range.min = 0;
+        range.max = 100;
+        range.value = 50;
+        document.body.appendChild(range);
 
-      if (dir == 'rtl') {
-        dragMouse(centerX, centerY, topY);
-        assert_equals(range.value, '100', 'drag slider thumb up will increase value.');
-        dragMouse(centerX, topY, bottomY);
-        assert_equals(range.value, '0', 'drag slider thumb down will decrease value.');
-      } else {
-        dragMouse(centerX, centerY, topY);
-        assert_equals(range.value, '0', 'drag slider thumb up will decrease value.');
-        dragMouse(centerX, topY, bottomY);
-        assert_equals(range.value, '100', 'drag slider thumb down will increase value.');
-      }
+        const centerX = range.offsetLeft + range.offsetWidth / 2;
+        const centerY = range.offsetTop + range.offsetHeight / 2;
+        const topY = range.offsetTop;
+        const bottomY = range.offsetTop + range.offsetHeight;
 
-      let currentValue = range.value;
-      range.disabled = true;
-      dragMouse(centerX, bottomY, topY);
-      assert_equals(range.value, currentValue, 'drag slider thumb will not change value if disabled.');
+        if ((dir == 'rtl' && mode != 'sideways-lr') || (dir != 'rtl' && mode == 'sideways-lr')) {
+          dragMouse(centerX, centerY, topY);
+          assert_equals(range.value, '100', 'drag slider thumb up will increase value.');
+          dragMouse(centerX, topY, bottomY);
+          assert_equals(range.value, '0', 'drag slider thumb down will decrease value.');
+        } else {
+          dragMouse(centerX, centerY, topY);
+          assert_equals(range.value, '0', 'drag slider thumb up will decrease value.');
+          dragMouse(centerX, topY, bottomY);
+          assert_equals(range.value, '100', 'drag slider thumb down will increase value.');
+        }
+
+        let currentValue = range.value;
+        range.disabled = true;
+        dragMouse(centerX, bottomY, topY);
+        assert_equals(range.value, currentValue, 'drag slider thumb will not change value if disabled.');
+        range.remove();
+      }, `writing-mode:${mode}, direction:${dir}, appearance:${app}; All input[range] with vertical writing mode should change value on drag.`);
     }
   }
-  t.done();
-}, 'All input[range] with vertical writing mode should change value on drag.');
+}
 </script>
 </body>
 </html>