- Revision
- 209170
- Author
- commit-qu...@webkit.org
- Date
- 2016-11-30 19:20:30 -0800 (Wed, 30 Nov 2016)
Log Message
[Modern Media Controls] Add support for right-to-left layouts
https://bugs.webkit.org/show_bug.cgi?id=165229
Patch by Antoine Quint <grao...@apple.com> on 2016-11-30
Reviewed by Dean Jackson.
Source/WebCore:
We implement the "usesLTRUserInterfaceLayoutDirection" property which is set by HTMLMediaElement
and set a CSS class when the layout is left-to-right, flipping the fullscreen volume slider in the
case that it would not be present (right-to-left).
Test: media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
(.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider):
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.get usesLTRUserInterfaceLayoutDirection):
(MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype.set usesLTRUserInterfaceLayoutDirection):
(MediaController.prototype._updateControlsIfNeeded):
LayoutTests:
Add a test that toggles the layout direction and checks we correctly flip the volume slider.
* media/modern-media-controls/media-controller/media-controller-fullscreen-ltr-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html: Added.
* platform/ios-simulator/TestExpectations:
* platform/mac/TestExpectations:
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (209169 => 209170)
--- trunk/LayoutTests/ChangeLog 2016-12-01 03:16:13 UTC (rev 209169)
+++ trunk/LayoutTests/ChangeLog 2016-12-01 03:20:30 UTC (rev 209170)
@@ -1,5 +1,19 @@
2016-11-30 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Add support for right-to-left layouts
+ https://bugs.webkit.org/show_bug.cgi?id=165229
+
+ Reviewed by Dean Jackson.
+
+ Add a test that toggles the layout direction and checks we correctly flip the volume slider.
+
+ * media/modern-media-controls/media-controller/media-controller-fullscreen-ltr-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html: Added.
+ * platform/ios-simulator/TestExpectations:
+ * platform/mac/TestExpectations:
+
+2016-11-30 Antoine Quint <grao...@apple.com>
+
[Modern Media Controls] LayoutNode: only mark properties as dirty if different than current value
https://bugs.webkit.org/show_bug.cgi?id=165236
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr-expected.txt (0 => 209170)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr-expected.txt 2016-12-01 03:20:30 UTC (rev 209170)
@@ -0,0 +1,21 @@
+Testing ltr is set correctly when entering fullscreen.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media entered fullscreen
+PASS mediaControlsElement.classList.contains('uses-ltr-user-interface-layout-direction') is true
+PASS document.defaultView.getComputedStyle(volumeSliderElement).transform is "none"
+
+Setting layout direction to RTL
+PASS mediaControlsElement.classList.contains('uses-ltr-user-interface-layout-direction') is false
+PASS document.defaultView.getComputedStyle(volumeSliderElement).transform is "matrix(-1, 0, 0, 1, 0, 0)"
+
+Setting layout direction back to LTR
+PASS mediaControlsElement.classList.contains('uses-ltr-user-interface-layout-direction') is true
+PASS document.defaultView.getComputedStyle(volumeSliderElement).transform is "none"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html (0 => 209170)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html 2016-12-01 03:20:30 UTC (rev 209170)
@@ -0,0 +1,71 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="width: 320px; height: 240px;" controls></video>
+<div id="shadow"></div>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing ltr is set correctly when entering fullscreen.");
+
+const media = document.querySelector("video");
+const button = document.body.appendChild(document.createElement("button"));
+let shadowRoot = window.internals.shadowRoot(media);
+let mediaControlsElement, volumeSliderElement;
+
+media.addEventListener("webkitfullscreenchange", function() {
+ if (media.webkitDisplayingFullscreen) {
+ window.requestAnimationFrame(() => {
+ debug("Media entered fullscreen");
+
+ mediaControlsElement = shadowRoot.lastChild;
+ volumeSliderElement = mediaControlsElement.querySelector(".volume.slider");
+
+ shouldBeTrue("mediaControlsElement.classList.contains('uses-ltr-user-interface-layout-direction')");
+ shouldBeEqualToString("document.defaultView.getComputedStyle(volumeSliderElement).transform", "none");
+
+ debug("");
+ debug("Setting layout direction to RTL");
+ window.internals.setUserInterfaceLayoutDirection("RTL");
+ shouldBeFalse("mediaControlsElement.classList.contains('uses-ltr-user-interface-layout-direction')");
+ shouldBeEqualToString("document.defaultView.getComputedStyle(volumeSliderElement).transform", "matrix(-1, 0, 0, 1, 0, 0)");
+
+ debug("");
+ debug("Setting layout direction back to LTR");
+ window.internals.setUserInterfaceLayoutDirection("LTR");
+ shouldBeTrue("mediaControlsElement.classList.contains('uses-ltr-user-interface-layout-direction')");
+ shouldBeEqualToString("document.defaultView.getComputedStyle(volumeSliderElement).transform", "none");
+
+ debug("");
+ media.remove();
+ button.remove();
+ finishJSTest();
+ });
+ }
+});
+
+media.addEventListener("loadedmetadata", () => {
+ if (!("eventSender" in window)) {
+ debug("This test is designed to run in DRT");
+ return;
+ }
+
+ // Click a button so we may enter fullscreen.
+ button.addEventListener("click", event => {
+ try {
+ media.webkitEnterFullscreen();
+ } catch(e) {
+ debug("Toggling fullscreen failed");
+ finishJSTest();
+ }
+ });
+
+ eventSender.mouseMoveTo(button.offsetLeft + 1, button.offsetTop + 1);
+ eventSender.mouseDown();
+ eventSender.mouseUp();
+});
+
+</script>
+<script src=""
+</body>
Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (209169 => 209170)
--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-01 03:16:13 UTC (rev 209169)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-12-01 03:20:30 UTC (rev 209170)
@@ -2747,8 +2747,9 @@
media/modern-media-controls/placard-support [ Skip ]
media/modern-media-controls/audio [ Skip ]
-# This test is Mac-specific since it checks that we have custom controls in fullscreen.
+# Mac-specific tests for fullscreen.
media/modern-media-controls/media-controller/media-controller-fullscreen-change.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html [ Skip ]
webkit.org/b/164594 http/tests/cache/disk-cache/disk-cache-request-headers.html [ Pass Timeout ]
Modified: trunk/LayoutTests/platform/mac/TestExpectations (209169 => 209170)
--- trunk/LayoutTests/platform/mac/TestExpectations 2016-12-01 03:16:13 UTC (rev 209169)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2016-12-01 03:20:30 UTC (rev 209170)
@@ -1451,6 +1451,7 @@
[ Yosemite ] media/modern-media-controls/pip-support [ Skip ]
[ Yosemite ] media/modern-media-controls/placard-support [ Skip ]
[ Yosemite ] media/modern-media-controls/audio [ Skip ]
+[ Yosemite ] media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html [ Skip ]
webkit.org/b/164616 http/tests/media/modern-media-controls/skip-back-support/skip-back-support-button-click.html [ Pass Failure ]
webkit.org/b/164323 media/modern-media-controls/airplay-support/airplay-support.html [ Pass Failure ]
Modified: trunk/Source/WebCore/ChangeLog (209169 => 209170)
--- trunk/Source/WebCore/ChangeLog 2016-12-01 03:16:13 UTC (rev 209169)
+++ trunk/Source/WebCore/ChangeLog 2016-12-01 03:20:30 UTC (rev 209170)
@@ -1,3 +1,25 @@
+2016-11-30 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Add support for right-to-left layouts
+ https://bugs.webkit.org/show_bug.cgi?id=165229
+
+ Reviewed by Dean Jackson.
+
+ We implement the "usesLTRUserInterfaceLayoutDirection" property which is set by HTMLMediaElement
+ and set a CSS class when the layout is left-to-right, flipping the fullscreen volume slider in the
+ case that it would not be present (right-to-left).
+
+ Test: media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html
+
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
+ (.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider):
+ * Modules/modern-media-controls/controls/media-controls.js:
+ (MediaControls.prototype.get usesLTRUserInterfaceLayoutDirection):
+ (MediaControls.prototype.set usesLTRUserInterfaceLayoutDirection):
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype.set usesLTRUserInterfaceLayoutDirection):
+ (MediaController.prototype._updateControlsIfNeeded):
+
2016-11-30 Joseph Pecoraro <pecor...@apple.com>
Web Inspector: Remove unused parameter of InspectorInstrumentation::didFinishXHRLoading
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css (209169 => 209170)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2016-12-01 03:16:13 UTC (rev 209169)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2016-12-01 03:20:30 UTC (rev 209170)
@@ -46,6 +46,10 @@
top: 23px;
}
+.media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider {
+ transform: scaleX(-1);
+}
+
/* Button containers */
.media-controls.mac.fullscreen .buttons-container {
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (209169 => 209170)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-12-01 03:16:13 UTC (rev 209169)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-12-01 03:20:30 UTC (rev 209170)
@@ -70,6 +70,16 @@
this._invalidateChildren();
}
+ get usesLTRUserInterfaceLayoutDirection()
+ {
+ return this.element.classList.contains("uses-ltr-user-interface-layout-direction");
+ }
+
+ set usesLTRUserInterfaceLayoutDirection(flag)
+ {
+ this.element.classList.toggle("uses-ltr-user-interface-layout-direction", flag);
+ }
+
get showsPlacard()
{
return this.children[0] instanceof Placard;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209169 => 209170)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-01 03:16:13 UTC (rev 209169)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-01 03:20:30 UTC (rev 209170)
@@ -59,7 +59,7 @@
set usesLTRUserInterfaceLayoutDirection(flag)
{
- // FIXME: To be implemented.
+ this.controls.usesLTRUserInterfaceLayoutDirection = flag;
}
handleEvent(event)
@@ -98,9 +98,10 @@
this.controls = new ControlsClass;
- if (previousControls)
+ if (previousControls) {
this.shadowRoot.replaceChild(this.controls.element, previousControls.element);
- else
+ this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection;
+ } else
this.shadowRoot.appendChild(this.controls.element);
this._updateControlsSize();
