<!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>[213400] 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/213400">213400</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-03-03 17:12:40 -0800 (Fri, 03 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Improve media documents across macOS, iPhone and iPad
https://bugs.webkit.org/show_bug.cgi?id=169145
<rdar://problem/17048858>
Patch by Antoine Quint <graouts@apple.com> on 2017-03-03
Reviewed by Dean Jackson.
Source/WebCore:
There were a variety of issues with media documents, some longstanding, and some specifically
about modern media controls.
One issue was that fullscreen and picture-in-picture buttons would show for audio media documents,
due to using a <video> element to load the audio file. We now have additional logic in MediaController
to identify if the loaded media is really an audio file, and using this information to hide the
fullscreen and picture-in-picture buttons.
Another issue was that we would inject style in MediaDocument.cpp that was specific to modern media
controls when we could have the modern-media-controls module injected CSS handle this styling. We now
use the injected style in the shadow root to size media documents based on the device characteristics
and ensuring that page styles are overridden.
We also simplify how MediaDocument.cpp sets the source of the media element to simply use the "src"
attribute and not a <source> element.
Finally, we introduce a MediaDocumentController class that is instantiated when we're dealing with
a media document to hide the controls while we determine the type of media we're loading (audio vs.
video) in order to apply the appropriate styling without flashes.
As a result of the new styles applied by the modern-media-controls module, media documents have a
similar behavior on macOS and iPad, where we only enforce a min-width for video allowing them
to play at their natural size otherwise, and enforcing a fixed width for audio. On iPhone however,
we want to always play the media at full width, with some padding in the case of audio.
Tests: media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html
media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html
media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html
media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html
media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html
media/modern-media-controls/media-documents/media-document-video-ios-sizing.html
media/modern-media-controls/media-documents/media-document-video-mac-sizing.html
media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html
* Modules/modern-media-controls/controls/ios-inline-media-controls.css:
(:host(audio) .media-controls.ios.inline > .controls-bar:before,):
(:host(audio) .media-controls.ios.inline > .controls-bar:before): Deleted.
* Modules/modern-media-controls/controls/macos-media-controls.css:
(:host(audio) .media-controls.mac.inline > .controls-bar,):
(:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,):
(:host(audio) .media-controls.mac.inline > .controls-bar): Deleted.
(:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint): Deleted.
* Modules/modern-media-controls/controls/media-document.css: Added.
(:host(.media-document)):
(:host(.media-document.ready)):
(:host(.media-document.audio.mac)):
(:host(.media-document.audio.ipad)):
(:host(.media-document.audio.iphone)):
(:host(.media-document.video.mac)):
(:host(.media-document.video.ipad)):
(:host(.media-document.video.iphone)):
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/fullscreen-support.js:
(FullscreenSupport.prototype.syncControl):
(FullscreenSupport):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController):
(MediaController.prototype.get isAudio):
* Modules/modern-media-controls/media/media-document-controller.js: Added.
(MediaDocumentController):
(MediaDocumentController.prototype.handleEvent):
(MediaDocumentController.prototype._mediaDocumentHasMetadata):
(MediaDocumentController.prototype._mediaDocumentHasSize):
* Modules/modern-media-controls/media/pip-support.js:
(PiPSupport.prototype.syncControl):
(PiPSupport):
* html/MediaDocument.cpp:
(WebCore::MediaDocumentParser::createDocumentStructure):
LayoutTests:
We add new tests for media documents and related features that cover the following cases:
- checking <video> with only audio tracks does not show the fullscreen button
- checking <video> with only audio tracks does not show the picture-in-picture button
- checking the size used in media documents for audio and video across macOS, iPhone and iPad
* media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
* media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html: Added.
* media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-video-ios-sizing.html: Added.
* media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt: Added.
* media/modern-media-controls/media-documents/media-document-video-mac-sizing.html: Added.
* media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
* media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html: Added.
* platform/ios-simulator/TestExpectations:
* platform/mac/TestExpectations:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkLayoutTestsplatformmacTestExpectations">trunk/LayoutTests/platform/mac/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiosinlinemediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosmediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsjsfiles">trunk/Source/WebCore/Modules/modern-media-controls/js-files</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediafullscreensupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediapipsupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/pip-support.js</a></li>
<li><a href="#trunkSourceWebCorehtmlMediaDocumentcpp">trunk/Source/WebCore/html/MediaDocument.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsfullscreensupportfullscreensupportdisabledvideowithaudiotracksonlyexpectedtxt">trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsfullscreensupportfullscreensupportdisabledvideowithaudiotracksonlyhtml">trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentaudioiossizingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentaudioiossizinghtml">trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentvideoiossizingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentvideoiossizinghtml">trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudioiossizingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudioiossizinghtml">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudiomacsizingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudiomacsizinghtml">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideoiossizingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideoiossizinghtml">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideomacsizingexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideomacsizinghtml">trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolspipsupportpipsupportdisabledvideowithaudiotracksonlyexpectedtxt">trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolspipsupportpipsupportdisabledvideowithaudiotracksonlyhtml">trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediadocumentcss">trunk/Source/WebCore/Modules/modern-media-controls/controls/media-document.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediadocumentcontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/LayoutTests/ChangeLog 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+2017-03-03 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Improve media documents across macOS, iPhone and iPad
+ https://bugs.webkit.org/show_bug.cgi?id=169145
+ <rdar://problem/17048858>
+
+ Reviewed by Dean Jackson.
+
+ We add new tests for media documents and related features that cover the following cases:
+
+ - checking <video> with only audio tracks does not show the fullscreen button
+ - checking <video> with only audio tracks does not show the picture-in-picture button
+ - checking the size used in media documents for audio and video across macOS, iPhone and iPad
+
+ * media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
+ * media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html: Added.
+ * media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt: Added.
+ * media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html: Added.
+ * media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt: Added.
+ * media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html: Added.
+ * media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt: Added.
+ * media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html: Added.
+ * media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt: Added.
+ * media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html: Added.
+ * media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt: Added.
+ * media/modern-media-controls/media-documents/media-document-video-ios-sizing.html: Added.
+ * media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt: Added.
+ * media/modern-media-controls/media-documents/media-document-video-mac-sizing.html: Added.
+ * media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
+ * media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html: Added.
+ * platform/ios-simulator/TestExpectations:
+ * platform/mac/TestExpectations:
+
</ins><span class="cx"> 2017-03-03 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> [iOS] Throttle SVG SMIL animations to 30fps in low power mode
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsfullscreensupportfullscreensupportdisabledvideowithaudiotracksonlyexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,14 @@
</span><ins>+Testing that the fullscreen button is disabled for <video> with an audio resource.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Once media loads its metadata the fullscreen button should become disabled
+Obtained loadedmetadata event
+PASS mediaController.isAudio is true
+PASS mediaController.controls.fullscreenButton.enabled is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsfullscreensupportfullscreensupportdisabledvideowithaudiotracksonlyhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+
+ video, #host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ video {
+ width: 800px;
+ height: 240px;
+ }
+
+</style>
+<video src="../../content/test.wav" controls autoplay></video>
+<div id="host"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing that the fullscreen button is disabled for &lt;video> with an audio resource.");
+
+const container = document.querySelector("div#host");
+const media = document.querySelector("video");
+const mediaController = createControls(container, media, null);
+
+debug("Once media loads its metadata the fullscreen button should become disabled");
+media.addEventListener("loadedmetadata", () => {
+ debug("Obtained loadedmetadata event");
+ shouldBeTrue("mediaController.isAudio");
+ shouldBeFalse("mediaController.controls.fullscreenButton.enabled");
+
+ debug("");
+ media.remove();
+ container.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentaudioiossizingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the size of the media element in an audio media document on iOS.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(media).width became "650px"
+PASS getComputedStyle(media).height is "50px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentaudioiossizinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<script src="../../../../resources/js-test-pre.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<body>
+<iframe src="../../../content/silence.mp3" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+<script type="text/javascript">
+
+description("Testing the size of the media element in an audio media document on iOS.");
+
+window.jsTestIsAsync = true;
+
+let media;
+
+(function runTestIfReady() {
+ const iframe = document.querySelector("iframe");
+ media = iframe.contentDocument.querySelector("video");
+
+ if (!media) {
+ setTimeout(runTestIfReady);
+ return;
+ }
+
+ shouldBecomeEqualToString("getComputedStyle(media).width", "650px", () => {
+ shouldBeEqualToString("getComputedStyle(media).height", "50px");
+
+ debug("");
+ iframe.remove();
+ finishJSTest();
+ });
+
+})();
+
+</script>
+<script src="../../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentvideoiossizingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the size of the media element in a video media document on iOS.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(media).width became "700px"
+PASS getComputedStyle(media).height is "525px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsipadmediadocumentvideoiossizinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<script src="../../../../resources/js-test-pre.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<body>
+<iframe src="../../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+<script type="text/javascript">
+
+description("Testing the size of the media element in a video media document on iOS.");
+
+window.jsTestIsAsync = true;
+
+let media;
+
+(function runTestIfReady() {
+ const iframe = document.querySelector("iframe");
+ media = iframe.contentDocument.querySelector("video");
+
+ if (!media) {
+ setTimeout(runTestIfReady);
+ return;
+ }
+
+ shouldBecomeEqualToString("getComputedStyle(media).width", "700px", () => {
+ shouldBeEqualToString("getComputedStyle(media).height", "525px");
+
+ debug("");
+ iframe.remove();
+ finishJSTest();
+ });
+
+})();
+
+</script>
+<script src="../../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudioiossizingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the size of the media element in an audio media document on iOS.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(media).width became "320px"
+PASS getComputedStyle(media).height is "50px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudioiossizinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<body>
+<iframe src="../../content/silence.mp3" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+<script type="text/javascript">
+
+description("Testing the size of the media element in an audio media document on iOS.");
+
+window.jsTestIsAsync = true;
+
+let media;
+
+(function runTestIfReady() {
+ const iframe = document.querySelector("iframe");
+ media = iframe.contentDocument.querySelector("video");
+
+ if (!media) {
+ setTimeout(runTestIfReady);
+ return;
+ }
+
+ shouldBecomeEqualToString("getComputedStyle(media).width", "320px", () => {
+ shouldBeEqualToString("getComputedStyle(media).height", "50px");
+
+ debug("");
+ iframe.remove();
+ finishJSTest();
+ });
+
+})();
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudiomacsizingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the size of the media element in an audio media document on macOS.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(media).width became "650px"
+PASS getComputedStyle(media).height is "25px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentaudiomacsizinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<iframe src="../../content/test.wav" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+<script type="text/javascript">
+
+description("Testing the size of the media element in an audio media document on macOS.");
+
+window.jsTestIsAsync = true;
+
+let media;
+
+(function runTestIfReady() {
+ const iframe = document.querySelector("iframe");
+ media = iframe.contentDocument.querySelector("video");
+
+ if (!media) {
+ setTimeout(runTestIfReady);
+ return;
+ }
+
+ shouldBecomeEqualToString("getComputedStyle(media).width", "650px", () => {
+ shouldBeEqualToString("getComputedStyle(media).height", "25px");
+
+ debug("");
+ iframe.remove();
+ finishJSTest();
+ });
+
+})();
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideoiossizingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the size of the media element in a video media document on iOS.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(media).height became "240px"
+PASS getComputedStyle(media).width is "320px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideoiossizinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
+<script src="../../../resources/js-test-pre.js"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<body>
+<iframe src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+<script type="text/javascript">
+
+description("Testing the size of the media element in a video media document on iOS.");
+
+window.jsTestIsAsync = true;
+
+let media;
+
+(function runTestIfReady() {
+ const iframe = document.querySelector("iframe");
+ media = iframe.contentDocument.querySelector("video");
+
+ if (!media) {
+ setTimeout(runTestIfReady);
+ return;
+ }
+
+ shouldBecomeEqualToString("getComputedStyle(media).height", "240px", () => {
+ shouldBeEqualToString("getComputedStyle(media).width", "320px");
+
+ debug("");
+ iframe.remove();
+ finishJSTest();
+ });
+
+})();
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideomacsizingexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,12 @@
</span><ins>+Testing the size of the media element in a video media document on macOS.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(media).width became "700px"
+PASS getComputedStyle(media).height is "525px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediadocumentsmediadocumentvideomacsizinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-documents/media-document-video-mac-sizing.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<body>
+<iframe src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+<script type="text/javascript">
+
+description("Testing the size of the media element in a video media document on macOS.");
+
+window.jsTestIsAsync = true;
+
+let media;
+
+(function runTestIfReady() {
+ const iframe = document.querySelector("iframe");
+ media = iframe.contentDocument.querySelector("video");
+
+ if (!media) {
+ setTimeout(runTestIfReady);
+ return;
+ }
+
+ shouldBecomeEqualToString("getComputedStyle(media).width", "700px", () => {
+ shouldBeEqualToString("getComputedStyle(media).height", "525px");
+
+ debug("");
+ iframe.remove();
+ finishJSTest();
+ });
+
+})();
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolspipsupportpipsupportdisabledvideowithaudiotracksonlyexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,14 @@
</span><ins>+Testing that the picture-in-picture button is disabled for <video> with an audio resource.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Once media loads its metadata the picture-in-picture button should become disabled
+Obtained loadedmetadata event
+PASS mediaController.isAudio is true
+PASS mediaController.controls.pipButton.enabled is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolspipsupportpipsupportdisabledvideowithaudiotracksonlyhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+
+ video, #host {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ video {
+ width: 800px;
+ height: 240px;
+ }
+
+</style>
+<video src="../../content/test.wav" controls autoplay></video>
+<div id="host"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing that the picture-in-picture button is disabled for &lt;video> with an audio resource.");
+
+const container = document.querySelector("div#host");
+const media = document.querySelector("video");
+const mediaController = createControls(container, media, null);
+
+debug("Once media loads its metadata the picture-in-picture button should become disabled");
+media.addEventListener("loadedmetadata", () => {
+ debug("Obtained loadedmetadata event");
+ shouldBeTrue("mediaController.isAudio");
+ shouldBeFalse("mediaController.controls.pipButton.enabled");
+
+ debug("");
+ media.remove();
+ container.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -2818,6 +2818,8 @@
</span><span class="cx"> media/modern-media-controls/placard-support/placard-support-pip.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
</span><ins>+media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html [ Skip ]
+media/modern-media-controls/media-documents/media-document-video-mac-sizing.html [ Skip ]
</ins><span class="cx">
</span><span class="cx"> # These tests use uiController and need to be skipped in open-source
</span><span class="cx"> media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]
</span></span></pre></div>
<a id="trunkLayoutTestsplatformmacTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac/TestExpectations (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/TestExpectations 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -1480,6 +1480,10 @@
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]
</span><span class="cx"> media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
</span><ins>+media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html [ Skip ]
+media/modern-media-controls/media-documents/media-document-video-ios-sizing.html [ Skip ]
+media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html [ Skip ]
+media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html [ Skip ]
</ins><span class="cx">
</span><span class="cx"> webkit.org/b/167266 media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html [ Pass Failure ]
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/ChangeLog 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -1,3 +1,80 @@
</span><ins>+2017-03-03 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Improve media documents across macOS, iPhone and iPad
+ https://bugs.webkit.org/show_bug.cgi?id=169145
+ <rdar://problem/17048858>
+
+ Reviewed by Dean Jackson.
+
+ There were a variety of issues with media documents, some longstanding, and some specifically
+ about modern media controls.
+
+ One issue was that fullscreen and picture-in-picture buttons would show for audio media documents,
+ due to using a <video> element to load the audio file. We now have additional logic in MediaController
+ to identify if the loaded media is really an audio file, and using this information to hide the
+ fullscreen and picture-in-picture buttons.
+
+ Another issue was that we would inject style in MediaDocument.cpp that was specific to modern media
+ controls when we could have the modern-media-controls module injected CSS handle this styling. We now
+ use the injected style in the shadow root to size media documents based on the device characteristics
+ and ensuring that page styles are overridden.
+
+ We also simplify how MediaDocument.cpp sets the source of the media element to simply use the "src"
+ attribute and not a <source> element.
+
+ Finally, we introduce a MediaDocumentController class that is instantiated when we're dealing with
+ a media document to hide the controls while we determine the type of media we're loading (audio vs.
+ video) in order to apply the appropriate styling without flashes.
+
+ As a result of the new styles applied by the modern-media-controls module, media documents have a
+ similar behavior on macOS and iPad, where we only enforce a min-width for video allowing them
+ to play at their natural size otherwise, and enforcing a fixed width for audio. On iPhone however,
+ we want to always play the media at full width, with some padding in the case of audio.
+
+ Tests: media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html
+ media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html
+ media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html
+ media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html
+ media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html
+ media/modern-media-controls/media-documents/media-document-video-ios-sizing.html
+ media/modern-media-controls/media-documents/media-document-video-mac-sizing.html
+ media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html
+
+ * Modules/modern-media-controls/controls/ios-inline-media-controls.css:
+ (:host(audio) .media-controls.ios.inline > .controls-bar:before,):
+ (:host(audio) .media-controls.ios.inline > .controls-bar:before): Deleted.
+ * Modules/modern-media-controls/controls/macos-media-controls.css:
+ (:host(audio) .media-controls.mac.inline > .controls-bar,):
+ (:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,):
+ (:host(audio) .media-controls.mac.inline > .controls-bar): Deleted.
+ (:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint): Deleted.
+ * Modules/modern-media-controls/controls/media-document.css: Added.
+ (:host(.media-document)):
+ (:host(.media-document.ready)):
+ (:host(.media-document.audio.mac)):
+ (:host(.media-document.audio.ipad)):
+ (:host(.media-document.audio.iphone)):
+ (:host(.media-document.video.mac)):
+ (:host(.media-document.video.ipad)):
+ (:host(.media-document.video.iphone)):
+ * Modules/modern-media-controls/js-files:
+ * Modules/modern-media-controls/media/fullscreen-support.js:
+ (FullscreenSupport.prototype.syncControl):
+ (FullscreenSupport):
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController):
+ (MediaController.prototype.get isAudio):
+ * Modules/modern-media-controls/media/media-document-controller.js: Added.
+ (MediaDocumentController):
+ (MediaDocumentController.prototype.handleEvent):
+ (MediaDocumentController.prototype._mediaDocumentHasMetadata):
+ (MediaDocumentController.prototype._mediaDocumentHasSize):
+ * Modules/modern-media-controls/media/pip-support.js:
+ (PiPSupport.prototype.syncControl):
+ (PiPSupport):
+ * html/MediaDocument.cpp:
+ (WebCore::MediaDocumentParser::createDocumentStructure):
+
</ins><span class="cx"> 2017-03-03 Chris Dumez <cdumez@apple.com>
</span><span class="cx">
</span><span class="cx"> [iOS] Throttle SVG SMIL animations to 30fps in low power mode
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiosinlinemediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -43,7 +43,8 @@
</span><span class="cx"> will-change: transform;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-:host(audio) .media-controls.ios.inline > .controls-bar:before {
</del><ins>+:host(audio) .media-controls.ios.inline > .controls-bar:before,
+:host(.media-document.audio) .media-controls.ios.inline > .controls-bar:before {
</ins><span class="cx"> -webkit-appearance: none;
</span><span class="cx"> background-color: rgb(212, 212, 212);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosmediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -51,10 +51,12 @@
</span><span class="cx"> -webkit-appearance: none !important;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-:host(audio) .media-controls.mac.inline > .controls-bar {
</del><ins>+:host(audio) .media-controls.mac.inline > .controls-bar,
+:host(.media-document.audio) .media-controls.mac.inline > .controls-bar {
</ins><span class="cx"> background-color: rgb(41, 41, 41);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint {
</del><ins>+:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,
+:host(.media-document.audio) .media-controls.mac.inline > .controls-bar > .background-tint {
</ins><span class="cx"> display: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediadocumentcssfromrev213399trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosmediacontrolscss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-document.css (from rev 213399, trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css) (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-document.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-document.css 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,65 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+:host(.media-document) {
+ visibility: hidden !important;
+ max-width: 100% !important;
+ min-height: 50px !important;
+}
+
+:host(.media-document.ready) {
+ visibility: visible !important;
+}
+
+/* Audio */
+
+:host(.media-document.audio.mac) {
+ width: 650px !important;
+ min-height: 25px !important;
+}
+
+:host(.media-document.audio.ipad) {
+ width: 650px !important;
+}
+
+:host(.media-document.audio.iphone) {
+ padding: 0 10px;
+ width: 100% !important;
+ box-sizing: border-box;
+}
+
+/* Video */
+
+:host(.media-document.video.mac) {
+ min-width: 700px !important;
+}
+
+:host(.media-document.video.ipad) {
+ min-width: 700px !important;
+}
+
+:host(.media-document.video.iphone) {
+ width: 100% !important;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsjsfiles"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -60,5 +60,6 @@
</span><span class="cx"> media/volume-down-support.js
</span><span class="cx"> media/volume-support.js
</span><span class="cx"> media/volume-up-support.js
</span><ins>+media/media-document-controller.js
</ins><span class="cx"> media/media-controller.js
</span><span class="cx"> main.js
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediafullscreensupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -69,7 +69,7 @@
</span><span class="cx"> {
</span><span class="cx"> const control = this.control;
</span><span class="cx"> const media = this.mediaController.media;
</span><del>- control.enabled = media.webkitSupportsFullscreen && media.videoTracks.length > 0;
</del><ins>+ control.enabled = !this.mediaController.isAudio && media.webkitSupportsFullscreen;
</ins><span class="cx"> control.isFullScreen = media.webkitDisplayingFullscreen;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -41,6 +41,8 @@
</span><span class="cx"> if (host) {
</span><span class="cx"> host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;
</span><span class="cx"> this.container.appendChild(host.textTrackContainer);
</span><ins>+ if (host.isInMediaDocument)
+ this.mediaDocumentController = new MediaDocumentController(this);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._updateControlsIfNeeded();
</span><span class="lines">@@ -60,7 +62,15 @@
</span><span class="cx">
</span><span class="cx"> get isAudio()
</span><span class="cx"> {
</span><del>- return this.media instanceof HTMLAudioElement || (this.media.readyState >= HTMLMediaElement.HAVE_METADATA && this.media.videoWidth === 0);
</del><ins>+ if (this.media instanceof HTMLAudioElement)
+ return true;
+
+ if (this.media.readyState < HTMLMediaElement.HAVE_METADATA)
+ return false;
+
+ const isLiveBroadcast = this.media.duration === Number.POSITIVE_INFINITY;
+ const hasVideoTracks = this.media.videoWidth != 0;
+ return !isLiveBroadcast && !hasVideoTracks;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get layoutTraits()
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediadocumentcontrollerjsfromrev213399trunkSourceWebCoreModulesmodernmediacontrolsmediafullscreensupportjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js (from rev 213399, trunk/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js) (0 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -0,0 +1,73 @@
</span><ins>+/*
+ * Copyright (C) 2017 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class MediaDocumentController
+{
+
+ constructor(mediaController)
+ {
+ this.mediaController = mediaController;
+
+ const media = mediaController.media;
+ media.classList.add("media-document");
+
+ if (media.readyState >= HTMLMediaElement.HAVE_METADATA)
+ this._mediaDocumentHasMetadata();
+ else
+ media.addEventListener("loadedmetadata", this);
+ }
+
+ // Protected
+
+ handleEvent(event)
+ {
+ event.currentTarget.removeEventListener(event.type, this);
+
+ if (event.type === "loadedmetadata")
+ this._mediaDocumentHasMetadata();
+ else if (event.type === "resize")
+ this._mediaDocumentHasSize();
+ }
+
+ // Private
+
+ _mediaDocumentHasMetadata()
+ {
+ const media = this.mediaController.media;
+ media.classList.add(this.mediaController.isAudio ? "audio" : "video");
+ media.classList.add(window.navigator.platform === "MacIntel" ? "mac" : window.navigator.platform);
+
+ if (this.mediaController.isAudio)
+ this._mediaDocumentHasSize();
+ else
+ this.mediaController.shadowRoot.addEventListener("resize", this);
+ }
+
+ _mediaDocumentHasSize()
+ {
+ window.requestAnimationFrame(() => this.mediaController.media.classList.add("ready"));
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediapipsupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/pip-support.js (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/pip-support.js 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/pip-support.js 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -56,7 +56,7 @@
</span><span class="cx"> {
</span><span class="cx"> const media = this.mediaController.media;
</span><span class="cx"> if (media.webkitSupportsPresentationMode)
</span><del>- this.control.enabled = media instanceof HTMLVideoElement && media.webkitSupportsPresentationMode(PiPMode) && !media.webkitCurrentPlaybackTargetIsWireless;
</del><ins>+ this.control.enabled = !this.mediaController.isAudio && media.webkitSupportsPresentationMode(PiPMode) && !media.webkitCurrentPlaybackTargetIsWireless;
</ins><span class="cx"> else
</span><span class="cx"> this.control.enabled = false;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlMediaDocumentcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/MediaDocument.cpp (213399 => 213400)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/html/MediaDocument.cpp 2017-03-04 01:10:55 UTC (rev 213399)
+++ trunk/Source/WebCore/html/MediaDocument.cpp 2017-03-04 01:12:40 UTC (rev 213400)
</span><span class="lines">@@ -104,13 +104,6 @@
</span><span class="cx"> #endif
</span><span class="cx">
</span><span class="cx"> auto body = HTMLBodyElement::create(document);
</span><del>- if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
- StringBuilder bodyStyle;
- bodyStyle.appendLiteral("margin: 0; padding: 0;");
- bodyStyle.appendLiteral("background-color: rgb(38, 38, 38);");
- bodyStyle.appendLiteral("display: flex; justify-content: center; align-items: center;");
- body->setAttribute(styleAttr, bodyStyle.toString());
- }
</del><span class="cx"> rootElement->appendChild(body);
</span><span class="cx">
</span><span class="cx"> auto videoElement = HTMLVideoElement::create(document);
</span><span class="lines">@@ -117,25 +110,20 @@
</span><span class="cx"> m_mediaElement = videoElement.ptr();
</span><span class="cx"> videoElement->setAttributeWithoutSynchronization(controlsAttr, emptyAtom);
</span><span class="cx"> videoElement->setAttributeWithoutSynchronization(autoplayAttr, emptyAtom);
</span><del>- videoElement->setAttributeWithoutSynchronization(nameAttr, AtomicString("media", AtomicString::ConstructFromLiteral));
</del><ins>+ videoElement->setAttributeWithoutSynchronization(playsinlineAttr, emptyAtom);
+ videoElement->setSrc(document.url());
+ if (auto* loader = document.loader())
+ videoElement->setAttributeWithoutSynchronization(typeAttr, loader->responseMIMEType());
</ins><span class="cx">
</span><del>- StringBuilder elementStyle;
- elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
</del><ins>+ if (!RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
+ StringBuilder elementStyle;
+ elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
</ins><span class="cx"> #if PLATFORM(IOS)
</span><del>- elementStyle.appendLiteral("width: 100%; height: auto;");
</del><ins>+ elementStyle.appendLiteral("width: 100%; height: auto;");
</ins><span class="cx"> #endif
</span><del>- if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
- elementStyle.appendLiteral("min-height: 50px;");
</del><ins>+ videoElement->setAttribute(styleAttr, elementStyle.toString());
</ins><span class="cx"> }
</span><del>- videoElement->setAttribute(styleAttr, elementStyle.toString());
</del><span class="cx">
</span><del>- auto sourceElement = HTMLSourceElement::create(document);
- sourceElement->setSrc(document.url());
-
- if (auto* loader = document.loader())
- sourceElement->setType(loader->responseMIMEType());
-
- videoElement->appendChild(sourceElement);
</del><span class="cx"> body->appendChild(videoElement);
</span><span class="cx">
</span><span class="cx"> Frame* frame = document.frame();
</span></span></pre>
</div>
</div>
</body>
</html>