Diff
Modified: trunk/LayoutTests/ChangeLog (218990 => 218991)
--- trunk/LayoutTests/ChangeLog 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/LayoutTests/ChangeLog 2017-06-30 07:48:37 UTC (rev 218991)
@@ -1,3 +1,20 @@
+2017-06-30 Antoine Quint <[email protected]>
+
+ Top controls bars should invert with right-to-left user interface layout direction locale
+ https://bugs.webkit.org/show_bug.cgi?id=173989
+ <rdar://problem/32863552>
+
+ Reviewed by Dean Jackson.
+
+ Add a new test to check we correctly layout the top controls bars in RTL and rebaseline a
+ test that now requires an asynchronous assertion.
+
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html: Added.
+ * media/modern-media-controls/mute-button/mute-button-expected.txt:
+ * media/modern-media-controls/mute-button/mute-button.html:
+ * platform/mac/TestExpectations:
+
2017-06-30 Dean Jackson <[email protected]>
REGRESSION (High Sierra): Gradient LayoutTests are failing
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt (0 => 218991)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl-expected.txt 2017-06-30 07:48:37 UTC (rev 218991)
@@ -0,0 +1,44 @@
+Testing that control bars and the mute button respect the user interface layout direction.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+width = 600
+muted = false
+usesLTRUserInterfaceLayoutDirection = true
+PASS mediaControls.muteButton.iconName became Icons.Volume
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.fullscreenButton, mediaControls.pipButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).left became "6px"
+
+width = 600
+muted = false
+usesLTRUserInterfaceLayoutDirection = false
+PASS mediaControls.muteButton.iconName became Icons.Volume
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.pipButton, mediaControls.fullscreenButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
+
+width = 250
+muted = false
+usesLTRUserInterfaceLayoutDirection = false
+PASS mediaControls.muteButton.iconName became Icons.VolumeRTL
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.pipButton, mediaControls.fullscreenButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
+
+width = 250
+muted = true
+usesLTRUserInterfaceLayoutDirection = false
+PASS mediaControls.muteButton.iconName became Icons.VolumeMutedRTL
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.pipButton, mediaControls.fullscreenButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).right became "6px"
+
+width = 250
+muted = true
+usesLTRUserInterfaceLayoutDirection = true
+PASS mediaControls.muteButton.iconName became Icons.VolumeMuted
+PASS mediaControls.topLeftControlsBar.children[1].buttons became [mediaControls.fullscreenButton, mediaControls.pipButton]
+PASS getComputedStyle(mediaControls.topLeftControlsBar.element).left became "6px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html (0 => 218991)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html 2017-06-30 07:48:37 UTC (rev 218991)
@@ -0,0 +1,106 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing that control bars and the mute button respect the user interface layout direction.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSInlineMediaControls({ width: 600, height: 250 });
+mediaControls.usesLTRUserInterfaceLayoutDirection = true;
+
+mediaControls.element.style.position = "relative";
+document.body.appendChild(mediaControls.element);
+
+step1();
+
+function step1()
+{
+ debug("width = 600");
+ debug("muted = false");
+ debug("usesLTRUserInterfaceLayoutDirection = true");
+ shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume", () => {
+ shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
+ shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", step2);
+ });
+ });
+}
+
+function step2()
+{
+ debug("");
+ debug("width = 600");
+ debug("muted = false");
+ debug("usesLTRUserInterfaceLayoutDirection = false");
+ mediaControls.usesLTRUserInterfaceLayoutDirection = false;
+ shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.Volume", () => {
+ shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
+ shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step3);
+ });
+ });
+}
+
+function step3()
+{
+ debug("");
+ debug("width = 250");
+ debug("muted = false");
+ debug("usesLTRUserInterfaceLayoutDirection = false");
+ mediaControls.width = 250;
+ shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeRTL", () => {
+ shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
+ shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step4);
+ });
+ });
+}
+
+function step4()
+{
+ debug("");
+ debug("width = 250");
+ debug("muted = true");
+ debug("usesLTRUserInterfaceLayoutDirection = false");
+ mediaControls.muteButton.muted = true;
+ shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMutedRTL", () => {
+ shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.pipButton, mediaControls.fullscreenButton]", () => {
+ shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).right", "6px", step5);
+ });
+ });
+}
+
+function step5()
+{
+ debug("");
+ debug("width = 250");
+ debug("muted = true");
+ debug("usesLTRUserInterfaceLayoutDirection = true");
+ mediaControls.usesLTRUserInterfaceLayoutDirection = true;
+ shouldBecomeEqual("mediaControls.muteButton.iconName", "Icons.VolumeMuted", () => {
+ shouldBecomeEqual("mediaControls.topLeftControlsBar.children[1].buttons", "[mediaControls.fullscreenButton, mediaControls.pipButton]", () => {
+ shouldBecomeEqualToString("getComputedStyle(mediaControls.topLeftControlsBar.element).left", "6px", done);
+ });
+ });
+}
+
+function done()
+{
+ debug("");
+ mediaControls.element.remove();
+ finishJSTest();
+}
+
+// debug("Mute button is enabled");
+// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
+// shouldBe("mediaControls.topRightControlsBar.parent", "mediaControls");
+//
+// debug("")
+// debug("Mute button is disabled");
+// mediaControls.muteButton.enabled = false;
+// shouldBe("mediaControls.muteButton.parent.parent", "mediaControls.topRightControlsBar");
+// shouldBeNull("mediaControls.topRightControlsBar.parent");
+
+</script>
+<script src=""
+</body>
Modified: trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button-expected.txt (218990 => 218991)
--- trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button-expected.txt 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button-expected.txt 2017-06-30 07:48:37 UTC (rev 218991)
@@ -8,7 +8,7 @@
PASS muteButton.iconName is Icons.Volume
PASS muteButton.muted is false
PASS mutedButton.muted is true
-PASS mutedButton.iconName is Icons.VolumeMuted
+PASS mutedButton.iconName became Icons.VolumeMuted
PASS muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg") became true
PASS mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg") became true
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button.html (218990 => 218991)
--- trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button.html 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/LayoutTests/media/modern-media-controls/mute-button/mute-button.html 2017-06-30 07:48:37 UTC (rev 218991)
@@ -18,10 +18,10 @@
const mutedButton = new MuteButton({ layoutTraits: LayoutTraits.macOS });
mutedButton.muted = true;
shouldBeTrue("mutedButton.muted");
-shouldBe("mutedButton.iconName", "Icons.VolumeMuted");
-
-shouldBecomeEqual('muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg")', "true", () => {
- shouldBecomeEqual('mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg")', "true", finishJSTest);
+shouldBecomeEqual("mutedButton.iconName", "Icons.VolumeMuted", () => {
+ shouldBecomeEqual('muteButton.image.element.style.webkitMaskImage.includes("macOS/VolumeHi.svg")', "true", () => {
+ shouldBecomeEqual('mutedButton.image.element.style.webkitMaskImage.includes("macOS/Mute.svg")', "true", finishJSTest);
+ });
});
</script>
Modified: trunk/LayoutTests/platform/mac/TestExpectations (218990 => 218991)
--- trunk/LayoutTests/platform/mac/TestExpectations 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2017-06-30 07:48:37 UTC (rev 218991)
@@ -1558,6 +1558,7 @@
media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-controls-hidden-when-mute-button-disabled.html [ Pass ]
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-mute-button-in-bottom-or-top-right-controls-bar.html [ Pass ]
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-top-right-controls-bar-hidden-when-mute-button-disabled.html [ Pass ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html [ Pass ]
media/modern-media-controls/media-documents [ Pass ]
media/modern-media-controls/mute-button [ Pass ]
media/modern-media-controls/mute-support [ Pass ]
Modified: trunk/Source/WebCore/ChangeLog (218990 => 218991)
--- trunk/Source/WebCore/ChangeLog 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/Source/WebCore/ChangeLog 2017-06-30 07:48:37 UTC (rev 218991)
@@ -1,3 +1,54 @@
+2017-06-30 Antoine Quint <[email protected]>
+
+ Top controls bars should invert with right-to-left user interface layout direction locale
+ https://bugs.webkit.org/show_bug.cgi?id=173989
+ <rdar://problem/32863552>
+
+ Reviewed by Dean Jackson.
+
+ When the user interface layout direction is set by the locale to be right-to-left, we now:
+
+ - invert the two top controls bars
+ - invert the layout order for the fullscreen / PiP controls bar
+ - orient the volume button the opposite direction when presented in a top controls bar
+
+ Test: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-rtl.html
+
+ * Modules/modern-media-controls/controls/icon-service.js: Add new RTL variants for the mute and unmute icons.
+ * Modules/modern-media-controls/controls/inline-media-controls.css: Invert the position of the two top controls
+ bars when we switch user interface layout direction.
+ (.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-left,):
+ (.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-right,):
+ (.media-controls.inline > .controls-bar.top-left): Deleted.
+ (.media-controls.inline > .controls-bar.top-right): Deleted.
+ * Modules/modern-media-controls/controls/inline-media-controls.js:
+ (InlineMediaControls.prototype.layout): Default to using the LTR variant for the mute button icon since
+ it should only use the RTL variant in case the locale requires it *and* we display the mute button in a
+ top controls bar rather than the bottom controls bar (ie. when width becomes constrained).
+ (InlineMediaControls.prototype._topLeftContainerButtons): Invert the order of the fullscreen and PiP
+ buttons based on the user interface layout direction.
+ (InlineMediaControls.prototype._addTopRightBarWithMuteButtonToChildren):
+ (InlineMediaControls):
+ * Modules/modern-media-controls/controls/media-controls.js:
+ (MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection): Schedule a layout when the user interface
+ layout direction changes.
+ * Modules/modern-media-controls/controls/mute-button.js: Add a new "usesRTLIconVariant" property, false by
+ default, to indicate we want to use the RTL variant of the button's icon.
+ (MuteButton):
+ (MuteButton.prototype.get muted):
+ (MuteButton.prototype.set muted):
+ (MuteButton.prototype.set usesRTLIconVariant):
+ (MuteButton.prototype.layout):
+ * Modules/modern-media-controls/images/iOS/Mute-RTL.svg: Added.
+ * Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg: Added.
+ * Modules/modern-media-controls/images/macOS/Mute-RTL.svg: Added.
+ * Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg: Added.
+ * Modules/modern-media-controls/media/media-controller.js: Use an ivar to track when it's worth notifying the
+ media controls that the user interface layout direction has changed. This means we won't need to schedule a
+ layout in case it's set to the current value.
+ (MediaController):
+ (MediaController.prototype.set usesLTRUserInterfaceLayoutDirection):
+
2017-06-29 Zalan Bujtas <[email protected]>
BreakingContext::handleReplaced() should use replacedBox instead of m_current.renderer().
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js (218990 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2017-06-30 07:48:37 UTC (rev 218991)
@@ -39,8 +39,10 @@
SkipForward : { name: "SkipForward15", type: "svg", label: UIString("Skip Forward 15 seconds") },
Tracks : { name: "MediaSelector", type: "svg", label: UIString("Media Selection") },
Volume : { name: "VolumeHi", type: "svg", label: UIString("Mute") },
+ VolumeRTL : { name: "VolumeHi-RTL", type: "svg", label: UIString("Mute") },
VolumeDown : { name: "VolumeLo", type: "svg", label: UIString("Volume Down") },
VolumeMuted : { name: "Mute", type: "svg", label: UIString("Unmute") },
+ VolumeMutedRTL : { name: "Mute-RTL", type: "svg", label: UIString("Unmute") },
VolumeUp : { name: "VolumeHi", type: "svg", label: UIString("Volume Up") }
};
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.css (218990 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.css 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.css 2017-06-30 07:48:37 UTC (rev 218991)
@@ -30,11 +30,13 @@
height: var(--inline-controls-bar-height);
}
-.media-controls.inline > .controls-bar.top-left {
+.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-left,
+.media-controls.inline:not(.uses-ltr-user-interface-layout-direction) > .controls-bar.top-right {
top: var(--inline-controls-inside-margin);
}
-.media-controls.inline > .controls-bar.top-right {
+.media-controls.inline.uses-ltr-user-interface-layout-direction > .controls-bar.top-right,
+.media-controls.inline:not(.uses-ltr-user-interface-layout-direction) > .controls-bar.top-left {
left: auto;
right: var(--inline-controls-inside-margin);
top: var(--inline-controls-inside-margin);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js (218990 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2017-06-30 07:48:37 UTC (rev 218991)
@@ -164,6 +164,7 @@
this.rightContainer.buttons = this._rightContainerButtons();
this.rightContainer.buttons.concat(this.leftContainer.buttons).forEach(button => delete button.dropped);
this.muteButton.style = this.preferredMuteButtonStyle;
+ this.muteButton.usesRTLIconVariant = false;
for (let button of this._droppableButtons()) {
// If the button is not enabled, we can skip it.
@@ -239,7 +240,9 @@
{
if (this._shouldUseSingleBarLayout)
return [];
- return [this.fullscreenButton, this.pipButton];
+ if (this.usesLTRUserInterfaceLayoutDirection)
+ return [this.fullscreenButton, this.pipButton];
+ return [this.pipButton, this.fullscreenButton];
}
_leftContainerButtons()
@@ -280,6 +283,7 @@
delete this.muteButton.dropped;
this.muteButton.style = Button.Styles.Bar;
+ this.muteButton.usesRTLIconVariant = !this.usesLTRUserInterfaceLayoutDirection;
this._topRightControlsBarContainer.buttons = [this.muteButton];
this._topRightControlsBarContainer.layout();
this.topRightControlsBar.width = this._topRightControlsBarContainer.width;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (218990 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-06-30 07:48:37 UTC (rev 218991)
@@ -113,6 +113,7 @@
set usesLTRUserInterfaceLayoutDirection(flag)
{
+ this.needsLayout = this.usesLTRUserInterfaceLayoutDirection !== flag;
this.element.classList.toggle("uses-ltr-user-interface-layout-direction", flag);
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/mute-button.js (218990 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/mute-button.js 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/mute-button.js 2017-06-30 07:48:37 UTC (rev 218991)
@@ -33,6 +33,9 @@
iconName: Icons.Volume,
layoutDelegate
});
+
+ this._muted = false;
+ this._usesRTLIconVariant = false;
}
// Public
@@ -39,15 +42,35 @@
get muted()
{
- return this.iconName === Icons.VolumeMuted;
+ return this._muted;
}
set muted(flag)
{
- if (this.muted === flag)
+ if (this._muted === flag)
return;
- this.iconName = flag ? Icons.VolumeMuted : Icons.Volume;
+ this._muted = flag;
+ this.needsLayout = true;
}
+ set usesRTLIconVariant(flag)
+ {
+ if (this._usesRTLIconVariant === flag)
+ return;
+
+ this._usesRTLIconVariant = flag;
+ this.needsLayout = true;
+ }
+
+ // Protected
+
+ layout()
+ {
+ if (this._usesRTLIconVariant)
+ this.iconName = this._muted ? Icons.VolumeMutedRTL : Icons.VolumeRTL;
+ else
+ this.iconName = this._muted ? Icons.VolumeMuted : Icons.Volume;
+ }
+
}
Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/Mute-RTL.svg (0 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/Mute-RTL.svg (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/Mute-RTL.svg 2017-06-30 07:48:37 UTC (rev 218991)
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+ <title>_Assets/Both/Mute RTL</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="_Assets/Both/Mute-RTL" fill="#000000">
+ <path d="M15.0384401,12.4336332 L14.7151198,12.7445465 C14.3273368,13.1174489 14,12.9886171 14,12.44141 L14,11.8340896 L15.0384401,12.4336332 Z M14,7.79263767 L14,2.56259782 C14,2.02224368 14.328475,1.87372699 14.7336617,2.24618642 L17.7297388,5.00026821 C17.7787854,5 17.8276579,5 17.877,5 L20.123,5 C20.195,5 20.266,5 20.338,5.00083333 C20.398,5.00083333 20.459,5.00166667 20.519,5.0025 C20.651,5.00583333 20.783,5.01166667 20.913,5.03166667 C21.045,5.05166667 21.168,5.08333333 21.288,5.13416667 C21.406,5.18416667 21.514,5.25 21.607,5.3275 C21.701,5.40583333 21.779,5.495 21.839,5.59333333 C21.9,5.69333333 21.939,5.79583333 21.962,5.90583333 C21.986,6.01416667 21.993,6.125 21.997,6.23416667 C21.999,6.28416667 21.999,6.335 21.999,6.385 C22,6.445 22,6.50416667 22,6.56416667 L22,8.43583333 C22,8.49583333 22,8.55583333 21.999,8.615 C21.999,8.66583333 21.999,8.71583333 21.997,8.76583333 C21.993,8.87583333 21.986,8.98583333 21.962,9.09416667 C21.939,9.20416667 21.9,9.3066
6667 21.839,9.40666667 C21.779,9.505 21.701,9.595 21.607,9.6725 C21.514,9.75083333 21.406,9.81583333 21.288,9.86583333 C21.168,9.91666667 21.045,9.94916667 20.913,9.96833333 C20.783,9.98833333 20.651,9.99416667 20.519,9.9975 C20.459,9.99916667 20.398,9.99916667 20.338,10 L20.123,10 L17.877,10 L17.8232637,10 L14,7.79263767 Z M12.0984016,10.7362012 C12.0719556,10.7963525 12.0306958,10.8516898 11.975,10.8969802 C11.786,11.0514833 11.502,11.0295606 11.34,10.848959 C11.0688063,10.5458841 10.8359472,10.228546 10.6440423,9.89652647 L12.0984016,10.7362012 Z M10.3551781,5.68829877 C10.5818609,5.1395229 10.9135304,4.62764579 11.34,4.15104101 C11.502,3.97043942 11.786,3.94851668 11.975,4.10301978 C12.165,4.25752287 12.187,4.52894723 12.026,4.70954882 C11.6287256,5.15341338 11.3293676,5.62791235 11.1397237,6.1412564 L10.3551781,5.68829877 Z M6.00498141,7.21816342 L6.90494133,7.73775552 C6.9605099,9.41225607 7.60202565,11.0012512 8.725,12.307171 C8.882,12.4897218 8.852,12.7568441 8.659,12.90536
C8.466,13.0528445 8.182,13.0249978 8.025,12.842447 C6.719,11.3242845 6,9.45649073 6,7.5 C6,7.40583933 6.00166538,7.31188411 6.00498141,7.21816342 Z M6.95104701,3.72292276 C7.24532664,3.17072984 7.60477673,2.64604244 8.025,2.15755298 C8.182,1.97500219 8.466,1.94715546 8.659,2.09464 C8.852,2.2431559 8.882,2.51027825 8.725,2.69282905 C8.32972705,3.15249651 7.99410451,3.64723565 7.72268909,4.16843052 L6.95104701,3.72292276 Z M2.26185384,5.05706771 L3.08281215,5.53104821 C2.96197404,6.16994634 2.901,6.82684524 2.901,7.5 C2.901,10.0310229 3.763,12.3322339 5.428,14.3108837 C5.583,14.4953516 5.551,14.7622632 5.355,14.9075703 C5.161,15.0539079 4.877,15.0229915 4.722,14.8395542 C2.929,12.7083835 2,10.2247657 2,7.5 C2,6.66178829 2.08791538,5.84639747 2.26185384,5.05706771 Z M3.57096454,1.77143124 C3.90321848,1.21476886 4.28720592,0.677244684 4.722,0.160445787 C4.877,-0.0229915406 5.161,-0.0539079442 5.355,0.0924296995 C5.551,0.237736796 5.583,0.504648414 5.428,0.689116289 C5.01602607,1.1786971
6 4.6532138,1.68802602 4.34045694,2.21569788 L3.57096454,1.77143124 Z M0.348205106,1.99951896 C0.555310106,1.64080257 1.00825831,1.51457545 1.37243073,1.7248305 L21.3782047,13.2751695 C21.7367591,13.4821809 21.8609811,13.9382988 21.6524304,14.2995191 C21.4453254,14.6582355 20.9923772,14.7844627 20.6282047,14.5742076 L0.622430735,3.0238686 C0.263876405,2.81685716 0.139654415,2.36073935 0.348205106,1.99951896 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg (0 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/VolumeHi-RTL.svg 2017-06-30 07:48:37 UTC (rev 218991)
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+ <title>_Assets/Both/VolumeHi RTL</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="_Assets/Both/VolumeHi-RTL" fill="#000000" transform="translate(2, 0)">
+ <path d="M15.5701763,9.99904876 L12.7151198,12.7445465 C12.3273368,13.1174489 12,12.9886171 12,12.44141 L12,2.56259782 C12,2.02224368 12.328475,1.87372699 12.7336617,2.24618642 L15.7297388,5.00026821 C15.7787854,5 15.8276579,5 15.877,5 L18.123,5 C18.195,5 18.266,5 18.338,5.00083333 C18.398,5.00083333 18.459,5.00166667 18.519,5.0025 C18.651,5.00583333 18.783,5.01166667 18.913,5.03166667 C19.045,5.05166667 19.168,5.08333333 19.288,5.13416667 C19.406,5.18416667 19.514,5.25 19.607,5.3275 C19.701,5.40583333 19.779,5.495 19.839,5.59333333 C19.9,5.69333333 19.939,5.79583333 19.962,5.90583333 C19.986,6.01416667 19.993,6.125 19.997,6.23416667 C19.999,6.28416667 19.999,6.335 19.999,6.385 C20,6.445 20,6.50416667 20,6.56416667 L20,8.43583333 C20,8.49583333 20,8.55583333 19.999,8.615 C19.999,8.66583333 19.999,8.71583333 19.997,8.76583333 C19.993,8.87583333 19.986,8.98583333 19.962,9.09416667 C19.939,9.20416667 19.9,9.30666667 19.839,9.40666667 C19.779,9.505 19.701,9.595 19.60
7,9.6725 C19.514,9.75083333 19.406,9.81583333 19.288,9.86583333 C19.168,9.91666667 19.045,9.94916667 18.913,9.96833333 C18.783,9.98833333 18.651,9.99416667 18.519,9.9975 C18.459,9.99916667 18.398,9.99916667 18.338,10 L18.123,10 L15.877,10 L15.662,10 C15.6315624,9.99957726 15.6008675,9.99936897 15.5701763,9.99904876 Z M10.026,10.2904512 C10.187,10.4710528 10.165,10.7424771 9.975,10.8969802 C9.786,11.0514833 9.502,11.0295606 9.34,10.848959 C8.475,9.8822707 8,8.77047478 8,7.5 C8,6.22952522 8.475,5.1177293 9.34,4.15104101 C9.502,3.97043942 9.786,3.94851668 9.975,4.10301978 C10.165,4.25752287 10.187,4.52894723 10.026,4.70954882 C9.3,5.52069007 8.901,6.43413743 8.901,7.5 C8.901,8.56586257 9.3,9.47930993 10.026,10.2904512 Z M6.725,12.307171 C6.882,12.4897218 6.852,12.7568441 6.659,12.90536 C6.466,13.0528445 6.182,13.0249978 6.025,12.842447 C4.719,11.3242845 4,9.45649073 4,7.5 C4,5.54350927 4.719,3.67571553 6.025,2.15755298 C6.182,1.97500219 6.466,1.94715546 6.659,2.09464 C6.852,2.2431559 6
.882,2.51027825 6.725,2.69282905 C5.549,4.06041297 4.901,5.73843639 4.901,7.5 C4.901,9.26156361 5.549,10.939587 6.725,12.307171 Z M3.428,14.3108837 C3.583,14.4953516 3.551,14.7622632 3.355,14.9075703 C3.161,15.0539079 2.877,15.0229915 2.722,14.8395542 C0.929,12.7083835 8.8817842e-16,10.2247657 8.8817842e-16,7.5 C8.8817842e-16,4.7752343 0.929,2.29161654 2.722,0.160445787 C2.877,-0.0229915406 3.161,-0.0539079442 3.355,0.0924296995 C3.551,0.237736796 3.583,0.504648414 3.428,0.689116289 C1.763,2.66776612 0.901,4.96897709 0.901,7.5 C0.901,10.0310229 1.763,12.3322339 3.428,14.3108837 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg (0 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/Mute-RTL.svg 2017-06-30 07:48:37 UTC (rev 218991)
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+ <title>_Assets/Both/Mute RTL</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="_Assets/Both/Mute-RTL" fill="#000000">
+ <path d="M15.0384401,12.4336332 L14.7151198,12.7445465 C14.3273368,13.1174489 14,12.9886171 14,12.44141 L14,11.8340896 L15.0384401,12.4336332 Z M14,7.79263767 L14,2.56259782 C14,2.02224368 14.328475,1.87372699 14.7336617,2.24618642 L17.7297388,5.00026821 C17.7787854,5 17.8276579,5 17.877,5 L20.123,5 C20.195,5 20.266,5 20.338,5.00083333 C20.398,5.00083333 20.459,5.00166667 20.519,5.0025 C20.651,5.00583333 20.783,5.01166667 20.913,5.03166667 C21.045,5.05166667 21.168,5.08333333 21.288,5.13416667 C21.406,5.18416667 21.514,5.25 21.607,5.3275 C21.701,5.40583333 21.779,5.495 21.839,5.59333333 C21.9,5.69333333 21.939,5.79583333 21.962,5.90583333 C21.986,6.01416667 21.993,6.125 21.997,6.23416667 C21.999,6.28416667 21.999,6.335 21.999,6.385 C22,6.445 22,6.50416667 22,6.56416667 L22,8.43583333 C22,8.49583333 22,8.55583333 21.999,8.615 C21.999,8.66583333 21.999,8.71583333 21.997,8.76583333 C21.993,8.87583333 21.986,8.98583333 21.962,9.09416667 C21.939,9.20416667 21.9,9.3066
6667 21.839,9.40666667 C21.779,9.505 21.701,9.595 21.607,9.6725 C21.514,9.75083333 21.406,9.81583333 21.288,9.86583333 C21.168,9.91666667 21.045,9.94916667 20.913,9.96833333 C20.783,9.98833333 20.651,9.99416667 20.519,9.9975 C20.459,9.99916667 20.398,9.99916667 20.338,10 L20.123,10 L17.877,10 L17.8232637,10 L14,7.79263767 Z M12.0984016,10.7362012 C12.0719556,10.7963525 12.0306958,10.8516898 11.975,10.8969802 C11.786,11.0514833 11.502,11.0295606 11.34,10.848959 C11.0688063,10.5458841 10.8359472,10.228546 10.6440423,9.89652647 L12.0984016,10.7362012 Z M10.3551781,5.68829877 C10.5818609,5.1395229 10.9135304,4.62764579 11.34,4.15104101 C11.502,3.97043942 11.786,3.94851668 11.975,4.10301978 C12.165,4.25752287 12.187,4.52894723 12.026,4.70954882 C11.6287256,5.15341338 11.3293676,5.62791235 11.1397237,6.1412564 L10.3551781,5.68829877 Z M6.00498141,7.21816342 L6.90494133,7.73775552 C6.9605099,9.41225607 7.60202565,11.0012512 8.725,12.307171 C8.882,12.4897218 8.852,12.7568441 8.659,12.90536
C8.466,13.0528445 8.182,13.0249978 8.025,12.842447 C6.719,11.3242845 6,9.45649073 6,7.5 C6,7.40583933 6.00166538,7.31188411 6.00498141,7.21816342 Z M6.95104701,3.72292276 C7.24532664,3.17072984 7.60477673,2.64604244 8.025,2.15755298 C8.182,1.97500219 8.466,1.94715546 8.659,2.09464 C8.852,2.2431559 8.882,2.51027825 8.725,2.69282905 C8.32972705,3.15249651 7.99410451,3.64723565 7.72268909,4.16843052 L6.95104701,3.72292276 Z M2.26185384,5.05706771 L3.08281215,5.53104821 C2.96197404,6.16994634 2.901,6.82684524 2.901,7.5 C2.901,10.0310229 3.763,12.3322339 5.428,14.3108837 C5.583,14.4953516 5.551,14.7622632 5.355,14.9075703 C5.161,15.0539079 4.877,15.0229915 4.722,14.8395542 C2.929,12.7083835 2,10.2247657 2,7.5 C2,6.66178829 2.08791538,5.84639747 2.26185384,5.05706771 Z M3.57096454,1.77143124 C3.90321848,1.21476886 4.28720592,0.677244684 4.722,0.160445787 C4.877,-0.0229915406 5.161,-0.0539079442 5.355,0.0924296995 C5.551,0.237736796 5.583,0.504648414 5.428,0.689116289 C5.01602607,1.1786971
6 4.6532138,1.68802602 4.34045694,2.21569788 L3.57096454,1.77143124 Z M0.348205106,1.99951896 C0.555310106,1.64080257 1.00825831,1.51457545 1.37243073,1.7248305 L21.3782047,13.2751695 C21.7367591,13.4821809 21.8609811,13.9382988 21.6524304,14.2995191 C21.4453254,14.6582355 20.9923772,14.7844627 20.6282047,14.5742076 L0.622430735,3.0238686 C0.263876405,2.81685716 0.139654415,2.36073935 0.348205106,1.99951896 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg (0 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/VolumeHi-RTL.svg 2017-06-30 07:48:37 UTC (rev 218991)
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+ <title>_Assets/Both/VolumeHi RTL</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Media-Control-Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="_Assets/Both/VolumeHi-RTL" fill="#000000" transform="translate(2, 0)">
+ <path d="M15.5701763,9.99904876 L12.7151198,12.7445465 C12.3273368,13.1174489 12,12.9886171 12,12.44141 L12,2.56259782 C12,2.02224368 12.328475,1.87372699 12.7336617,2.24618642 L15.7297388,5.00026821 C15.7787854,5 15.8276579,5 15.877,5 L18.123,5 C18.195,5 18.266,5 18.338,5.00083333 C18.398,5.00083333 18.459,5.00166667 18.519,5.0025 C18.651,5.00583333 18.783,5.01166667 18.913,5.03166667 C19.045,5.05166667 19.168,5.08333333 19.288,5.13416667 C19.406,5.18416667 19.514,5.25 19.607,5.3275 C19.701,5.40583333 19.779,5.495 19.839,5.59333333 C19.9,5.69333333 19.939,5.79583333 19.962,5.90583333 C19.986,6.01416667 19.993,6.125 19.997,6.23416667 C19.999,6.28416667 19.999,6.335 19.999,6.385 C20,6.445 20,6.50416667 20,6.56416667 L20,8.43583333 C20,8.49583333 20,8.55583333 19.999,8.615 C19.999,8.66583333 19.999,8.71583333 19.997,8.76583333 C19.993,8.87583333 19.986,8.98583333 19.962,9.09416667 C19.939,9.20416667 19.9,9.30666667 19.839,9.40666667 C19.779,9.505 19.701,9.595 19.60
7,9.6725 C19.514,9.75083333 19.406,9.81583333 19.288,9.86583333 C19.168,9.91666667 19.045,9.94916667 18.913,9.96833333 C18.783,9.98833333 18.651,9.99416667 18.519,9.9975 C18.459,9.99916667 18.398,9.99916667 18.338,10 L18.123,10 L15.877,10 L15.662,10 C15.6315624,9.99957726 15.6008675,9.99936897 15.5701763,9.99904876 Z M10.026,10.2904512 C10.187,10.4710528 10.165,10.7424771 9.975,10.8969802 C9.786,11.0514833 9.502,11.0295606 9.34,10.848959 C8.475,9.8822707 8,8.77047478 8,7.5 C8,6.22952522 8.475,5.1177293 9.34,4.15104101 C9.502,3.97043942 9.786,3.94851668 9.975,4.10301978 C10.165,4.25752287 10.187,4.52894723 10.026,4.70954882 C9.3,5.52069007 8.901,6.43413743 8.901,7.5 C8.901,8.56586257 9.3,9.47930993 10.026,10.2904512 Z M6.725,12.307171 C6.882,12.4897218 6.852,12.7568441 6.659,12.90536 C6.466,13.0528445 6.182,13.0249978 6.025,12.842447 C4.719,11.3242845 4,9.45649073 4,7.5 C4,5.54350927 4.719,3.67571553 6.025,2.15755298 C6.182,1.97500219 6.466,1.94715546 6.659,2.09464 C6.852,2.2431559 6
.882,2.51027825 6.725,2.69282905 C5.549,4.06041297 4.901,5.73843639 4.901,7.5 C4.901,9.26156361 5.549,10.939587 6.725,12.307171 Z M3.428,14.3108837 C3.583,14.4953516 3.551,14.7622632 3.355,14.9075703 C3.161,15.0539079 2.877,15.0229915 2.722,14.8395542 C0.929,12.7083835 8.8817842e-16,10.2247657 8.8817842e-16,7.5 C8.8817842e-16,4.7752343 0.929,2.29161654 2.722,0.160445787 C2.877,-0.0229915406 3.161,-0.0539079442 3.355,0.0924296995 C3.551,0.237736796 3.583,0.504648414 3.428,0.689116289 C1.763,2.66776612 0.901,4.96897709 0.901,7.5 C0.901,10.0310229 1.763,12.3322339 3.428,14.3108837 Z" id="iOS/Fullscreen/Mute" style="mix-blend-mode: normal;"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (218990 => 218991)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-06-30 07:34:01 UTC (rev 218990)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-06-30 07:48:37 UTC (rev 218991)
@@ -38,6 +38,7 @@
this.container.className = "media-controls-container";
this._updateControlsIfNeeded();
+ this._usesLTRUserInterfaceLayoutDirection = false;
if (host) {
host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;
@@ -115,6 +116,10 @@
set usesLTRUserInterfaceLayoutDirection(flag)
{
+ if (this._usesLTRUserInterfaceLayoutDirection === flag)
+ return;
+
+ this._usesLTRUserInterfaceLayoutDirection = flag;
this.controls.usesLTRUserInterfaceLayoutDirection = flag;
}
