<!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>[214381] 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/214381">214381</a></dd>
<dt>Author</dt> <dd>graouts@webkit.org</dd>
<dt>Date</dt> <dd>2017-03-24 15:10:45 -0700 (Fri, 24 Mar 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Captions don't move with the appearance of the inline controls
https://bugs.webkit.org/show_bug.cgi?id=170051
<rdar://problem/30754428>
Reviewed by Dean Jackson.
Source/WebCore:
We now size the captions container to account for the controls bar height when visible. To do this,
we use CSS variables to specify the height of the controls bar in default inline mode, compact inline
mode and fullscreen mode.
Test: media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html
* Modules/modern-media-controls/controls/controls-bar.js:
(ControlsBar.prototype.set faded):
Notify the hosting MediaControls that the "faded" property changed.
* Modules/modern-media-controls/controls/ios-inline-media-controls.css:
(.media-controls.ios.inline > .controls-bar):
Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.
* Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
(.media-controls.mac.inline.compact > .controls-bar):
Use the new --inline-compact-controls-bar-height CSS variable to specify the inline bar height.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
(.media-controls.mac.fullscreen > .controls-bar):
Use the new --fullscreen-controls-bar-height CSS variable to specify the inline bar height.
* Modules/modern-media-controls/controls/macos-inline-media-controls.css:
(.media-controls.mac.inline > .controls-bar):
Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.
* Modules/modern-media-controls/controls/media-controls.css:
(*):
Specify new CSS variables for the various controls bar heights.
* Modules/modern-media-controls/controls/media-controls.js:
(MediaControls.prototype.controlsBarFadedStateDidChange):
Notify the delegate of a controls bar "faded" property change.
* Modules/modern-media-controls/controls/text-tracks.css:
(video::-webkit-media-text-track-container):
(video::-webkit-media-text-track-container.visible-controls-bar):
(video::-webkit-media-text-track-container.visible-controls-bar.compact-controls-bar):
(video::-webkit-media-text-track-display):
Shorten the height of the captions container when the controls bar is visible. We also
fix a couple of prefixed properties that didn't need to be.
* Modules/modern-media-controls/media/media-controller.js:
(MediaController.prototype.controlsBarFadedStateDidChange):
(MediaController.prototype._updateControlsIfNeeded):
(MediaController.prototype._updateTextTracksClassList):
(MediaController):
Ensure we reflect the "faded" state of the controls bar on the captions container using
a CSS class, as well as whether the controls bar mode is compact.
LayoutTests:
Add a new test, which would have previously failed, where we check that we account for the controls bar height
when showing captions with the controls bar visible.
* media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt: Added.
* media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiosinlinemediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacoscompactinlinemediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolstexttrackscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsmediamediacontrollerjs">trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportcaptionsoffsetwithcontrolsbarexpectedtxt">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportcaptionsoffsetwithcontrolsbarhtml">trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/LayoutTests/ChangeLog 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2017-03-24 Antoine Quint <graouts@webkit.org>
+
+ [Modern Media Controls] Captions don't move with the appearance of the inline controls
+ https://bugs.webkit.org/show_bug.cgi?id=170051
+ <rdar://problem/30754428>
+
+ Reviewed by Dean Jackson.
+
+ Add a new test, which would have previously failed, where we check that we account for the controls bar height
+ when showing captions with the controls bar visible.
+
+ * media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt: Added.
+ * media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html: Added.
+
</ins><span class="cx"> 2017-03-24 Brent Fulgham <bfulgham@apple.com>
</span><span class="cx">
</span><span class="cx"> Handle recursive calls to ProcessingInstruction::checkStyleSheet
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportcaptionsoffsetwithcontrolsbarexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt (0 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Ensure that the captions container accounts for the controsl bar when visible.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(shadowRoot.lastElementChild.firstElementChild).height is "calc(100% - 25px)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolstrackssupporttrackssupportcaptionsoffsetwithcontrolsbarhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html (0 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -0,0 +1,25 @@
</span><ins>+<!DOCTYPE html>
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<video src="../../content/CC+Subtitles.mov" style="position: absolute; left: 0; top: 0; width: 640px; height: 360px;" controls autoplay></video>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Ensure that the captions container accounts for the controsl bar when visible.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+media.addEventListener("play", () => {
+ media.pause();
+
+ shouldBeEqualToString("getComputedStyle(shadowRoot.lastElementChild.firstElementChild).height", "calc(100% - 25px)");
+ media.remove();
+ finishJSTest();
+});
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/ChangeLog 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -1,3 +1,61 @@
</span><ins>+2017-03-24 Antoine Quint <graouts@webkit.org>
+
+ [Modern Media Controls] Captions don't move with the appearance of the inline controls
+ https://bugs.webkit.org/show_bug.cgi?id=170051
+ <rdar://problem/30754428>
+
+ Reviewed by Dean Jackson.
+
+ We now size the captions container to account for the controls bar height when visible. To do this,
+ we use CSS variables to specify the height of the controls bar in default inline mode, compact inline
+ mode and fullscreen mode.
+
+ Test: media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html
+
+ * Modules/modern-media-controls/controls/controls-bar.js:
+ (ControlsBar.prototype.set faded):
+ Notify the hosting MediaControls that the "faded" property changed.
+
+ * Modules/modern-media-controls/controls/ios-inline-media-controls.css:
+ (.media-controls.ios.inline > .controls-bar):
+ Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.
+
+ * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
+ (.media-controls.mac.inline.compact > .controls-bar):
+ Use the new --inline-compact-controls-bar-height CSS variable to specify the inline bar height.
+
+ * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
+ (.media-controls.mac.fullscreen > .controls-bar):
+ Use the new --fullscreen-controls-bar-height CSS variable to specify the inline bar height.
+
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.css:
+ (.media-controls.mac.inline > .controls-bar):
+ Use the new --inline-controls-bar-height CSS variable to specify the inline bar height.
+
+ * Modules/modern-media-controls/controls/media-controls.css:
+ (*):
+ Specify new CSS variables for the various controls bar heights.
+
+ * Modules/modern-media-controls/controls/media-controls.js:
+ (MediaControls.prototype.controlsBarFadedStateDidChange):
+ Notify the delegate of a controls bar "faded" property change.
+
+ * Modules/modern-media-controls/controls/text-tracks.css:
+ (video::-webkit-media-text-track-container):
+ (video::-webkit-media-text-track-container.visible-controls-bar):
+ (video::-webkit-media-text-track-container.visible-controls-bar.compact-controls-bar):
+ (video::-webkit-media-text-track-display):
+ Shorten the height of the captions container when the controls bar is visible. We also
+ fix a couple of prefixed properties that didn't need to be.
+
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype.controlsBarFadedStateDidChange):
+ (MediaController.prototype._updateControlsIfNeeded):
+ (MediaController.prototype._updateTextTracksClassList):
+ (MediaController):
+ Ensure we reflect the "faded" state of the controls bar on the captions container using
+ a CSS class, as well as whether the controls bar mode is compact.
+
</ins><span class="cx"> 2017-03-24 Brent Fulgham <bfulgham@apple.com>
</span><span class="cx">
</span><span class="cx"> Handle recursive calls to ProcessingInstruction::checkStyleSheet
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolscontrolsbarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -148,6 +148,8 @@
</span><span class="cx"> delete this._enforceAutoHideTimer;
</span><span class="cx">
</span><span class="cx"> this.markDirtyProperty("faded");
</span><ins>+
+ this._mediaControls.controlsBarFadedStateDidChange();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Protected
</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 (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -29,7 +29,7 @@
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="cx"> bottom: 0;
</span><del>- height: 50px;
</del><ins>+ height: var(--inline-controls-bar-height);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .media-controls.ios.inline > .controls-bar:before {
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacoscompactinlinemediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -26,7 +26,7 @@
</span><span class="cx"> /* Controls bar */
</span><span class="cx">
</span><span class="cx"> .media-controls.mac.inline.compact > .controls-bar {
</span><del>- height: 25px;
</del><ins>+ height: var(--inline-compact-controls-bar-height);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Controls placement */
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosfullscreenmediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -37,7 +37,7 @@
</span><span class="cx"> left: calc((100% - var(--controls-bar-width)) / 2);
</span><span class="cx"> bottom: 25px;
</span><span class="cx"> width: var(--controls-bar-width);
</span><del>- height: 75px;
</del><ins>+ height: var(--fullscreen-controls-bar-height);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .media-controls.mac.fullscreen > .controls-bar > .background-tint > div {
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -29,7 +29,7 @@
</span><span class="cx"> left: 0;
</span><span class="cx"> bottom: 0;
</span><span class="cx"> width: 100%;
</span><del>- height: 50px;
</del><ins>+ height: var(--inline-controls-bar-height);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .media-controls.mac.inline > .controls-bar > * {
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -35,6 +35,12 @@
</span><span class="cx"> min-height: 50px !important;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+* {
+ --inline-controls-bar-height: 50px;
+ --inline-compact-controls-bar-height: 25px;
+ --fullscreen-controls-bar-height: 75px;
+}
+
</ins><span class="cx"> /* We need to use relative positioning due to webkit.org/b/163603 */
</span><span class="cx"> .media-controls-container {
</span><span class="cx"> position: relative;
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmediacontrolsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -185,6 +185,12 @@
</span><span class="cx"> this.layout();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ controlsBarFadedStateDidChange()
+ {
+ if (this.delegate && typeof this.delegate.controlsBarFadedStateDidChange === "function")
+ this.delegate.controlsBarFadedStateDidChange();
+ }
+
</ins><span class="cx"> layoutTraitsDidChange()
</span><span class="cx"> {
</span><span class="cx"> // Implemented by subclasses as needed.
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolstexttrackscss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -24,7 +24,6 @@
</span><span class="cx"> */
</span><span class="cx">
</span><span class="cx"> video::-webkit-media-text-track-container {
</span><del>- bottom: 50px;
</del><span class="cx"> overflow: hidden;
</span><span class="cx"> padding-bottom: 5px;
</span><span class="cx"> z-index: 0;
</span><span class="lines">@@ -40,11 +39,19 @@
</span><span class="cx"> pointer-events: none;
</span><span class="cx"> -webkit-user-select: none;
</span><span class="cx">
</span><del>- -webkit-flex: 1 1 auto;
</del><ins>+ flex: 1 1 auto;
</ins><span class="cx">
</span><span class="cx"> -webkit-line-box-contain: block inline-box replaced;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+video::-webkit-media-text-track-container.visible-controls-bar {
+ height: calc(100% - var(--inline-controls-bar-height));
+}
+
+video::-webkit-media-text-track-container.visible-controls-bar.compact-controls-bar {
+ height: calc(100% - var(--inline-compact-controls-bar-height));
+}
+
</ins><span class="cx"> video::cue {
</span><span class="cx"> background-color: rgba(0, 0, 0, 0.8);
</span><span class="cx"> }
</span><span class="lines">@@ -53,7 +60,7 @@
</span><span class="cx"> position: absolute;
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> white-space: pre-wrap;
</span><del>- -webkit-box-sizing: border-box;
</del><ins>+ box-sizing: border-box;
</ins><span class="cx"> font: 22px sans-serif;
</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 (214380 => 214381)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-03-24 22:10:45 UTC (rev 214381)
</span><span class="lines">@@ -102,6 +102,11 @@
</span><span class="cx"> this.controls.usesLTRUserInterfaceLayoutDirection = flag;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ controlsBarFadedStateDidChange()
+ {
+ this._updateTextTracksClassList();
+ }
+
</ins><span class="cx"> macOSControlsBackgroundWasClicked()
</span><span class="cx"> {
</span><span class="cx"> // Toggle playback when clicking on the video but not on any controls on macOS.
</span><span class="lines">@@ -142,6 +147,7 @@
</span><span class="cx"> const ControlsClass = this._controlsClassForLayoutTraits(layoutTraits);
</span><span class="cx"> if (previousControls && previousControls.constructor === ControlsClass) {
</span><span class="cx"> this.controls.layoutTraits = layoutTraits;
</span><ins>+ this._updateTextTracksClassList();
</ins><span class="cx"> this._updateControlsSize();
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -167,6 +173,7 @@
</span><span class="cx"> this.container.appendChild(this.controls.element);
</span><span class="cx">
</span><span class="cx"> this.controls.layoutTraits = layoutTraits;
</span><ins>+ this._updateTextTracksClassList();
</ins><span class="cx"> this._updateControlsSize();
</span><span class="cx">
</span><span class="cx"> this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, StartSupport, StatusSupport, TimeLabelsSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
</span><span class="lines">@@ -201,4 +208,17 @@
</span><span class="cx"> return MacOSInlineMediaControls;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _updateTextTracksClassList()
+ {
+ if (!this.host)
+ return;
+
+ const layoutTraits = this.layoutTraits;
+ if (layoutTraits & LayoutTraits.Fullscreen)
+ return;
+
+ this.host.textTrackContainer.classList.toggle("visible-controls-bar", !this.controls.controlsBar.faded);
+ this.host.textTrackContainer.classList.toggle("compact-controls-bar", !!(layoutTraits & LayoutTraits.Compact));
+ }
+
</ins><span class="cx"> }
</span></span></pre>
</div>
</div>
</body>
</html>