WebKit export: input[type="range"] handles inline-size incorrectly (#…

…50190) https://bugs.webkit.org/show_bug.cgi?id=259602
web-platform-tests · Jan 21, 2025 · 7e21654 · 7e21654
1 parent ef7528d
commit 7e21654
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 0 deletions.
diff --git a/css/css-writing-modes/forms/input-range-block-size.html b/css/css-writing-modes/forms/input-range-block-size.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Setting block-size/min-block-size/max-block-size on input[type=range] should be honored.</title>
+    <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+    <link rel="help" href="https://drafts.csswg.org/css-writing-modes/">
+</head>
+<body>
+    <input type="range" id="input">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script>
+        const writingModes = [
+            "horizontal-tb",
+            "vertical-lr",
+            "vertical-rl",
+            "sideways-lr",
+            "sideways-rl",
+        ];
+        for (let writingMode of writingModes) {
+            test(t => {
+                t.add_cleanup(() => {
+                    input.style = "";
+                });
+                input.style.writingMode = writingMode;
+                input.style.blockSize = "10px";
+                const blockSize = () => {
+                    return writingMode == "horizontal-tb" ? getComputedStyle(input).height : getComputedStyle(input).width;
+                };
+                assert_equals(blockSize(), "10px", "block-size applies");
+                input.style.maxBlockSize = "8px";
+                assert_equals(blockSize(), "8px", "max-block-size applies");
+                input.style.minBlockSize = "15px";
+                assert_equals(blockSize(), "15px", "min-block-size applies");
+            }, `writing-mode: ${writingMode}`);
+        }
+    </script>
+</body>
+</html>
diff --git a/css/css-writing-modes/forms/input-range-inline-size.html b/css/css-writing-modes/forms/input-range-inline-size.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Setting inline-size/min-inline-size/max-inline-size on input[type=range] should be honored.</title>
+    <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+    <link rel="help" href="https://drafts.csswg.org/css-writing-modes/">
+</head>
+<body>
+    <input type="range" id="input">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script>
+        const writingModes = [
+            "horizontal-tb",
+            "vertical-lr",
+            "vertical-rl",
+            "sideways-lr",
+            "sideways-rl",
+        ];
+        for (let writingMode of writingModes) {
+            test(t => {
+                t.add_cleanup(() => {
+                    input.style = "";
+                });
+                input.style.writingMode = writingMode;
+                input.style.inlineSize = "10px";
+                const inlineSize = () => {
+                    return writingMode == "horizontal-tb" ? getComputedStyle(input).width : getComputedStyle(input).height;
+                };
+                assert_equals(inlineSize(), "10px", "inline-size applies");
+                input.style.maxInlineSize = "8px";
+                assert_equals(inlineSize(), "8px", "max-inline-size applies");
+                input.style.minInlineSize = "15px";
+                assert_equals(inlineSize(), "15px", "min-inline-size applies");
+            }, `writing-mode: ${writingMode}`);
+        }
+    </script>
+</body>
+</html>
diff --git a/css/css-writing-modes/forms/input-range-zero-inline-size-ref.html b/css/css-writing-modes/forms/input-range-zero-inline-size-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <style>
+        div {
+            display: flex;
+        }
+        span {
+            display: inline-block;
+            border-inline-start: 1px solid green;
+        }
+        input[type=range] {
+            visibility: hidden;
+            margin: 0;
+        }
+    </style>
+
+    <p>Test passes if you see no red:</p>
+
+    <div><span></span><input type="range"></div>
+    <div style="writing-mode: vertical-lr;"><span></span><span></span><span></span><span></span><input type="range"></div>
+</body>
+</html>
diff --git a/css/css-writing-modes/forms/input-range-zero-inline-size.html b/css/css-writing-modes/forms/input-range-zero-inline-size.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Setting inline-size to zero on input[type=range] should be honored.</title>
+    <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+    <link rel="help" href="https://drafts.csswg.org/css-writing-modes/">
+    <link rel="match" href="input-range-zero-inline-size-ref.html">
+</head>
+<body>
+    <style>
+        div {
+            display: flex;
+            background-color: red;
+            border-inline-start: 1px solid green;
+        }
+        .horizontal {
+            background-color: transparent;
+        }
+        input[type=range] {
+            visibility: hidden;
+            inline-size: 0;
+            margin: 0;
+        }
+    </style>
+
+    <p>Test passes if you see no red:</p>
+
+    <div class="horizontal"><span style="display: inline-flex; background-color: red;"><input type="range"></span></div>
+    <div style="writing-mode: vertical-lr;"><input type="range"></div>
+    <div style="writing-mode: vertical-rl;"><input type="range"></div>
+    <div style="writing-mode: sideways-lr;"><input type="range"></div>
+    <div style="writing-mode: sideways-rl;"><input type="range"></div>
+</body>
+</html>