Timeline scubber for mac inline controls is pushed too far to the right and overlaps with the rightContainerButtons

Phinehas Fuachie · aestes · commit 65fc0c8b090e · 2026-01-06T14:10:59.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=304993 rdar://167634241 This patch restores the expected positioning by ensuring the scrubber does not inherit a fixed left offset from the shared controls. Reviewed by Andy Estes. * LayoutTests/media/modern-media-controls/macos-inline-media-controls/mac-inline-controls-time-control-no-overlap-expected.txt: Added. * LayoutTests/media/modern-media-controls/macos-inline-media-controls/mac-inline-controls-time-control-no-overlap.html: Added. * Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm: (WebCore::macOSInlineMediaControlsStyleSheet): Canonical link: https://commits.webkit.org/305177@main
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/mac-inline-controls-time-control-no-overlap-expected.txt b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/mac-inline-controls-time-control-no-overlap-expected.txt
@@ -0,0 +1,10 @@
+Testing that time control doesn't overlap right button container in inline media controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS timeControlRect.right <= rightContainerRect.left is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/macos-inline-media-controls/mac-inline-controls-time-control-no-overlap.html b/LayoutTests/media/modern-media-controls/macos-inline-media-controls/mac-inline-controls-time-control-no-overlap.html
@@ -0,0 +1,18 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing that time control doesn't overlap right button container in inline media controls.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 300 });
+
+const timeControlRect = mediaControls.timeControl.element.getBoundingClientRect();
+const rightContainerRect = mediaControls.rightContainer.element.getBoundingClientRect();
+
+shouldBeTrue("timeControlRect.right <= rightContainerRect.left");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
diff --git a/Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm b/Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm
@@ -480,6 +480,7 @@ static inline bool canShowCapsLockIndicator()
         "    min-width: fit-content;"
         "}"
         ".media-controls.mac.inline:not(.audio) > .controls-bar.bottom > .time-control {"
+        "    left: auto !important;"
         "    max-width: 540px;"
         "}"
         ".media-controls.mac.inline:not(.audio) > .controls-bar.bottom > .buttons-container.right {"
