[Modern Media Controls] upstream new features

https://bugs.webkit.org/show_bug.cgi?id=241390
<rdar://problem/94581729>

Reviewed by Eric Carlson.

* Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js:
(InlineMediaControls.prototype.layout):
(InlineMediaControls.prototype.topLeftContainerButtons): Renamed from `_topLeftContainerButtons`.
(InlineMediaControls.prototype.leftContainerButtons): Renamed from `_leftContainerButtons`.
(InlineMediaControls.prototype.centerContainerButtons): Renamed from `_centerContainerButtons`.
(InlineMediaControls.prototype.rightContainerButtons): Renamed from `_rightContainerButtons`.
(InlineMediaControls.prototype.droppableButtons): Renamed from `_droppableButtons`.
(InlineMediaControls.prototype.collapsableButtons): Renamed from `_collapsableButtons`.
Move these methods into `// Protected` so subclasses can override.

* Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.js:
(IOSInlineMediaControls.prototype.layout): Added.
(IOSInlineMediaControls.prototype.centerContainerButtons): Added.
(IOSInlineMediaControls.prototype.leftContainerButtons): Added.
(IOSInlineMediaControls.prototype.droppableButtons): Added.
(IOSInlineMediaControls.prototype.get _shouldUseMultilineLayout): Added.
* Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css: Added.
(.media-controls.inline.ios:not(.audio)):
(.media-controls.inline.ios:not(.audio):is(:empty, .faded)):
(.media-controls.inline.ios:not(.audio) *):
(.media-controls.inline.ios:not(.audio) > .controls-bar:is(.top-left, .top-right)):
(.media-controls.inline.ios:not(.audio) > .controls-bar.center):
Only use the new UI for `<video>`.

* Source/WebCore/Modules/modern-media-controls/controls/slider.js:
(Slider):
(Slider.prototype.get allowsRelativeScrubbing): Added.
(Slider.prototype.set allowsRelativeScrubbing): Added.
(Slider.prototype.handleEvent):
(Slider.prototype._handlePointerdownEvent):
(Slider.prototype._handlePointermoveEvent): Added.
(Slider.prototype._handlePointerupEvent):
(Slider.prototype._playbackProgress): Added.
(Slider.prototype._valueWillStartChanging): Deleted.
(Slider.prototype._valueDidStopChanging): Deleted.
* Source/WebCore/Modules/modern-media-controls/controls/slider.css:
(.slider.allows-relative-scrubbing > .custom-slider): Added.
(.slider.allows-relative-scrubbing > .custom-slider.changing): Added.
(.slider.allows-relative-scrubbing > .custom-slider > .fill): Added.
(.slider.allows-relative-scrubbing > .custom-slider.changing > .fill.primary): Added.
(.slider.allows-relative-scrubbing > .custom-slider.changing > .fill.track): Added.
(.slider.allows-relative-scrubbing > .custom-slider.changing > .fill.secondary): Added.
(.slider.allows-relative-scrubbing > input): Added.
(.ios .slider > input):
(.ios .slider:not(.allows-relative-scrubbing) > input): Added.
* Source/WebCore/Modules/modern-media-controls/controls/adwaita-fullscreen-media-controls.js:
(AdwaitaFullscreenMediaControls):
* Source/WebCore/Modules/modern-media-controls/controls/adwaita-inline-media-controls.js:
(AdwaitaInlineMediaControls):
* Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
(MacOSFullscreenMediaControls):
* Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls):
* Source/WebCore/Modules/modern-media-controls/controls/time-control.js:
(TimeControl):
Allow the user to use relative scrubbing instead of having to exactly tap/drag on the knob.

* Source/WebCore/Modules/modern-media-controls/controls/ios-layout-traits.js:
(IOSLayoutTraits.prototype.skipDuration):
Change to 10s.

* Source/WebCore/Modules/modern-media-controls/controls/overflow-button.js:
(OverflowButton):
* Source/WebCore/Modules/modern-media-controls/controls/layout-traits.js:
(LayoutTraits.prototype.overflowButtonHasCircle): Deleted.
* Source/WebCore/Modules/modern-media-controls/controls/icon-service.js:
* Source/WebCore/Modules/modern-media-controls/images/iOS/Overflow.svg:
* Source/WebCore/Modules/modern-media-controls/images/iOS/OverflowCircle.svg: Removed.
Update iOS overflow button icon.

* Source/WebCore/CMakeLists.txt:
* Source/WebCore/DerivedSources-input.xcfilelist:
* Source/WebCore/DerivedSources.make:
* Source/WebCore/WebCore.xcodeproj/project.pbxproj:

* LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled.html:
* LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled-expected.html:
* LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout.html:
* LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout-expected.txt:
* LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play.html:
* LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play-expected.txt:
* LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-shows-start-button.html:
* LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button.html:
* LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button-expected.txt:
* LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button.html:
* LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button-expected.txt:
* LayoutTests/media/modern-media-controls/slider/slider-constructor.html:
* LayoutTests/media/modern-media-controls/slider/slider-styles.html:
* LayoutTests/media/modern-media-controls/slider/slider-value.html:
* LayoutTests/platform/ios/media/track/track-css-visible-stroke-expected.html: Added.

Canonical link: https://commits.webkit.org/251444@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295438 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled-expected.html

@@ -20,9 +20,9 @@
             height: 360px;
             width: 680px;
             border-top: 50px solid white;
-            border-right: 300px solid white;
-            border-bottom: 50px solid white;
-            border-left: 300px solid white;
+            border-right: 100px solid white;
+            border-bottom: 250px solid white;
+            border-left: 100px solid white;
             box-sizing: border-box;
         }
     </style>

LayoutTests/fast/mediastream/MediaStream-video-element-video-tracks-disabled.html

@@ -15,9 +15,9 @@
             height: 360px;
             width: 680px;
             border-top: 50px solid white;
-            border-right: 300px solid white;
-            border-bottom: 50px solid white;
-            border-left: 300px solid white;
+            border-right: 100px solid white;
+            border-bottom: 250px solid white;
+            border-left: 100px solid white;
             box-sizing: border-box;
         }
     </style>

LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout-expected.txt

@@ -3,37 +3,37 @@ Testing the IOSInlineMediaControls layout.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS mediaControls.children.length is 3
+PASS mediaControls.children.length is 4
 PASS mediaControls.children[0] is mediaControls.topLeftControlsBar
-PASS mediaControls.children[1] is mediaControls.bottomControlsBar
-PASS mediaControls.children[2] is mediaControls.topRightControlsBar
-PASS mediaControls.topLeftControlsBar.children.length is 2
-PASS mediaControls.topLeftControlsBar.children[0] instanceof BackgroundTint is true
-PASS mediaControls.topLeftControlsBar.children[1] instanceof ButtonsContainer is true
-PASS mediaControls.topLeftControlsBar.children[1].children.length is 2
-PASS mediaControls.topLeftControlsBar.children[1].children[0] is mediaControls.pipButton
-PASS mediaControls.topLeftControlsBar.children[1].children[1] is mediaControls.fullscreenButton
-PASS mediaControls.bottomControlsBar.children.length is 4
-PASS mediaControls.bottomControlsBar.children[0] instanceof BackgroundTint is true
-PASS mediaControls.bottomControlsBar.children[1] is mediaControls.leftContainer
-PASS mediaControls.bottomControlsBar.children[2] is mediaControls.timeControl
-PASS mediaControls.bottomControlsBar.children[3] is mediaControls.rightContainer
-PASS mediaControls.leftContainer.children.length is 3
-PASS mediaControls.leftContainer.children[0] is mediaControls.skipBackButton
-PASS mediaControls.leftContainer.children[1] is mediaControls.playPauseButton
-PASS mediaControls.leftContainer.children[2] is mediaControls.skipForwardButton
+PASS mediaControls.children[1] is mediaControls.centerControlsBar
+PASS mediaControls.children[2] is mediaControls.bottomControlsBar
+PASS mediaControls.children[3] is mediaControls.topRightControlsBar
+PASS mediaControls.topLeftControlsBar.children.length is 1
+PASS mediaControls.topLeftControlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.topLeftControlsBar.children[0].children.length is 2
+PASS mediaControls.topLeftControlsBar.children[0].children[0] is mediaControls.pipButton
+PASS mediaControls.topLeftControlsBar.children[0].children[1] is mediaControls.fullscreenButton
+PASS mediaControls.centerControlsBar.children.length is 1
+PASS mediaControls.centerControlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.centerControlsBar.children[0].children.length is 3
+PASS mediaControls.centerControlsBar.children[0].children[0] is mediaControls.skipBackButton
+PASS mediaControls.centerControlsBar.children[0].children[1] is mediaControls.playPauseButton
+PASS mediaControls.centerControlsBar.children[0].children[2] is mediaControls.skipForwardButton
+PASS mediaControls.bottomControlsBar.children.length is 2
+PASS mediaControls.bottomControlsBar.children[0] is mediaControls.timeControl
+PASS mediaControls.bottomControlsBar.children[1] is mediaControls.rightContainer
+PASS mediaControls.leftContainer.children.length is 0
 PASS mediaControls.timeControl.children.length is 3
 PASS mediaControls.timeControl.children[0] is mediaControls.timeControl.elapsedTimeLabel
 PASS mediaControls.timeControl.children[1] is mediaControls.timeControl.scrubber
 PASS mediaControls.timeControl.children[2] is mediaControls.timeControl.remainingTimeLabel
 PASS mediaControls.rightContainer.children.length is 3
 PASS mediaControls.rightContainer.children[0] is mediaControls.airplayButton
 PASS mediaControls.rightContainer.children[1] is mediaControls.tracksButton
-PASS mediaControls.topRightControlsBar.children.length is 2
-PASS mediaControls.topRightControlsBar.children[0] instanceof BackgroundTint is true
-PASS mediaControls.topRightControlsBar.children[1] instanceof ButtonsContainer is true
-PASS mediaControls.topRightControlsBar.children[1].children.length is 1
-PASS mediaControls.topRightControlsBar.children[1].children[0] is mediaControls.muteButton
+PASS mediaControls.topRightControlsBar.children.length is 1
+PASS mediaControls.topRightControlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.topRightControlsBar.children[0].children.length is 1
+PASS mediaControls.topRightControlsBar.children[0].children[0] is mediaControls.muteButton
 PASS successfullyParsed is true
 
 TEST COMPLETE

LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-layout.html

@@ -23,28 +23,30 @@
     if (iconButtons.some(button => button.width == 0))
         return;
 
-    shouldBe("mediaControls.children.length", "3");
+    shouldBe("mediaControls.children.length", "4");
     shouldBe("mediaControls.children[0]", "mediaControls.topLeftControlsBar");
-    shouldBe("mediaControls.children[1]", "mediaControls.bottomControlsBar");
-    shouldBe("mediaControls.children[2]", "mediaControls.topRightControlsBar");
+    shouldBe("mediaControls.children[1]", "mediaControls.centerControlsBar");
+    shouldBe("mediaControls.children[2]", "mediaControls.bottomControlsBar");
+    shouldBe("mediaControls.children[3]", "mediaControls.topRightControlsBar");
 
-    shouldBe("mediaControls.topLeftControlsBar.children.length", "2");
-    shouldBeTrue("mediaControls.topLeftControlsBar.children[0] instanceof BackgroundTint");
-    shouldBeTrue("mediaControls.topLeftControlsBar.children[1] instanceof ButtonsContainer");
-    shouldBe("mediaControls.topLeftControlsBar.children[1].children.length", "2");
-    shouldBe("mediaControls.topLeftControlsBar.children[1].children[0]", "mediaControls.pipButton");
-    shouldBe("mediaControls.topLeftControlsBar.children[1].children[1]", "mediaControls.fullscreenButton");
+    shouldBe("mediaControls.topLeftControlsBar.children.length", "1");
+    shouldBeTrue("mediaControls.topLeftControlsBar.children[0] instanceof ButtonsContainer");
+    shouldBe("mediaControls.topLeftControlsBar.children[0].children.length", "2");
+    shouldBe("mediaControls.topLeftControlsBar.children[0].children[0]", "mediaControls.pipButton");
+    shouldBe("mediaControls.topLeftControlsBar.children[0].children[1]", "mediaControls.fullscreenButton");
 
-    shouldBe("mediaControls.bottomControlsBar.children.length", "4");
-    shouldBeTrue("mediaControls.bottomControlsBar.children[0] instanceof BackgroundTint");
-    shouldBe("mediaControls.bottomControlsBar.children[1]", "mediaControls.leftContainer");
-    shouldBe("mediaControls.bottomControlsBar.children[2]", "mediaControls.timeControl");
-    shouldBe("mediaControls.bottomControlsBar.children[3]", "mediaControls.rightContainer");
+    shouldBe("mediaControls.centerControlsBar.children.length", "1");
+    shouldBeTrue("mediaControls.centerControlsBar.children[0] instanceof ButtonsContainer");
+    shouldBe("mediaControls.centerControlsBar.children[0].children.length", "3");
+    shouldBe("mediaControls.centerControlsBar.children[0].children[0]", "mediaControls.skipBackButton");
+    shouldBe("mediaControls.centerControlsBar.children[0].children[1]", "mediaControls.playPauseButton");
+    shouldBe("mediaControls.centerControlsBar.children[0].children[2]", "mediaControls.skipForwardButton");
 
-    shouldBe("mediaControls.leftContainer.children.length", "3");
-    shouldBe("mediaControls.leftContainer.children[0]", "mediaControls.skipBackButton");
-    shouldBe("mediaControls.leftContainer.children[1]", "mediaControls.playPauseButton");
-    shouldBe("mediaControls.leftContainer.children[2]", "mediaControls.skipForwardButton");
+    shouldBe("mediaControls.bottomControlsBar.children.length", "2");
+    shouldBe("mediaControls.bottomControlsBar.children[0]", "mediaControls.timeControl");
+    shouldBe("mediaControls.bottomControlsBar.children[1]", "mediaControls.rightContainer");
+
+    shouldBe("mediaControls.leftContainer.children.length", "0");
 
     shouldBe("mediaControls.timeControl.children.length", "3");
     shouldBe("mediaControls.timeControl.children[0]", "mediaControls.timeControl.elapsedTimeLabel");
@@ -55,11 +57,10 @@
     shouldBe("mediaControls.rightContainer.children[0]", "mediaControls.airplayButton");
     shouldBe("mediaControls.rightContainer.children[1]", "mediaControls.tracksButton");
 
-    shouldBe("mediaControls.topRightControlsBar.children.length", "2");
-    shouldBeTrue("mediaControls.topRightControlsBar.children[0] instanceof BackgroundTint");
-    shouldBeTrue("mediaControls.topRightControlsBar.children[1] instanceof ButtonsContainer");
-    shouldBe("mediaControls.topRightControlsBar.children[1].children.length", "1");
-    shouldBe("mediaControls.topRightControlsBar.children[1].children[0]", "mediaControls.muteButton");
+    shouldBe("mediaControls.topRightControlsBar.children.length", "1");
+    shouldBeTrue("mediaControls.topRightControlsBar.children[0] instanceof ButtonsContainer");
+    shouldBe("mediaControls.topRightControlsBar.children[0].children.length", "1");
+    shouldBe("mediaControls.topRightControlsBar.children[0].children[0]", "mediaControls.muteButton");
 
     finishMediaControlsTest();
 };

LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play-expected.txt

@@ -4,6 +4,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 'play' event.
+PASS media.paused is false
 PASS shadowRoot.querySelector('button.play-pause') became different from null
 PASS shadowRoot.querySelector('button.play-pause').getBoundingClientRect().width became different from 0
 Tapping start button...

LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-added-after-play.html

@@ -1,18 +1,18 @@
-<script src="../../../resources/js-test-pre.js"></script>
-<script src="../resources/media-controls-utils.js"></script>
+<script src="../../../../resources/js-test-pre.js"></script>
+<script src="../../resources/media-controls-utils.js"></script>
 <body>
-<video src="../../content/test.mp4" style="position: absolute; left: 0; top: 0; width: 400px;" muted playsinline autoplay></video>
+<video src="../../../content/test.mp4" style="position: absolute; left: 0; top: 0; width: 400px;" muted playsinline autoplay></video>
 <script type="text/javascript">
 
 window.jsTestIsAsync = true;
 
 description("Check that tapping the start button pauses the video if controls are added after it has started playing.");
 
 const media = document.querySelector("video");
-const shadowRoot = window.internals.shadowRoot(media);
+let shadowRoot = null;
 
 media.addEventListener("play", async () => {
-    debug("'play' event");
+    debug("'play' event.");
 
     if (media.controls)
         return;
@@ -21,6 +21,8 @@
 
     shouldBeFalse("media.paused");
 
+    shadowRoot = window.internals.shadowRoot(media);
+
     await shouldBecomeDifferent("shadowRoot.querySelector('button.play-pause')", "null");
     await shouldBecomeDifferent("shadowRoot.querySelector('button.play-pause').getBoundingClientRect().width", "0");
 
@@ -41,5 +43,5 @@
 });
 
 </script>
-<script src="../../../resources/js-test-post.js"></script>
+<script src="../../../../resources/js-test-post.js"></script>
 </body>

LayoutTests/media/modern-media-controls/ios-inline-media-controls/touch/ios-inline-media-controls-shows-start-button.html

@@ -1,7 +1,7 @@
-<script src="../../../resources/js-test-pre.js"></script>
-<script src="../resources/media-controls-utils.js"></script>
+<script src="../../../../resources/js-test-pre.js"></script>
+<script src="../../resources/media-controls-utils.js"></script>
 <body>
-<video src="../../content/test.mp4" style="position: absolute; left: 0; top: 0; width: 400px;" controls muted playsinline></video>
+<video src="../../../content/test.mp4" style="position: absolute; left: 0; top: 0; width: 400px;" controls muted playsinline></video>
 <script type="text/javascript">
 
 window.jsTestIsAsync = true;
@@ -36,5 +36,5 @@
 });
 
 </script>
-<script src="../../../resources/js-test-post.js"></script>
+<script src="../../../../resources/js-test-post.js"></script>
 </body>

LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button-expected.txt

@@ -7,7 +7,7 @@ PASS skipBackButton.element.localName is "button"
 PASS skipBackButton.element.classList.contains("skip-back") is true
 PASS skipBackButton.iconName is Icons.SkipBack15
 PASS skipBackButton.image.element.style.webkitMaskImage.includes("macOS/SkipBack15.svg") became true
-PASS iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack15.svg") became true
+PASS iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack10.svg") became true
 PASS successfullyParsed is true
 
 TEST COMPLETE

LayoutTests/media/modern-media-controls/skip-back-button/skip-back-button.html

@@ -17,7 +17,7 @@
 const iOSSkipBackButton = new SkipBackButton({ layoutTraits: new IOSLayoutTraits(LayoutTraits.Mode.Inline) });
 
 shouldBecomeEqual('skipBackButton.image.element.style.webkitMaskImage.includes("macOS/SkipBack15.svg")', "true", () => {
-    shouldBecomeEqual('iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack15.svg")', "true", finishJSTest);
+    shouldBecomeEqual('iOSSkipBackButton.image.element.style.webkitMaskImage.includes("iOS/SkipBack10.svg")', "true", finishJSTest);
 });
 
 </script>

LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button-expected.txt

@@ -7,7 +7,7 @@ PASS skipForwardButton.element.localName is "button"
 PASS skipForwardButton.element.classList.contains("skip-forward") is true
 PASS skipForwardButton.iconName is Icons.SkipForward15
 PASS skipForwardButton.image.element.style.webkitMaskImage.includes("macOS/SkipForward15.svg") became true
-PASS iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward15.svg") became true
+PASS iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward10.svg") became true
 PASS successfullyParsed is true
 
 TEST COMPLETE

LayoutTests/media/modern-media-controls/skip-forward-button/skip-forward-button.html

@@ -17,7 +17,7 @@
 const iOSSkipForwardButton = new SkipForwardButton({ layoutTraits: new IOSLayoutTraits(LayoutTraits.Mode.Inline) });
 
 shouldBecomeEqual('skipForwardButton.image.element.style.webkitMaskImage.includes("macOS/SkipForward15.svg")', "true", () => {
-    shouldBecomeEqual('iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward15.svg")', "true", finishJSTest);
+    shouldBecomeEqual('iOSSkipForwardButton.image.element.style.webkitMaskImage.includes("iOS/SkipForward10.svg")', "true", finishJSTest);
 });
 
 </script>

LayoutTests/media/modern-media-controls/slider/slider-constructor.html

@@ -6,7 +6,9 @@
 
 description("Testing the <code>Slider</code> constructor.");
 
-const slider = new Slider;
+const layoutDelegate = null;
+
+const slider = new Slider(layoutDelegate);
 
 shouldBeEqualToString("slider.element.localName", "div");
 shouldBeEqualToString("slider.element.className.trim()", "slider");
@@ -18,7 +20,7 @@
 shouldBeEqualToString("slider.children[1].element.max", "1");
 shouldBeEqualToString("slider.children[1].element.step", "0.001");
 
-const sliderWithCSSClassName = new Slider("foo");
+const sliderWithCSSClassName = new Slider(layoutDelegate, "foo");
 shouldBeEqualToString("sliderWithCSSClassName.element.className", "slider foo");
 
 </script>

LayoutTests/media/modern-media-controls/slider/slider-styles.html

@@ -8,7 +8,9 @@
 
 window.jsTestIsAsync = true;
 
-const slider = new Slider;
+const layoutDelegate = null;
+
+const slider = new Slider(layoutDelegate);
 slider.width = 200;
 slider.height = 25;
 

LayoutTests/media/modern-media-controls/slider/slider-value.html

@@ -12,7 +12,9 @@
 
 const KNOB_WIDTH = 9;
 
-const slider = new Slider;
+const layoutDelegate = null;
+
+const slider = new Slider(layoutDelegate);
 slider.x = 10;
 slider.y = 32;
 slider.width = 200 + KNOB_WIDTH;

LayoutTests/platform/ios/media/track/track-css-visible-stroke-expected.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <style>
+
+        .redtile {
+            width: 50px;
+            height: 50px;
+            position: absolute;
+            background-color: red;
+        }
+
+        .redtile > .overlay {
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.55);
+        }
+
+        </style>
+
+    </head>
+    <body>
+        <div class="redtile" style="left: 0px; top: 0px;"><div class="overlay"></div></div>
+    </body>
+</html>

Source/WebCore/CMakeLists.txt

@@ -2101,6 +2101,7 @@ set(MODERN_MEDIA_CONTROLS_STYLE_SHEETS
     "${WEBCORE_DIR}/Modules/modern-media-controls/controls/buttons-container.css"
     "${WEBCORE_DIR}/Modules/modern-media-controls/controls/controls-bar.css"
     "${WEBCORE_DIR}/Modules/modern-media-controls/controls/inline-media-controls.css"
+    "${WEBCORE_DIR}/Modules/modern-media-controls/controls/ios-inline-media-controls.css"
     "${WEBCORE_DIR}/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css"
     "${WEBCORE_DIR}/Modules/modern-media-controls/controls/macos-inline-media-controls.css"
     "${WEBCORE_DIR}/Modules/modern-media-controls/controls/adwaita-inline-media-controls.css"

Source/WebCore/DerivedSources-input.xcfilelist

@@ -470,6 +470,7 @@ $(PROJECT_DIR)/Modules/modern-media-controls/controls/icon-service.js
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/inline-media-controls.css
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/inline-media-controls.js
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/invalid-placard.js
+$(PROJECT_DIR)/Modules/modern-media-controls/controls/ios-inline-media-controls.css
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/ios-inline-media-controls.js
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/ios-layout-traits.js
 $(PROJECT_DIR)/Modules/modern-media-controls/controls/layout-item.js

Source/WebCore/DerivedSources.make

@@ -1759,6 +1759,7 @@ MODERN_MEDIA_CONTROLS_STYLE_SHEETS = \
     $(WebCore)/Modules/modern-media-controls/controls/buttons-container.css \
     $(WebCore)/Modules/modern-media-controls/controls/controls-bar.css \
     $(WebCore)/Modules/modern-media-controls/controls/inline-media-controls.css \
+    $(WebCore)/Modules/modern-media-controls/controls/ios-inline-media-controls.css \
     $(WebCore)/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css \
     $(WebCore)/Modules/modern-media-controls/controls/macos-inline-media-controls.css \
     $(WebCore)/Modules/modern-media-controls/controls/media-controls.css \

Source/WebCore/Modules/modern-media-controls/controls/adwaita-fullscreen-media-controls.js

@@ -46,7 +46,7 @@ class AdwaitaFullscreenMediaControls extends MediaControls
         this.forwardButton = new ForwardButton(this);
         this.fullscreenButton.isFullscreen = true;
 
-        this.volumeSlider = new Slider("volume");
+        this.volumeSlider = new Slider(this, "volume");
         this.volumeSlider.width = 60;
 
         this._leftContainer = new ButtonsContainer({

Source/WebCore/Modules/modern-media-controls/controls/adwaita-inline-media-controls.js

@@ -40,7 +40,7 @@ class AdwaitaInlineMediaControls extends InlineMediaControls
 
         this._backgroundClickDelegateNotifier = new BackgroundClickDelegateNotifier(this);
 
-        this.volumeSlider = new Slider("volume");
+        this.volumeSlider = new Slider(this, "volume");
         this.volumeSlider.width = 60;
 
         this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);

Source/WebCore/Modules/modern-media-controls/controls/icon-service.js

@@ -35,7 +35,6 @@ const Icons = {
     InvalidCircle   : { name: "InvalidCircle", type: "pdf", label: UIString("Invalid") },
     InvalidPlacard  : { name: "invalid-placard", type: "png", label: UIString("Invalid") },
     Overflow        : { name: "Overflow", type: "svg", label: UIString("More\u2026") },
-    OverflowCircle  : { name: "OverflowCircle", type: "svg", label: UIString("More\u2026") },
     Pause           : { name: "Pause", type: "svg", label: UIString("Pause") },
     PiPPlacard      : { name: "pip-placard", type: "png", label: UIString("Picture in Picture") },
     Play            : { name: "Play", type: "svg", label: UIString("Play") },