Diff
Modified: trunk/LayoutTests/ChangeLog (209430 => 209431)
--- trunk/LayoutTests/ChangeLog 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/LayoutTests/ChangeLog 2016-12-06 23:45:02 UTC (rev 209431)
@@ -1,5 +1,23 @@
2016-12-06 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Rendering issues with controls bar when captions are on
+ https://bugs.webkit.org/show_bug.cgi?id=165390
+
+ Reviewed by Dean Jackson.
+
+ We add a new test that checks we have the expected element structure with a single <div> containing
+ the captions and the media controls elements. Three other tests needed updating since they made
+ assumptions on the DOM structure that were no longer holding.
+
+ * media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt:
+ * media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html:
+ * media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html:
+ * media/modern-media-controls/media-controller/media-controller-resize.html:
+ * media/modern-media-controls/media-controller/media-controller-single-container-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-single-container.html: Added.
+
+2016-12-06 Antoine Quint <grao...@apple.com>
+
[Modern Media Controls] Automatically hide the controls bar when the mouse is idle
https://bugs.webkit.org/show_bug.cgi?id=165492
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt (209430 => 209431)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen-expected.txt 2016-12-06 23:45:02 UTC (rev 209431)
@@ -4,12 +4,12 @@
We should not fade the controls in when showing them inline the first time
-PASS shadowRoot.lastChild.classList.contains('fade-in') is false
+PASS mediaControls.classList.contains('fade-in') is false
Clicking on the fullscreen button
Obtained a webkitfullscreenchange event
PASS media.webkitDisplayingFullscreen is true
We should fade the controls in when showing them fullscreen
-PASS shadowRoot.lastChild.classList.contains('fade-in') is true
+PASS mediaControls.classList.contains('fade-in') is true
PASS successfullyParsed is true
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html (209430 => 209431)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fade-controls-when-entering-fullscreen.html 2016-12-06 23:45:02 UTC (rev 209431)
@@ -10,6 +10,7 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
+let mediaControls = shadowRoot.lastElementChild.lastElementChild;
media.addEventListener("play", () => {
media.pause();
@@ -16,14 +17,15 @@
window.requestAnimationFrame(() => {
debug("We should not fade the controls in when showing them inline the first time");
- shouldBeFalse("shadowRoot.lastChild.classList.contains('fade-in')");
+ shouldBeFalse("mediaControls.classList.contains('fade-in')");
clickOnFullscreenButton();
media.addEventListener("webkitfullscreenchange", () => {
+ mediaControls = shadowRoot.lastElementChild.lastElementChild;
debug("Obtained a webkitfullscreenchange event");
shouldBeTrue("media.webkitDisplayingFullscreen");
debug("We should fade the controls in when showing them fullscreen");
- shouldBeTrue("shadowRoot.lastChild.classList.contains('fade-in')");
+ shouldBeTrue("mediaControls.classList.contains('fade-in')");
debug("");
media.remove();
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html (209430 => 209431)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-fullscreen-ltr.html 2016-12-06 23:45:02 UTC (rev 209431)
@@ -19,7 +19,7 @@
window.requestAnimationFrame(() => {
debug("Media entered fullscreen");
- mediaControlsElement = shadowRoot.lastChild;
+ mediaControlsElement = shadowRoot.lastElementChild.lastElementChild;
volumeSliderElement = mediaControlsElement.querySelector(".volume.slider");
shouldBeTrue("mediaControlsElement.classList.contains('uses-ltr-user-interface-layout-direction')");
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html (209430 => 209431)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-resize.html 2016-12-06 23:45:02 UTC (rev 209431)
@@ -10,7 +10,7 @@
const media = document.querySelector("video");
const shadowRoot = window.internals.shadowRoot(media);
-const mediaControls = shadowRoot.lastChild;
+const mediaControls = shadowRoot.lastElementChild.lastElementChild;
debug("Checking initial size");
shouldBeEqualToString("mediaControls.style.width", "320px");
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-single-container-expected.txt (0 => 209431)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-single-container-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-single-container-expected.txt 2016-12-06 23:45:02 UTC (rev 209431)
@@ -0,0 +1,18 @@
+Testing the MediaController has a single container for captions and media controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS shadowRoot.childElementCount is 2
+PASS shadowRoot.firstElementChild.localName is "style"
+PASS shadowRoot.lastElementChild.localName is "div"
+PASS shadowRoot.lastElementChild.className is "media-controls-container"
+PASS shadowRoot.lastElementChild.childElementCount is 2
+PASS shadowRoot.lastElementChild.firstElementChild.localName is "div"
+PASS shadowRoot.lastElementChild.firstElementChild.getAttribute('pseudo') is "-webkit-media-text-track-container"
+PASS shadowRoot.lastElementChild.lastElementChild.localName is "div"
+PASS shadowRoot.lastElementChild.lastElementChild.classList.contains('media-controls') is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-single-container.html (0 => 209431)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-single-container.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-single-container.html 2016-12-06 23:45:02 UTC (rev 209431)
@@ -0,0 +1,25 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=true ] -->
+<script src=""
+<body>
+<video src="" style="width: 320px; height: 240px;" controls></video>
+<script type="text/_javascript_">
+
+description("Testing the <code>MediaController</code> has a single container for captions and media controls.");
+
+const media = document.querySelector("video");
+const shadowRoot = window.internals.shadowRoot(media);
+
+shouldBe("shadowRoot.childElementCount", "2");
+shouldBeEqualToString("shadowRoot.firstElementChild.localName", "style");
+shouldBeEqualToString("shadowRoot.lastElementChild.localName", "div");
+shouldBeEqualToString("shadowRoot.lastElementChild.className", "media-controls-container");
+
+shouldBe("shadowRoot.lastElementChild.childElementCount", "2");
+shouldBeEqualToString("shadowRoot.lastElementChild.firstElementChild.localName", "div");
+shouldBeEqualToString("shadowRoot.lastElementChild.firstElementChild.getAttribute('pseudo')", "-webkit-media-text-track-container");
+shouldBeEqualToString("shadowRoot.lastElementChild.lastElementChild.localName", "div");
+shouldBeTrue("shadowRoot.lastElementChild.lastElementChild.classList.contains('media-controls')");
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (209430 => 209431)
--- trunk/Source/WebCore/ChangeLog 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/Source/WebCore/ChangeLog 2016-12-06 23:45:02 UTC (rev 209431)
@@ -1,5 +1,33 @@
2016-12-06 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Rendering issues with controls bar when captions are on
+ https://bugs.webkit.org/show_bug.cgi?id=165390
+
+ Reviewed by Dean Jackson.
+
+ We would face some layout issues with captions due to RenderImage::layoutShadowControls()
+ expecting a single RenderBox in the media controls shadow root, which was the case with
+ legacy media controls, but no longer the case with modern media controls. We now host
+ both the captions and the media controls elements under a single container, and add
+ an asertion in RenderImage to check that a single RenderBox child exists.
+
+ Test: media/modern-media-controls/media-controller/media-controller-single-container.html
+
+ * Modules/modern-media-controls/controls/media-controls.css:
+ (.media-controls-container):
+ (.media-controls-container,):
+ (.media-controls-container > *):
+ (.media-controls):
+ * Modules/modern-media-controls/controls/text-tracks.css:
+ (video::-webkit-media-text-track-container):
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController):
+ (MediaController.prototype._updateControlsIfNeeded):
+ * rendering/RenderImage.cpp:
+ (WebCore::RenderImage::layoutShadowControls):
+
+2016-12-06 Antoine Quint <grao...@apple.com>
+
[Modern Media Controls] Automatically hide the controls bar when the mouse is idle
https://bugs.webkit.org/show_bug.cgi?id=165492
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (209430 => 209431)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2016-12-06 23:45:02 UTC (rev 209431)
@@ -29,8 +29,23 @@
}
/* We need to use relative positioning due to webkit.org/b/163603 */
+.media-controls-container {
+ position: relative;
+}
+
+.media-controls-container,
+.media-controls-container > * {
+ left: 0;
+ top: 0;
+ width: 100%;
+}
+
+.media-controls-container > * {
+ position: absolute;
+}
+
.media-controls {
- position: relative;
+ height: 100%;
font-family: -apple-system;
-webkit-user-select: none;
cursor: default;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css (209430 => 209431)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/text-tracks.css 2016-12-06 23:45:02 UTC (rev 209431)
@@ -24,8 +24,6 @@
*/
video::-webkit-media-text-track-container {
- position: relative;
- width: 100%;
bottom: 50px;
overflow: hidden;
padding-bottom: 5px;
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (209430 => 209431)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2016-12-06 23:45:02 UTC (rev 209431)
@@ -32,9 +32,12 @@
this.media = media;
this.host = host;
+ this.container = shadowRoot.appendChild(document.createElement("div"));
+ this.container.className = "media-controls-container";
+
if (host) {
media.addEventListener("webkitpresentationmodechanged", this);
- shadowRoot.appendChild(host.textTrackContainer);
+ this.container.appendChild(host.textTrackContainer);
}
this._updateControlsIfNeeded();
@@ -99,10 +102,10 @@
if (previousControls) {
this.controls.fadeIn();
- this.shadowRoot.replaceChild(this.controls.element, previousControls.element);
+ this.container.replaceChild(this.controls.element, previousControls.element);
this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection;
} else
- this.shadowRoot.appendChild(this.controls.element);
+ this.container.appendChild(this.controls.element);
this._updateControlsSize();
Modified: trunk/Source/WebCore/rendering/RenderImage.cpp (209430 => 209431)
--- trunk/Source/WebCore/rendering/RenderImage.cpp 2016-12-06 23:39:21 UTC (rev 209430)
+++ trunk/Source/WebCore/rendering/RenderImage.cpp 2016-12-06 23:45:02 UTC (rev 209431)
@@ -682,6 +682,9 @@
void RenderImage::layoutShadowControls(const LayoutSize& oldSize)
{
+ // We expect a single containing box under the UA shadow root.
+ ASSERT(firstChild() == lastChild());
+
auto* controlsRenderer = downcast<RenderBox>(firstChild());
if (!controlsRenderer)
return;
