WebKit export of https://bugs.webkit.org/show_bug.cgi?id=248321 (#37154)

Wrong overflow behavior for input fields containing ::-webkit-textfield-decoration-container in vertical writing-mode https://commits.webkit.org/257008@main
web-platform-tests · Nov 25, 2022 · b73f3c8 · b73f3c8
1 parent 58eba72
commit b73f3c8
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 0 deletions.
diff --git a/css/css-writing-modes/forms/number-input-vertical-overflow-ref.html b/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/css/css-writing-modes/forms/number-input-vertical-overflow.html b/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/css/css-writing-modes/forms/text-input-vertical-overflow-no-scroll.html b/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>