<!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>[209108] 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/209108">209108</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-11-29 18:26:04 -0800 (Tue, 29 Nov 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Only show controls when the controls attribute is set
https://bugs.webkit.org/show_bug.cgi?id=165175
Source/WebCore:
We now respect the value of the media's "controls" attribute so that the start button and the controls
bar are only shown when that attribute is set to "true".
Patch by Antoine Quint <graouts@apple.com> on 2016-11-29
Reviewed by Dean Jackson.
Tests: media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html
media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html
media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html
media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html
media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html
* Modules/modern-media-controls/controls/controls-bar.js: Added.
(ControlsBar):
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.): Deleted.
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/controls-visibility-support.js: Added.
(ControlsVisibilitySupport):
(ControlsVisibilitySupport.prototype.destroy):
(ControlsVisibilitySupport.prototype.get mediaEvents):
(ControlsVisibilitySupport.prototype.syncControl):
* Modules/modern-media-controls/media/media-controller-support.js:
(MediaControllerSupport):
(MediaControllerSupport.prototype.handleEvent):
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype._updateControlsIfNeeded):
* WebCore.xcodeproj/project.pbxproj:
LayoutTests:
We add new tests to check that the media's "control" attribute is respected. We also update a
series of tests to be more robust and turn the media "controls" attribute on so that the controls
bar is displayed as required by the tests.
Patch by Antoine Quint <graouts@apple.com> on 2016-11-29
Reviewed by Dean Jackson.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt: Added.
* media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html: Added.
* media/modern-media-controls/fullscreen-support/fullscreen-support-click.html:
* media/modern-media-controls/media-controls/media-controls-constructor-expected.txt:
* media/modern-media-controls/media-controls/media-controls-constructor.html:
* media/modern-media-controls/pip-support/pip-support-click.html:
* media/modern-media-controls/placard-support/placard-support-airplay.html:
* media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt:
* media/modern-media-controls/scrubber-support/scrubber-support-click.html:
* media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt:
* media/modern-media-controls/scrubber-support/scrubber-support-drag.html:
* media/modern-media-controls/volume-support/volume-support-click.html:
* media/modern-media-controls/volume-support/volume-support-drag.html:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsfullscreensupportfullscreensupportclickhtml">trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrolsmediacontrolsconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmediacontrolsmediacontrolsconstructorhtml">trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolspipsupportpipsupportclickhtml">trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsplacardsupportplacardsupportairplayhtml">trunk/LayoutTests/media/modern-media-controls/placard-support/placard-support-airplay.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportclickexpectedtxt">trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportclickhtml">trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportdragexpectedtxt">trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportdraghtml">trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportclickhtml">trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportdraghtml">trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsjsfiles">trunk/Source/WebCore/Modules/modern-media-controls/js-files</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollersupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
<li><a href="#trunkSourceWebCoreWebCorexcodeprojprojectpbxproj">trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffaudioexpectedtxt">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffaudiohtml">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffexpectedtxt">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffhtml">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudioexpectedtxt">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudiohtml">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonexpectedtxt">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonhtml">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolstoggleexpectedtxt">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolstogglehtml">trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediacontrolsvisibilitysupportjs">trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/ChangeLog 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+2016-11-29 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Only show controls when the controls attribute is set
+ https://bugs.webkit.org/show_bug.cgi?id=165175
+
+ We add new tests to check that the media's "control" attribute is respected. We also update a
+ series of tests to be more robust and turn the media "controls" attribute on so that the controls
+ bar is displayed as required by the tests.
+
+ Reviewed by Dean Jackson.
+
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt: Added.
+ * media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html: Added.
+ * media/modern-media-controls/fullscreen-support/fullscreen-support-click.html:
+ * media/modern-media-controls/media-controls/media-controls-constructor-expected.txt:
+ * media/modern-media-controls/media-controls/media-controls-constructor.html:
+ * media/modern-media-controls/pip-support/pip-support-click.html:
+ * media/modern-media-controls/placard-support/placard-support-airplay.html:
+ * media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt:
+ * media/modern-media-controls/scrubber-support/scrubber-support-click.html:
+ * media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt:
+ * media/modern-media-controls/scrubber-support/scrubber-support-drag.html:
+ * media/modern-media-controls/volume-support/volume-support-click.html:
+ * media/modern-media-controls/volume-support/volume-support-drag.html:
+
</ins><span class="cx"> 2016-11-29 Ryan Haddad <ryanhaddad@apple.com>
</span><span class="cx">
</span><span class="cx"> Marking media/modern-media-controls/tracks-support/tracks-support-audio-tracks.html as flaky on ios-simulator.
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffaudioexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+Testing the ControlsVisibilitySupport behavior for audio without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffaudiohtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<audio src="../../content/test.mp4" style="width: 320px; height: 240px;"></audio>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior for audio without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+ debug("");
+ debug("Media has loaded metadata");
+ shouldBeFalse("mediaController.controls.controlsBar.visible");
+ shouldBeFalse("mediaController.controls.startButton.visible");
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+Testing the ControlsVisibilitySupport behavior without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsoffhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;"></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+ debug("");
+ debug("Media has loaded metadata");
+ shouldBeFalse("mediaController.controls.controlsBar.visible");
+ shouldBeFalse("mediaController.controls.startButton.visible");
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudioexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+Testing the ControlsVisibilitySupport behavior for audio without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonaudiohtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<audio src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></audio>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior for audio without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeTrue("mediaController.controls.controlsBar.visible");
+shouldBeTrue("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+ debug("");
+ debug("Media has loaded metadata");
+ shouldBeTrue("mediaController.controls.controlsBar.visible");
+ shouldBeTrue("mediaController.controls.startButton.visible");
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+Testing the ControlsVisibilitySupport behavior without controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolsonhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior without controls.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+ debug("");
+ debug("Media has loaded metadata");
+ shouldBeTrue("mediaController.controls.controlsBar.visible");
+ shouldBeTrue("mediaController.controls.startButton.visible");
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolstoggleexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,25 @@
</span><ins>+Testing the ControlsVisibilitySupport behavior when the controls attribute changes.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Media has not begun loading yet
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Media has loaded metadata
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+Turning controls off
+PASS mediaController.controls.controlsBar.visible is false
+PASS mediaController.controls.startButton.visible is false
+
+Turning controls back on
+PASS mediaController.controls.controlsBar.visible is true
+PASS mediaController.controls.startButton.visible is true
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolscontrolsvisibilitysupportcontrolsvisibilitysupportcontrolstogglehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,55 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<body>
+<video src="../../content/test.mp4" style="width: 320px; height: 240px;" controls></video>
+<div id="shadow"></div>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>ControlsVisibilitySupport</code> behavior when the controls attribute changes.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+let numberOfMutations = 0;
+new MutationObserver(() => {
+ numberOfMutations++;
+
+ if (numberOfMutations === 1) {
+ shouldBeFalse("mediaController.controls.controlsBar.visible");
+ shouldBeFalse("mediaController.controls.startButton.visible");
+
+ debug("");
+ debug("Turning controls back on");
+ media.controls = true;
+ } else {
+ shouldBeTrue("mediaController.controls.controlsBar.visible");
+ shouldBeTrue("mediaController.controls.startButton.visible");
+
+ debug("");
+ shadowRoot.host.remove();
+ media.remove();
+ finishJSTest();
+ }
+}).observe(media, { attributes: true, attributeFilter: ["controls"] });
+
+debug("Media has not begun loading yet");
+shouldBeFalse("mediaController.controls.controlsBar.visible");
+shouldBeFalse("mediaController.controls.startButton.visible");
+
+media.addEventListener("loadedmetadata", function() {
+ debug("");
+ debug("Media has loaded metadata");
+ shouldBeTrue("mediaController.controls.controlsBar.visible");
+ shouldBeTrue("mediaController.controls.startButton.visible");
+
+ debug("");
+ debug("Turning controls off");
+ media.controls = false;
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsfullscreensupportfullscreensupportclickhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><del>-<video src="../../content/test.mp4" autoplay></video>
</del><ins>+<video src="../../content/test.mp4" controls autoplay></video>
</ins><span class="cx"> <div id="host"></div>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrolsmediacontrolsconstructorexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor-expected.txt (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor-expected.txt 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -22,7 +22,7 @@
</span><span class="cx"> PASS mediaControls.airplayPlacard instanceof AirplayPlacard is true
</span><span class="cx"> PASS mediaControls.pipPlacard instanceof PiPPlacard is true
</span><span class="cx">
</span><del>-PASS mediaControls.controlsBar instanceof LayoutItem is true
</del><ins>+PASS mediaControls.controlsBar instanceof ControlsBar is true
</ins><span class="cx"> PASS mediaControls.controlsBar.element.localName is "div"
</span><span class="cx"> PASS mediaControls.controlsBar.element.className is "controls-bar"
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmediacontrolsmediacontrolsconstructorhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/media-controls/media-controls-constructor.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -29,7 +29,7 @@
</span><span class="cx"> shouldBeTrue("mediaControls.pipPlacard instanceof PiPPlacard");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><del>-shouldBeTrue("mediaControls.controlsBar instanceof LayoutItem");
</del><ins>+shouldBeTrue("mediaControls.controlsBar instanceof ControlsBar");
</ins><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.element.localName", "div");
</span><span class="cx"> shouldBeEqualToString("mediaControls.controlsBar.element.className", "controls-bar");
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolspipsupportpipsupportclickhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><del>-<video src="../../content/test.mp4" autoplay></video>
</del><ins>+<video src="../../content/test.mp4" autoplay controls></video>
</ins><span class="cx"> <div id="host"></div>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsplacardsupportplacardsupportairplayhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/placard-support/placard-support-airplay.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/placard-support/placard-support-airplay.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/placard-support/placard-support-airplay.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><del>-<video src="../../content/test.mp4" autoplay></video>
</del><ins>+<video src="../../content/test.mp4" controls autoplay></video>
</ins><span class="cx"> <div id="host"></div>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportclickexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -3,7 +3,7 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS media.currentTime is 3.1872
</del><ins>+PASS media.currentTime is within 0.2 of 3.1872
</ins><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span><span class="cx"> TEST COMPLETE
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportclickhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><del>-<video src="../../content/test.mp4"></video>
</del><ins>+<video src="../../content/test.mp4" controls autoplay></video>
</ins><span class="cx"> <div id="host"></div>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span><span class="lines">@@ -29,10 +29,14 @@
</span><span class="cx">
</span><span class="cx"> mediaController.controls.showsStartButton = false;
</span><span class="cx">
</span><del>-media.addEventListener("canplaythrough", () => {
</del><ins>+scheduler.frameDidFire = function() {
+ if (media.paused)
+ return;
</ins><span class="cx">
</span><ins>+ media.pause();
+
</ins><span class="cx"> media.addEventListener("timeupdate", () => {
</span><del>- shouldBe("media.currentTime", "3.1872");
</del><ins>+ shouldBeCloseTo("media.currentTime", 3.1872, 0.2);
</ins><span class="cx"> container.remove();
</span><span class="cx"> media.remove();
</span><span class="cx"> finishJSTest();
</span><span class="lines">@@ -46,7 +50,7 @@
</span><span class="cx"> eventSender.mouseMoveTo(centerX, centerY);
</span><span class="cx"> eventSender.mouseDown();
</span><span class="cx"> eventSender.mouseUp();
</span><del>-});
</del><ins>+};
</ins><span class="cx">
</span><span class="cx"> </script>
</span><span class="cx"> <script src="../../../resources/js-test-post.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportdragexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag-expected.txt 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -3,7 +3,7 @@
</span><span class="cx"> On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
</span><span class="cx">
</span><span class="cx">
</span><del>-PASS media.currentTime is media.duration / 2
</del><ins>+PASS media.currentTime is within 0.01 of 3.0136
</ins><span class="cx"> PASS media.currentTime is 0
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsscrubbersupportscrubbersupportdraghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><del>-<video src="../../content/test.mp4" autoplay></video>
</del><ins>+<video src="../../content/test.mp4" autoplay controls></video>
</ins><span class="cx"> <div id="host"></div>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span><span class="lines">@@ -28,11 +28,18 @@
</span><span class="cx"> const mediaController = createControls(container, media, null);
</span><span class="cx">
</span><span class="cx"> let numberOfEvents = 0;
</span><del>-media.addEventListener("play", () => {
</del><ins>+scheduler.frameDidFire = function() {
+ if (media.paused)
+ return;
+
</ins><span class="cx"> media.pause();
</span><span class="cx">
</span><span class="cx"> const input = mediaController.controls.timeControl.scrubber.children[1].element;
</span><span class="cx"> const bounds = input.getBoundingClientRect();
</span><ins>+
+ if (bounds.width === 0)
+ return;
+
</ins><span class="cx"> const minX = bounds.left;
</span><span class="cx"> const dragStartX = bounds.left + bounds.width / 2;
</span><span class="cx"> const dragEndX = bounds.left;
</span><span class="lines">@@ -42,7 +49,7 @@
</span><span class="cx"> numberOfEvents++;
</span><span class="cx">
</span><span class="cx"> if (numberOfEvents == 1) {
</span><del>- shouldBe("media.currentTime", "media.duration / 2");
</del><ins>+ shouldBeCloseTo("media.currentTime", media.duration / 2, 0.01);
</ins><span class="cx"> const delta = dragEndX - dragStartX;
</span><span class="cx"> const iterations = Math.abs(delta);
</span><span class="cx"> for (let i = 1; i <= iterations; ++i)
</span><span class="lines">@@ -61,7 +68,7 @@
</span><span class="cx"> // Start dragging.
</span><span class="cx"> eventSender.mouseMoveTo(dragStartX, centerY);
</span><span class="cx"> eventSender.mouseDown();
</span><del>-});
</del><ins>+};
</ins><span class="cx">
</span><span class="cx"> </script>
</span><span class="cx"> <script src="../../../resources/js-test-post.js"></script>
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportclickhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><del>-<video src="../../content/test.mp4"></video>
</del><ins>+<video src="../../content/test.mp4" controls autoplay></video>
</ins><span class="cx"> <div id="host"></div>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span><span class="lines">@@ -29,6 +29,9 @@
</span><span class="cx">
</span><span class="cx"> let numberOfFrames = 0;
</span><span class="cx"> scheduler.frameDidFire = function() {
</span><ins>+ if (media.paused)
+ return;
+
</ins><span class="cx"> numberOfFrames++;
</span><span class="cx">
</span><span class="cx"> if (numberOfFrames == 1) {
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumesupportvolumesupportdraghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -15,7 +15,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> </style>
</span><del>-<video src="../../content/test.mp4" muted></video>
</del><ins>+<video src="../../content/test.mp4" muted autoplay controls></video>
</ins><span class="cx"> <div id="host"></div>
</span><span class="cx"> <script type="text/javascript">
</span><span class="cx">
</span><span class="lines">@@ -32,6 +32,9 @@
</span><span class="cx">
</span><span class="cx"> let numberOfFrames = 0;
</span><span class="cx"> scheduler.frameDidFire = function() {
</span><ins>+ if (media.paused)
+ return;
+
</ins><span class="cx"> numberOfFrames++;
</span><span class="cx">
</span><span class="cx"> if (numberOfFrames == 1) {
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/Source/WebCore/ChangeLog 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -1,3 +1,36 @@
</span><ins>+2016-11-29 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Only show controls when the controls attribute is set
+ https://bugs.webkit.org/show_bug.cgi?id=165175
+
+ We now respect the value of the media's "controls" attribute so that the start button and the controls
+ bar are only shown when that attribute is set to "true".
+
+ Reviewed by Dean Jackson.
+
+ Tests: media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off-audio.html
+ media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-off.html
+ media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on-audio.html
+ media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-on.html
+ media/modern-media-controls/controls-visibility-support/controls-visibility-support-controls-toggle.html
+
+ * Modules/modern-media-controls/controls/controls-bar.js: Added.
+ (ControlsBar):
+ * Modules/modern-media-controls/controls/media-controls.js:
+ (MediaControls.): Deleted.
+ * Modules/modern-media-controls/js-files:
+ * Modules/modern-media-controls/media/controls-visibility-support.js: Added.
+ (ControlsVisibilitySupport):
+ (ControlsVisibilitySupport.prototype.destroy):
+ (ControlsVisibilitySupport.prototype.get mediaEvents):
+ (ControlsVisibilitySupport.prototype.syncControl):
+ * Modules/modern-media-controls/media/media-controller-support.js:
+ (MediaControllerSupport):
+ (MediaControllerSupport.prototype.handleEvent):
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype._updateControlsIfNeeded):
+ * WebCore.xcodeproj/project.pbxproj:
+
</ins><span class="cx"> 2016-11-29 Brady Eidson <beidson@apple.com>
</span><span class="cx">
</span><span class="cx"> Followup to:
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjsfromrev209104trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollersupportjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (from rev 209104, trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js) (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+/*
+ * Copyright (C) 2016 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 ControlsBar extends LayoutNode
+{
+
+ constructor()
+ {
+ super(`<div class="controls-bar">`);
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -45,10 +45,7 @@
</span><span class="cx"> this.statusLabel = new StatusLabel(this)
</span><span class="cx"> this.timeControl = new TimeControl(this);
</span><span class="cx">
</span><del>- this.controlsBar = new LayoutItem({
- element: `<div class="controls-bar">`,
- layoutDelegate: this
- });
</del><ins>+ this.controlsBar = new ControlsBar;
</ins><span class="cx">
</span><span class="cx"> this.airplayPlacard = new AirplayPlacard(this);
</span><span class="cx"> this.pipPlacard = new PiPPlacard(this);
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsjsfiles"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/js-files 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -22,6 +22,7 @@
</span><span class="cx"> controls/forward-button.js
</span><span class="cx"> controls/buttons-container.js
</span><span class="cx"> controls/status-label.js
</span><ins>+controls/controls-bar.js
</ins><span class="cx"> controls/media-controls.js
</span><span class="cx"> controls/ios-inline-media-controls.js
</span><span class="cx"> controls/macos-media-controls.js
</span><span class="lines">@@ -32,6 +33,7 @@
</span><span class="cx"> controls/pip-placard.js
</span><span class="cx"> media/media-controller-support.js
</span><span class="cx"> media/airplay-support.js
</span><ins>+media/controls-visibility-support.js
</ins><span class="cx"> media/elapsed-time-support.js
</span><span class="cx"> media/fullscreen-support.js
</span><span class="cx"> media/mute-support.js
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediacontrolsvisibilitysupportjsfromrev209104trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollersupportjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js (from rev 209104, trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js) (0 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/controls-visibility-support.js 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -0,0 +1,59 @@
</span><ins>+/*
+ * Copyright (C) 2016 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 ControlsVisibilitySupport extends MediaControllerSupport
+{
+
+ constructor(mediaController)
+ {
+ super(mediaController);
+
+ this._controlsAttributeObserver = new MutationObserver(this.syncControl.bind(this));
+ this._controlsAttributeObserver.observe(mediaController.media, { attributes: true, attributeFilter: ["controls"] });
+ }
+
+ // Protected
+
+ destroy()
+ {
+ this._controlsAttributeObserver.disconnect();
+ }
+
+ get mediaEvents()
+ {
+ return ["loadedmetadata"];
+ }
+
+ syncControl()
+ {
+ let shouldShowControls = this.mediaController.media.controls;
+ if (media instanceof HTMLVideoElement)
+ shouldShowControls = shouldShowControls && this.mediaController.media.readyState > HTMLMediaElement.HAVE_NOTHING;
+
+ this.mediaController.controls.startButton.visible = shouldShowControls;
+ this.mediaController.controls.controlsBar.visible = shouldShowControls;
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollersupportjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller-support.js 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -33,12 +33,12 @@
</span><span class="cx"> for (let eventType of this.mediaEvents)
</span><span class="cx"> mediaController.media.addEventListener(eventType, this);
</span><span class="cx">
</span><ins>+ this.syncControl();
+
</ins><span class="cx"> if (!this.control)
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> this.control.uiDelegate = this;
</span><del>-
- this.syncControl();
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -74,8 +74,7 @@
</span><span class="cx"> handleEvent(event)
</span><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses.
</span><del>- if (this.control)
- this.syncControl();
</del><ins>+ this.syncControl();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> syncControl()
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -92,7 +92,7 @@
</span><span class="cx">
</span><span class="cx"> this._updateControlsSize();
</span><span class="cx">
</span><del>- this._supportingObjects = [AirplaySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport].map(SupportClass => {
</del><ins>+ this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, ElapsedTimeSupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, RemainingTimeSupport, ScrubbingSupport, SkipBackSupport, StartSupport, StatusSupport, TracksSupport, VolumeSupport].map(SupportClass => {
</ins><span class="cx"> return new SupportClass(this);
</span><span class="cx"> }, this);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreWebCorexcodeprojprojectpbxproj"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (209107 => 209108)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2016-11-30 01:58:48 UTC (rev 209107)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2016-11-30 02:26:04 UTC (rev 209108)
</span><span class="lines">@@ -10019,6 +10019,8 @@
</span><span class="cx"> 71004B9A1DC1109300A52A38 /* elapsed-time-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "elapsed-time-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 71004B9B1DC1109300A52A38 /* remaining-time-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "remaining-time-support.js"; sourceTree = "<group>"; };
</span><span class="cx"> 71004B9D1DC1398800A52A38 /* playback-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "playback-support.js"; sourceTree = "<group>"; };
</span><ins>+ 710FA74B1DEE576D004C715E /* controls-bar.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-bar.js"; sourceTree = "<group>"; };
+ 710FA74C1DEE577E004C715E /* controls-visibility-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "controls-visibility-support.js"; sourceTree = "<group>"; };
</ins><span class="cx"> 7117445614BC34E200EE5FC8 /* SVGTextMetricsBuilder.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = SVGTextMetricsBuilder.cpp; sourceTree = "<group>"; };
</span><span class="cx"> 7117445714BC34E200EE5FC8 /* SVGTextMetricsBuilder.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = SVGTextMetricsBuilder.h; sourceTree = "<group>"; };
</span><span class="cx"> 7118FED215685CC60030B79A /* JSSVGViewSpec.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSSVGViewSpec.cpp; sourceTree = "<group>"; };
</span><span class="lines">@@ -18053,6 +18055,7 @@
</span><span class="cx"> 716FA0DD1DB26591007323CC /* button.js */,
</span><span class="cx"> 716FA0DE1DB26591007323CC /* buttons-container.css */,
</span><span class="cx"> 716FA0DF1DB26591007323CC /* buttons-container.js */,
</span><ins>+ 710FA74B1DEE576D004C715E /* controls-bar.js */,
</ins><span class="cx"> 716FA0E01DB26591007323CC /* forward-button.js */,
</span><span class="cx"> 716FA0E11DB26591007323CC /* fullscreen-button.js */,
</span><span class="cx"> 716FA0E21DB26591007323CC /* icon-button.css */,
</span><span class="lines">@@ -18101,6 +18104,7 @@
</span><span class="cx"> isa = PBXGroup;
</span><span class="cx"> children = (
</span><span class="cx"> 717F90581DC4BB600006F520 /* airplay-support.js */,
</span><ins>+ 710FA74C1DEE577E004C715E /* controls-visibility-support.js */,
</ins><span class="cx"> 71004B9A1DC1109300A52A38 /* elapsed-time-support.js */,
</span><span class="cx"> 714131471DC9D6AF00336107 /* fullscreen-support.js */,
</span><span class="cx"> 7177E2461DB80D2F00919A0B /* media-controller-support.js */,
</span></span></pre>
</div>
</div>
</body>
</html>