Diff
Modified: trunk/LayoutTests/ChangeLog (214380 => 214381)
--- trunk/LayoutTests/ChangeLog 2017-03-24 22:09:15 UTC (rev 214380)
+++ trunk/LayoutTests/ChangeLog 2017-03-24 22:10:45 UTC (rev 214381)
@@ -1,3 +1,17 @@
+2017-03-24 Antoine Quint <[email protected]>
+
+ [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.
+
2017-03-24 Brent Fulgham <[email protected]>
Handle recursive calls to ProcessingInstruction::checkStyleSheet
Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar-expected.txt (0 => 214381)
--- 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)
@@ -0,0 +1,10 @@
+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
+
Added: trunk/LayoutTests/media/modern-media-controls/tracks-support/tracks-support-captions-offset-with-controls-bar.html (0 => 214381)
--- 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)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<video src="" 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=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (214380 => 214381)
--- 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)
@@ -1,3 +1,61 @@
+2017-03-24 Antoine Quint <[email protected]>
+
+ [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.
+
2017-03-24 Brent Fulgham <[email protected]>
Handle recursive calls to ProcessingInstruction::checkStyleSheet
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js (214380 => 214381)
--- 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)
@@ -148,6 +148,8 @@
delete this._enforceAutoHideTimer;
this.markDirtyProperty("faded");
+
+ this._mediaControls.controlsBarFadedStateDidChange();
}
// Protected
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css (214380 => 214381)
--- 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)
@@ -29,7 +29,7 @@
left: 0;
right: 0;
bottom: 0;
- height: 50px;
+ height: var(--inline-controls-bar-height);
}
.media-controls.ios.inline > .controls-bar:before {
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css (214380 => 214381)
--- 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)
@@ -26,7 +26,7 @@
/* Controls bar */
.media-controls.mac.inline.compact > .controls-bar {
- height: 25px;
+ height: var(--inline-compact-controls-bar-height);
}
/* Controls placement */
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css (214380 => 214381)
--- 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)
@@ -37,7 +37,7 @@
left: calc((100% - var(--controls-bar-width)) / 2);
bottom: 25px;
width: var(--controls-bar-width);
- height: 75px;
+ height: var(--fullscreen-controls-bar-height);
}
.media-controls.mac.fullscreen > .controls-bar > .background-tint > div {
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css (214380 => 214381)
--- 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)
@@ -29,7 +29,7 @@
left: 0;
bottom: 0;
width: 100%;
- height: 50px;
+ height: var(--inline-controls-bar-height);
}
.media-controls.mac.inline > .controls-bar > * {
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (214380 => 214381)
--- 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)
@@ -35,6 +35,12 @@
min-height: 50px !important;
}
+* {
+ --inline-controls-bar-height: 50px;
+ --inline-compact-controls-bar-height: 25px;
+ --fullscreen-controls-bar-height: 75px;
+}
+
/* We need to use relative positioning due to webkit.org/b/163603 */
.media-controls-container {
position: relative;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.js (214380 => 214381)
--- 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)
@@ -185,6 +185,12 @@
this.layout();
}
+ controlsBarFadedStateDidChange()
+ {
+ if (this.delegate && typeof this.delegate.controlsBarFadedStateDidChange === "function")
+ this.delegate.controlsBarFadedStateDidChange();
+ }
+
layoutTraitsDidChange()
{
// Implemented by subclasses as needed.
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css (214380 => 214381)
--- 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)
@@ -24,7 +24,6 @@
*/
video::-webkit-media-text-track-container {
- bottom: 50px;
overflow: hidden;
padding-bottom: 5px;
z-index: 0;
@@ -40,11 +39,19 @@
pointer-events: none;
-webkit-user-select: none;
- -webkit-flex: 1 1 auto;
+ flex: 1 1 auto;
-webkit-line-box-contain: block inline-box replaced;
}
+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));
+}
+
video::cue {
background-color: rgba(0, 0, 0, 0.8);
}
@@ -53,7 +60,7 @@
position: absolute;
overflow: hidden;
white-space: pre-wrap;
- -webkit-box-sizing: border-box;
+ box-sizing: border-box;
font: 22px sans-serif;
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (214380 => 214381)
--- 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)
@@ -102,6 +102,11 @@
this.controls.usesLTRUserInterfaceLayoutDirection = flag;
}
+ controlsBarFadedStateDidChange()
+ {
+ this._updateTextTracksClassList();
+ }
+
macOSControlsBackgroundWasClicked()
{
// Toggle playback when clicking on the video but not on any controls on macOS.
@@ -142,6 +147,7 @@
const ControlsClass = this._controlsClassForLayoutTraits(layoutTraits);
if (previousControls && previousControls.constructor === ControlsClass) {
this.controls.layoutTraits = layoutTraits;
+ this._updateTextTracksClassList();
this._updateControlsSize();
return;
}
@@ -167,6 +173,7 @@
this.container.appendChild(this.controls.element);
this.controls.layoutTraits = layoutTraits;
+ this._updateTextTracksClassList();
this._updateControlsSize();
this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, StartSupport, StatusSupport, TimeLabelsSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
@@ -201,4 +208,17 @@
return MacOSInlineMediaControls;
}
+ _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));
+ }
+
}
