- Revision
- 209615
- Author
- grao...@webkit.org
- Date
- 2016-12-09 10:28:21 -0800 (Fri, 09 Dec 2016)
Log Message
[Modern Media Controls] Implement the pageScaleFactor property
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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (209614 => 209615)
--- trunk/LayoutTests/ChangeLog 2016-12-09 18:27:50 UTC (rev 209614)
+++ trunk/LayoutTests/ChangeLog 2016-12-09 18:28:21 UTC (rev 209615)
@@ -1,3 +1,16 @@
+2016-12-09 Antoine Quint <grao...@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 <ryanhad...@apple.com>
Unreviewed, rolling out r209574.
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt (0 => 209615)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt 2016-12-09 18:28:21 UTC (rev 209615)
@@ -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
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html (0 => 209615)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html 2016-12-09 18:28:21 UTC (rev 209615)
@@ -0,0 +1,27 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<meta name="viewport" content="width=400">
+<body>
+<video src="" 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=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (209614 => 209615)
--- trunk/Source/WebCore/ChangeLog 2016-12-09 18:27:50 UTC (rev 209614)
+++ trunk/Source/WebCore/ChangeLog 2016-12-09 18:28:21 UTC (rev 209615)
@@ -1,3 +1,36 @@
+2016-12-09 Antoine Quint <grao...@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 <daba...@apple.com>
Attempt to fix the Mac CMake build following <http://trac.webkit.org/changeset/209549>
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (209614 => 209615)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2016-12-09 18:27:50 UTC (rev 209614)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2016-12-09 18:28:21 UTC (rev 209615)
@@ -40,6 +40,12 @@
width: 100%;
}
+.media-controls-container,
+.media-controls-container * {
+ -webkit-text-zoom: reset;
+ -webkit-text-size-adjust: auto;
+}
+
.media-controls-container > * {
position: absolute;
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (209614 => 209615)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-12-09 18:27:50 UTC (rev 209614)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-12-09 18:28:21 UTC (rev 209615)
@@ -30,6 +30,8 @@
{
super(`<div class="media-controls">`);
+ this._scaleFactor = 1;
+
this.width = width;
this.height = height;
this.layoutTraits = layoutTraits;
@@ -80,6 +82,20 @@
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 @@
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()
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209614 => 209615)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-09 18:27:50 UTC (rev 209614)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-09 18:28:21 UTC (rev 209615)
@@ -35,8 +35,10 @@
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 @@
set pageScaleFactor(pageScaleFactor)
{
- // FIXME: To be implemented.
+ this.controls.scaleFactor = pageScaleFactor;
+ this._updateControlsSize();
}
set usesLTRUserInterfaceLayoutDirection(flag)
@@ -119,8 +122,8 @@
_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()
Modified: trunk/Source/WebCore/html/HTMLMediaElement.cpp (209614 => 209615)
--- trunk/Source/WebCore/html/HTMLMediaElement.cpp 2016-12-09 18:27:50 UTC (rev 209614)
+++ trunk/Source/WebCore/html/HTMLMediaElement.cpp 2016-12-09 18:28:21 UTC (rev 209615)
@@ -3863,7 +3863,7 @@
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 @@
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 @@
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)
