[Modern Media Controls] Implement the pageScaleFactor property
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Dec 2016 18:28:21 +0000 (18:28 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Dec 2016 18:28:21 +0000 (18:28 +0000)
https://bugs.webkit.org/show_bug.cgi?id=165660

Reviewed by Dean Jackson.

Source/WebCore:

We implement the pageScaleFactor property on MediaController. This property is set
by the HTMLMediaElement when the page scale factor changes, and we only choose to handle
it on iOS by setting controlsDependOnPageScaleFactor to true on the MediaControlsHost.

To do so, we now size the media controls by multiplying the layout size of the media by
the page scale factor, and apply an inverse CSS zoom on the media controls themselves.

Test: media/modern-media-controls/media-controller/media-controller-scale-factor.html

* Modules/modern-media-controls/controls/media-controls.css:
(.media-controls-container,):
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.get scaleFactor):
(MediaControls.prototype.set scaleFactor):
(MediaControls.prototype.commitProperty):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
(MediaController.prototype.set pageScaleFactor):
(MediaController.prototype._updateControlsSize):
* html/HTMLMediaElement.cpp:
(WebCore::controllerJSValue):
(WebCore::HTMLMediaElement::setControllerJSProperty):

We no longer hit a JSC assertion when trying to set the pageScaleFactor property before
the JS controller was actually created.

LayoutTests:

Add a new test to check that we correctly zoom and size the media controls when the page
scale factor is a value other than 1.

* media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt: Added.
* media/modern-media-controls/media-controller/media-controller-scale-factor.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@209615 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/media-controls.js
Source/WebCore/Modules/modern-media-controls/media/media-controller.js
Source/WebCore/html/HTMLMediaElement.cpp

index 126f655..9f0ead2 100644 (file)
@@ -1,3 +1,16 @@
+2016-12-09  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Implement the pageScaleFactor property
+        https://bugs.webkit.org/show_bug.cgi?id=165660
+
+        Reviewed by Dean Jackson.
+
+        Add a new test to check that we correctly zoom and size the media controls when the page
+        scale factor is a value other than 1.
+
+        * media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt: Added.
+        * media/modern-media-controls/media-controller/media-controller-scale-factor.html: Added.
+
 2016-12-09  Ryan Haddad  <ryanhaddad@apple.com>
 
         Unreviewed, rolling out r209574.
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt b/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt
new file mode 100644 (file)
index 0000000..ff11d7b
--- /dev/null
@@ -0,0 +1,13 @@
+Testing the MediaController has a single container for captions and media controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS shadowRoot.querySelector('.media-controls').style.width is "800px"
+PASS shadowRoot.querySelector('.media-controls').style.height is "600px"
+PASS shadowRoot.querySelector('.media-controls').style.zoom is "0.5"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html b/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html
new file mode 100644 (file)
index 0000000..bb8003a
--- /dev/null
@@ -0,0 +1,27 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<meta name="viewport" content="width=400">
+<body>
+<video src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 400px; height: 300px;" controls></video>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> has a single container for captions and media controls.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+window.requestAnimationFrame(() => {
+    shouldBeEqualToString("shadowRoot.querySelector('.media-controls').style.width", "800px");
+    shouldBeEqualToString("shadowRoot.querySelector('.media-controls').style.height", "600px");
+    shouldBeEqualToString("shadowRoot.querySelector('.media-controls').style.zoom", "0.5");
+
+    debug("");
+    media.remove();
+    finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index e5190f1..3d414f7 100644 (file)
@@ -1,3 +1,36 @@
+2016-12-09  Antoine Quint  <graouts@apple.com>
+
+        [Modern Media Controls] Implement the pageScaleFactor property
+        https://bugs.webkit.org/show_bug.cgi?id=165660
+
+        Reviewed by Dean Jackson.
+
+        We implement the pageScaleFactor property on MediaController. This property is set
+        by the HTMLMediaElement when the page scale factor changes, and we only choose to handle
+        it on iOS by setting controlsDependOnPageScaleFactor to true on the MediaControlsHost.
+
+        To do so, we now size the media controls by multiplying the layout size of the media by
+        the page scale factor, and apply an inverse CSS zoom on the media controls themselves.
+
+        Test: media/modern-media-controls/media-controller/media-controller-scale-factor.html
+
+        * Modules/modern-media-controls/controls/media-controls.css:
+        (.media-controls-container,):
+        * Modules/modern-media-controls/controls/media-controls.js:
+        (MediaControls.prototype.get scaleFactor):
+        (MediaControls.prototype.set scaleFactor):
+        (MediaControls.prototype.commitProperty):
+        * Modules/modern-media-controls/media/media-controller.js:
+        (MediaController):
+        (MediaController.prototype.set pageScaleFactor):
+        (MediaController.prototype._updateControlsSize):
+        * html/HTMLMediaElement.cpp:
+        (WebCore::controllerJSValue):
+        (WebCore::HTMLMediaElement::setControllerJSProperty):
+
+        We no longer hit a JSC assertion when trying to set the pageScaleFactor property before
+        the JS controller was actually created.
+
 2016-12-09  Daniel Bates  <dabates@apple.com>
 
         Attempt to fix the Mac CMake build following <http://trac.webkit.org/changeset/209549>
index 6563125..9713b8b 100644 (file)
     width: 100%;
 }
 
+.media-controls-container,
+.media-controls-container * {
+    -webkit-text-zoom: reset;
+    -webkit-text-size-adjust: auto;
+}
+
 .media-controls-container > * {
     position: absolute;
 }
index fd5488a..78503d7 100644 (file)
@@ -30,6 +30,8 @@ class MediaControls extends LayoutNode
     {
         super(`<div class="media-controls">`);
 
+        this._scaleFactor = 1;
+
         this.width = width;
         this.height = height;
         this.layoutTraits = layoutTraits;
@@ -80,6 +82,20 @@ class MediaControls extends LayoutNode
         this.element.classList.toggle("uses-ltr-user-interface-layout-direction", flag);
     }
 
+    get scaleFactor()
+    {
+        return this._scaleFactor;
+    }
+    
+    set scaleFactor(scaleFactor)
+    {
+        if (this._scaleFactor === scaleFactor)
+            return;
+    
+        this._scaleFactor = scaleFactor;
+        this.markDirtyProperty("scaleFactor");
+    }
+
     get showsPlacard()
     {
         return this.children[0] instanceof Placard;
@@ -106,6 +122,16 @@ class MediaControls extends LayoutNode
         this.element.classList.add("fade-in");
     }
 
+    // Protected
+
+    commitProperty(propertyName)
+    {
+        if (propertyName === "scaleFactor")
+            this.element.style.zoom = 1 / this._scaleFactor;
+        else
+            super.commitProperty(propertyName);
+    }
+
     // Private
 
     _invalidateChildren()
index cab4f59..c65f6c7 100644 (file)
@@ -35,8 +35,10 @@ class MediaController
         this.container = shadowRoot.appendChild(document.createElement("div"));
         this.container.className = "media-controls-container";
 
-        if (host)
+        if (host) {
+            host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;
             this.container.appendChild(host.textTrackContainer);
+        }
 
         this._updateControlsIfNeeded();
 
@@ -63,7 +65,8 @@ class MediaController
 
     set pageScaleFactor(pageScaleFactor)
     {
-        // FIXME: To be implemented.
+        this.controls.scaleFactor = pageScaleFactor;
+        this._updateControlsSize();
     }
 
     set usesLTRUserInterfaceLayoutDirection(flag)
@@ -119,8 +122,8 @@ class MediaController
 
     _updateControlsSize()
     {
-        this.controls.width = this.media.offsetWidth;
-        this.controls.height = this.media.offsetHeight;
+        this.controls.width = Math.round(this.media.offsetWidth * this.controls.scaleFactor);
+        this.controls.height = Math.round(this.media.offsetHeight * this.controls.scaleFactor);
     }
 
     _returnMediaLayerToInlineIfNeeded()
index 07bb1d4..e465bfc 100644 (file)
@@ -3863,7 +3863,7 @@ static JSC::JSValue controllerJSValue(JSC::ExecState& exec, JSDOMGlobalObject& g
     
     JSC::Identifier controlsHost = JSC::Identifier::fromString(&vm, "controlsHost");
     JSC::JSValue controlsHostJSWrapper = mediaJSWrapperObject->get(&exec, controlsHost);
-    RETURN_IF_EXCEPTION(scope, JSC::JSValue());
+    RETURN_IF_EXCEPTION(scope, JSC::jsNull());
 
     JSC::JSObject* controlsHostJSWrapperObject = jsDynamicDowncast<JSC::JSObject*>(controlsHostJSWrapper);
     if (!controlsHostJSWrapperObject)
@@ -3871,7 +3871,7 @@ static JSC::JSValue controllerJSValue(JSC::ExecState& exec, JSDOMGlobalObject& g
 
     JSC::Identifier controllerID = JSC::Identifier::fromString(&vm, "controller");
     JSC::JSValue controllerJSWrapper = controlsHostJSWrapperObject->get(&exec, controllerID);
-    RETURN_IF_EXCEPTION(scope, JSC::JSValue());
+    RETURN_IF_EXCEPTION(scope, JSC::jsNull());
 
     return controllerJSWrapper;
 }
@@ -6566,6 +6566,9 @@ void HTMLMediaElement::setControllerJSProperty(const char* propertyName, JSC::JS
     JSC::JSLockHolder lock(exec);
 
     JSC::JSValue controllerValue = controllerJSValue(*exec, *globalObject, *this);
+    if (controllerValue.isNull())
+        return;
+
     JSC::PutPropertySlot propertySlot(controllerValue);
     JSC::JSObject* controllerObject = controllerValue.toObject(exec);
     if (!controllerObject)