Slider thumb is wrongly placed in vertical writing-mode + RTL

https://bugs.webkit.org/show_bug.cgi?id=248320 rdar://102652014 Reviewed by Cameron McCormack. thumb->setLocation() uses logical coordinates, so we can't share the same path with appearance: slider-vertical, otherwise we end up placing the thumb outside of the track. Add reftests that check that we don't paint anything outside the bounds of the input. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-painting-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html: Added. * Source/WebCore/html/shadow/SliderThumbElement.cpp: (WebCore::RenderSliderContainer::layout): Canonical link: https://commits.webkit.org/257002@main
WebKit · Nov 25, 2022 · 7275c7c · 7275c7c
1 parent 1a5636a
commit 7275c7c
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 5 deletions.
diff --git a/...imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-painting-ref.html b/...imported/w3c/web-platform-tests/css/css-writing-modes/forms/range-input-painting-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<title>Reference: painting of input[type=range] does not happen outside of its bounds</title>
+<p>The range input below should be fully covered.</p>
diff --git a/...latform-tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting-expected.html b/...latform-tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting-expected.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<title>Reference: painting of input[type=range] does not happen outside of its bounds</title>
+<p>The range input below should be fully covered.</p>
diff --git a/...w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html b/...w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-ltr-painting.html
@@ -0,0 +1,37 @@
+<!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>Test that painting of input[type=range] does not happen outside of its bounds</title>
+<meta charset="utf-8">
+<link rel="match" href="range-input-painting-ref.html">
+
+<style>
+    #container {
+        position: relative;
+    }
+    #cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+    }
+    @supports (writing-mode: vertical-lr) {
+        #cover {
+            background-color: Canvas;
+        }
+    }
+    input {
+        appearance: none; /* Disable any native appearance that could cause ink overflow */
+        writing-mode: vertical-lr;
+    }
+</style>
+
+<p>The range input below should be fully covered.</p>
+
+<div id="container">
+    <input type="range">
+    <div id="cover"></div>
+</div>
diff --git a/...latform-tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting-expected.html b/...latform-tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting-expected.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<title>Reference: painting of input[type=range] does not happen outside of its bounds</title>
+<p>The range input below should be fully covered.</p>
diff --git a/...w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html b/...w3c/web-platform-tests/css/css-writing-modes/forms/range-input-vertical-rtl-painting.html
@@ -0,0 +1,39 @@
+<!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>Test that painting of input[type=range] does not happen outside of its bounds</title>
+<meta charset="utf-8">
+<link rel="match" href="range-input-painting-ref.html">
+
+<style>
+    #container {
+        position: relative;
+    }
+    #cover {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+    }
+    @supports (writing-mode: vertical-lr) and (direction: rtl) {
+        #cover {
+            background-color: Canvas;
+        }
+    }
+    input {
+        appearance: none; /* Disable any native appearance that could cause ink overflow */
+        writing-mode: vertical-lr;
+        direction: rtl;
+    }
+</style>
+
+<p>The range input below should be fully covered.</p>
+
+<div id="container">
+    <input type="range">
+    <div id="cover"></div>
+</div>
+
diff --git a/Source/WebCore/html/shadow/SliderThumbElement.cpp b/Source/WebCore/html/shadow/SliderThumbElement.cpp
@@ -160,13 +160,14 @@ void RenderSliderContainer::layout()
     LayoutUnit offset { percentageOffset * availableExtent };
     LayoutPoint thumbLocation = thumb->location();
     if (isVertical) {
-        // RTL in vertical writing mode or appearance: slider-vertical in horizontal writing mode.
-        if (!style().isLeftToRightDirection() || style().isHorizontalWritingMode())
+        // appearance: slider-vertical in horizontal writing mode.
+        if (style().isHorizontalWritingMode())
             thumbLocation.setY(thumbLocation.y() + track->contentHeight() - thumb->height() - offset);
-        else // LTR in vertical writing mode.
+        else if (style().isLeftToRightDirection()) // LTR in vertical writing mode.
             thumbLocation.setY(thumbLocation.y() + offset);
-    }
-    else if (style().isLeftToRightDirection())
+        else // RTL in vertical writing mode.
+            thumbLocation.setY(thumbLocation.y() - offset);
+    } else if (style().isLeftToRightDirection())
         thumbLocation.setX(thumbLocation.x() + offset);
     else
         thumbLocation.setX(thumbLocation.x() - offset);