<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[209615] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/209615">209615</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2016-12-09 10:28:21 -0800 (Fri, 09 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLMediaElementcpp">trunk/Source/WebCore/html/HTMLMediaElement.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerscalefactorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerscalefactorhtml">trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209614 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-09 18:27:50 UTC (rev 209614)
+++ trunk/LayoutTests/ChangeLog 2016-12-09 18:28:21 UTC (rev 209615)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+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.
+
</ins><span class="cx"> 2016-12-09 Ryan Haddad <ryanhaddad@apple.com>
</span><span class="cx">
</span><span class="cx"> Unreviewed, rolling out r209574.
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerscalefactorexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor-expected.txt (0 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,13 @@
</span><ins>+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
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrollermediacontrollerscalefactorhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-scale-factor.html (0 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,27 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (209614 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+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.
+
</ins><span class="cx"> 2016-12-09 Daniel Bates <dabates@apple.com>
</span><span class="cx">
</span><span class="cx"> Attempt to fix the Mac CMake build following <http://trac.webkit.org/changeset/209549>
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (209614 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -40,6 +40,12 @@
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.media-controls-container,
+.media-controls-container * {
+ -webkit-text-zoom: reset;
+ -webkit-text-size-adjust: auto;
+}
+
</ins><span class="cx"> .media-controls-container > * {
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (209614 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -30,6 +30,8 @@
</span><span class="cx"> {
</span><span class="cx"> super(`<div class="media-controls">`);
</span><span class="cx">
</span><ins>+ this._scaleFactor = 1;
+
</ins><span class="cx"> this.width = width;
</span><span class="cx"> this.height = height;
</span><span class="cx"> this.layoutTraits = layoutTraits;
</span><span class="lines">@@ -80,6 +82,20 @@
</span><span class="cx"> this.element.classList.toggle("uses-ltr-user-interface-layout-direction", flag);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ get scaleFactor()
+ {
+ return this._scaleFactor;
+ }
+
+ set scaleFactor(scaleFactor)
+ {
+ if (this._scaleFactor === scaleFactor)
+ return;
+
+ this._scaleFactor = scaleFactor;
+ this.markDirtyProperty("scaleFactor");
+ }
+
</ins><span class="cx"> get showsPlacard()
</span><span class="cx"> {
</span><span class="cx"> return this.children[0] instanceof Placard;
</span><span class="lines">@@ -106,6 +122,16 @@
</span><span class="cx"> this.element.classList.add("fade-in");
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ // Protected
+
+ commitProperty(propertyName)
+ {
+ if (propertyName === "scaleFactor")
+ this.element.style.zoom = 1 / this._scaleFactor;
+ else
+ super.commitProperty(propertyName);
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _invalidateChildren()
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209614 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -35,8 +35,10 @@
</span><span class="cx"> this.container = shadowRoot.appendChild(document.createElement("div"));
</span><span class="cx"> this.container.className = "media-controls-container";
</span><span class="cx">
</span><del>- if (host)
</del><ins>+ if (host) {
+ host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;
</ins><span class="cx"> this.container.appendChild(host.textTrackContainer);
</span><ins>+ }
</ins><span class="cx">
</span><span class="cx"> this._updateControlsIfNeeded();
</span><span class="cx">
</span><span class="lines">@@ -63,7 +65,8 @@
</span><span class="cx">
</span><span class="cx"> set pageScaleFactor(pageScaleFactor)
</span><span class="cx"> {
</span><del>- // FIXME: To be implemented.
</del><ins>+ this.controls.scaleFactor = pageScaleFactor;
+ this._updateControlsSize();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> set usesLTRUserInterfaceLayoutDirection(flag)
</span><span class="lines">@@ -119,8 +122,8 @@
</span><span class="cx">
</span><span class="cx"> _updateControlsSize()
</span><span class="cx"> {
</span><del>- this.controls.width = this.media.offsetWidth;
- this.controls.height = this.media.offsetHeight;
</del><ins>+ this.controls.width = Math.round(this.media.offsetWidth * this.controls.scaleFactor);
+ this.controls.height = Math.round(this.media.offsetHeight * this.controls.scaleFactor);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _returnMediaLayerToInlineIfNeeded()
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLMediaElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLMediaElement.cpp (209614 => 209615)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -3863,7 +3863,7 @@
</span><span class="cx">
</span><span class="cx"> JSC::Identifier controlsHost = JSC::Identifier::fromString(&vm, "controlsHost");
</span><span class="cx"> JSC::JSValue controlsHostJSWrapper = mediaJSWrapperObject->get(&exec, controlsHost);
</span><del>- RETURN_IF_EXCEPTION(scope, JSC::JSValue());
</del><ins>+ RETURN_IF_EXCEPTION(scope, JSC::jsNull());
</ins><span class="cx">
</span><span class="cx"> JSC::JSObject* controlsHostJSWrapperObject = jsDynamicDowncast<JSC::JSObject*>(controlsHostJSWrapper);
</span><span class="cx"> if (!controlsHostJSWrapperObject)
</span><span class="lines">@@ -3871,7 +3871,7 @@
</span><span class="cx">
</span><span class="cx"> JSC::Identifier controllerID = JSC::Identifier::fromString(&vm, "controller");
</span><span class="cx"> JSC::JSValue controllerJSWrapper = controlsHostJSWrapperObject->get(&exec, controllerID);
</span><del>- RETURN_IF_EXCEPTION(scope, JSC::JSValue());
</del><ins>+ RETURN_IF_EXCEPTION(scope, JSC::jsNull());
</ins><span class="cx">
</span><span class="cx"> return controllerJSWrapper;
</span><span class="cx"> }
</span><span class="lines">@@ -6566,6 +6566,9 @@
</span><span class="cx"> JSC::JSLockHolder lock(exec);
</span><span class="cx">
</span><span class="cx"> JSC::JSValue controllerValue = controllerJSValue(*exec, *globalObject, *this);
</span><ins>+ if (controllerValue.isNull())
+ return;
+
</ins><span class="cx"> JSC::PutPropertySlot propertySlot(controllerValue);
</span><span class="cx"> JSC::JSObject* controllerObject = controllerValue.toObject(exec);
</span><span class="cx"> if (!controllerObject)
</span></span></pre>
</div>
</div>
</body>
</html>