Test all input types with scrollTo and onscroll

This test does not follow any spec yet. Instead it expects all `input` types to be scrollable and fire a `scroll` event in response to `scrollTo()`, to more clearly demonstrate which elements do this in browsers currently. Variants tested: * overflow: visible / hidden / scroll * appearance: auto / none See whatwg/html#4840
web-platform-tests · Nov 8, 2019 · 9414e00 · 9414e00
1 parent 2d737f5
commit 9414e00
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/html/rendering/widgets/input-all-scrollable.tentative.html b/html/rendering/widgets/input-all-scrollable.tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>Text controls are scroll containers</title>
+<link rel=help href="https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+input { width: 2em; }
+</style>
+<body>
+<script>
+// Test all input types and expect a 'scroll' event for all, for now.
+for (var inputType of ['text', 'search', 'password', 'tel', 'email', 'url', 'date', 'month', 'week', 'time', 'datetime-local', 'number', 'range', 'color', 'checkbox', 'radio', 'file', 'button', 'submit', 'reset', 'image']) {
+  for (var overflowValue of ['visible', 'hidden', 'scroll']) {
+    for (var appearanceValue of ['auto', 'none']) {
+      async_test(t => {
+        var el = document.createElement('input');
+        el.type = inputType;
+        var longValue = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaab';
+        if (inputType === 'image') {
+          el.alt = longValue;
+        } else if (inputType !== 'file') {
+          el.value = longValue;
+        }
+        el.style.overflow = overflowValue;
+        el.style.WebkitAppearance = appearanceValue;
+        el.style.appearance = appearanceValue;
+        document.body.appendChild(el);
+        el.onscroll = t.step_func_done();
+        el.scrollTo(1000, 0);
+        t.step_timeout(t.unreached_func("No event"), 4000);
+      }, `scrolling <input type=${inputType}> with overflow:${overflowValue}; appearance: ${appearanceValue}`);
+    }
+  }
+}
+</script>