Attachment #303384 for bug #169163

View Details Raw Unified Return to Bug 169163



2017-03-03  Commit Queue  <commit-queue@webkit.org>

        Unreviewed, rolling out r213400.
        https://bugs.webkit.org/show_bug.cgi?id=169163

        Caused frequent assertion failures (Requested by ap on
        #webkit).

        Reverted changeset:

        "[Modern Media Controls] Improve media documents across macOS,
        iPhone and iPad"
        https://bugs.webkit.org/show_bug.cgi?id=169145
        http://trac.webkit.org/changeset/213400

2017-03-03  Andy Estes  <aestes@apple.com>

        Add support for canvas.toBlob



    will-change: transform;
}

:host(audio) .media-controls.ios.inline > .controls-bar:before {
:host(.media-document.audio) .media-controls.ios.inline > .controls-bar:before {
    -webkit-appearance: none;
    background-color: rgb(212, 212, 212);
}



    -webkit-appearance: none !important;
}

:host(audio) .media-controls.mac.inline > .controls-bar {
:host(.media-document.audio) .media-controls.mac.inline > .controls-bar {
    background-color: rgb(41, 41, 41);
}

:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint {
:host(.media-document.audio) .media-controls.mac.inline > .controls-bar > .background-tint {
    display: none;
}



/*
 * Copyright (C) 2017 Apple Inc. All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

:host(.media-document) {
    visibility: hidden !important;
    max-width: 100% !important;
    min-height: 50px !important;
}

:host(.media-document.ready) {
    visibility: visible !important;
}

/* Audio */

:host(.media-document.audio.mac) {
    width: 650px !important;
    min-height: 25px !important;
}

:host(.media-document.audio.ipad) {
    width: 650px !important;
}

:host(.media-document.audio.iphone) {
    padding: 0 10px;
    width: 100% !important;
    box-sizing: border-box;
}

/* Video */

:host(.media-document.video.mac) {
    min-width: 700px !important;
}

:host(.media-document.video.ipad) {
    min-width: 700px !important;
}

:host(.media-document.video.iphone) {
    width: 100% !important;
}

Lines 60-65 media/tracks-support.js a/Source/WebCore/Modules/modern-media-controls/js-files_sec1
- a/Source/WebCore/Modules/modern-media-controls/js-files -1 lines
60	media/volume-down-support.js	60	media/volume-down-support.js
61	media/volume-support.js	61	media/volume-support.js
62	media/volume-up-support.js	62	media/volume-up-support.js
63	media/media-document-controller.js
64	media/media-controller.js	63	media/media-controller.js
65	main.js	64	main.js

Lines 69-75 class FullscreenSupport extends MediaControllerSupport a/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js_sec1
- a/Source/WebCore/Modules/modern-media-controls/media/fullscreen-support.js -1 / +1 lines
69	{	69	{
70	const control = this.control;	70	const control = this.control;
71	const media = this.mediaController.media;	71	const media = this.mediaController.media;
72	control.enabled = !this.mediaController.isAudio && media.webkitSupportsFullscreen;	72	control.enabled = media.webkitSupportsFullscreen && media.videoTracks.length > 0;
73	control.isFullScreen = media.webkitDisplayingFullscreen;	73	control.isFullScreen = media.webkitDisplayingFullscreen;
74	}	74	}
75		75



        if (host) {
            host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;
            this.container.appendChild(host.textTrackContainer);
            if (host.isInMediaDocument)
                this.mediaDocumentController = new MediaDocumentController(this);
        }

        this._updateControlsIfNeeded();


    get isAudio()
    {
        return this.media instanceof HTMLAudioElement || (this.media.readyState >= HTMLMediaElement.HAVE_METADATA && this.media.videoWidth === 0);
            return true;

        if (this.media.readyState < HTMLMediaElement.HAVE_METADATA)
            return false;

        const isLiveBroadcast = this.media.duration === Number.POSITIVE_INFINITY;
        const hasVideoTracks = this.media.videoWidth != 0;
        return !isLiveBroadcast && !hasVideoTracks;
    }

    get layoutTraits()



/*
 * Copyright (C) 2017 Apple Inc. All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

class MediaDocumentController
{

    constructor(mediaController)
    {
        this.mediaController = mediaController;

        const media = mediaController.media;
        media.classList.add("media-document");

        if (media.readyState >= HTMLMediaElement.HAVE_METADATA)
            this._mediaDocumentHasMetadata();
        else
            media.addEventListener("loadedmetadata", this);
    }

    // Protected

    handleEvent(event)
    {
        event.currentTarget.removeEventListener(event.type, this);

        if (event.type === "loadedmetadata")
            this._mediaDocumentHasMetadata();
        else if (event.type === "resize")
            this._mediaDocumentHasSize();
    }

    // Private

    _mediaDocumentHasMetadata()
    {
        const media = this.mediaController.media;
        media.classList.add(this.mediaController.isAudio ? "audio" : "video");
        media.classList.add(window.navigator.platform === "MacIntel" ? "mac" : window.navigator.platform);

        if (this.mediaController.isAudio)
            this._mediaDocumentHasSize();
        else
            this.mediaController.shadowRoot.addEventListener("resize", this);
    }

    _mediaDocumentHasSize()
    {
        window.requestAnimationFrame(() => this.mediaController.media.classList.add("ready"));
    }

}

Lines 56-62 class PiPSupport extends MediaControllerSupport a/Source/WebCore/Modules/modern-media-controls/media/pip-support.js_sec1
- a/Source/WebCore/Modules/modern-media-controls/media/pip-support.js -1 / +1 lines
56	{	56	{
57	const media = this.mediaController.media;	57	const media = this.mediaController.media;
58	if (media.webkitSupportsPresentationMode)	58	if (media.webkitSupportsPresentationMode)
59	this.control.enabled = !this.mediaController.isAudio && media.webkitSupportsPresentationMode(PiPMode) && !media.webkitCurrentPlaybackTargetIsWireless;	59	this.control.enabled = media instanceof HTMLVideoElement && media.webkitSupportsPresentationMode(PiPMode) && !media.webkitCurrentPlaybackTargetIsWireless;
60	else	60	else
61	this.control.enabled = false;	61	this.control.enabled = false;
62	}	62	}



#endif

    auto body = HTMLBodyElement::create(document);
    if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
        StringBuilder bodyStyle;
        bodyStyle.appendLiteral("margin: 0; padding: 0;");
        bodyStyle.appendLiteral("background-color: rgb(38, 38, 38);");
        bodyStyle.appendLiteral("display: flex; justify-content: center; align-items: center;");
        body->setAttribute(styleAttr, bodyStyle.toString());
    }
    rootElement->appendChild(body);

    auto videoElement = HTMLVideoElement::create(document);
    m_mediaElement = videoElement.ptr();
    videoElement->setAttributeWithoutSynchronization(controlsAttr, emptyAtom);
    videoElement->setAttributeWithoutSynchronization(autoplayAttr, emptyAtom);
    videoElement->setAttributeWithoutSynchronization(nameAttr, AtomicString("media", AtomicString::ConstructFromLiteral));
    videoElement->setSrc(document.url());
    if (auto* loader = document.loader())
        videoElement->setAttributeWithoutSynchronization(typeAttr, loader->responseMIMEType());

    StringBuilder elementStyle;
    elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
        elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
#if PLATFORM(IOS)
    elementStyle.appendLiteral("width: 100%; height: auto;");
#endif
    if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
        elementStyle.appendLiteral("min-height: 50px;");
    }
    videoElement->setAttribute(styleAttr, elementStyle.toString());

    auto sourceElement = HTMLSourceElement::create(document);
    sourceElement->setSrc(document.url());

    if (auto* loader = document.loader())
        sourceElement->setType(loader->responseMIMEType());

    videoElement->appendChild(sourceElement);
    body->appendChild(videoElement);

    Frame* frame = document.frame();



2017-03-03  Commit Queue  <commit-queue@webkit.org>

        Unreviewed, rolling out r213400.
        https://bugs.webkit.org/show_bug.cgi?id=169163

        Caused frequent assertion failures (Requested by ap on
        #webkit).

        Reverted changeset:

        "[Modern Media Controls] Improve media documents across macOS,
        iPhone and iPad"
        https://bugs.webkit.org/show_bug.cgi?id=169145
        http://trac.webkit.org/changeset/213400

2017-03-03  Antoine Quint  <graouts@apple.com>

        [Modern Media Controls] Improve media documents across macOS, iPhone and iPad



Testing that the fullscreen button is disabled for <video> with an audio resource.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


Once media loads its metadata the fullscreen button should become disabled
Obtained loadedmetadata event
PASS mediaController.isAudio is true
PASS mediaController.controls.fullscreenButton.enabled is false

PASS successfullyParsed is true

TEST COMPLETE




<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<style type="text/css" media="screen">
    
    video, #host {
        position: absolute;
        top: 0;
        left: 0;
    }

    video {
        width: 800px;
        height: 240px;
    }
    
</style>
<video src="../../content/test.wav" controls autoplay></video>
<div id="host"></div>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing that the fullscreen button is disabled for &lt;video> with an audio resource.");

const container = document.querySelector("div#host");
const media = document.querySelector("video");
const mediaController = createControls(container, media, null);

debug("Once media loads its metadata the fullscreen button should become disabled");
media.addEventListener("loadedmetadata", () => {
    debug("Obtained loadedmetadata event");
    shouldBeTrue("mediaController.isAudio");
    shouldBeFalse("mediaController.controls.fullscreenButton.enabled");
    
    debug("");
    media.remove();
    container.remove();
    finishJSTest();
});

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>



Testing the size of the media element in an audio media document on iOS.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getComputedStyle(media).width became "650px"
PASS getComputedStyle(media).height is "50px"

PASS successfullyParsed is true

TEST COMPLETE




<script src="../../../../resources/js-test-pre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<iframe src="../../../content/silence.mp3" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<script type="text/javascript">

description("Testing the size of the media element in an audio media document on iOS.");

window.jsTestIsAsync = true;

let media;

(function runTestIfReady() {
    const iframe = document.querySelector("iframe");
    media = iframe.contentDocument.querySelector("video");

    if (!media) {
        setTimeout(runTestIfReady);
        return;
    }

    shouldBecomeEqualToString("getComputedStyle(media).width", "650px", () => {
        shouldBeEqualToString("getComputedStyle(media).height", "50px");

        debug("");
        iframe.remove();
        finishJSTest();
    });

})();

</script>
<script src="../../../../resources/js-test-post.js"></script>
</body>



Testing the size of the media element in a video media document on iOS.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getComputedStyle(media).width became "700px"
PASS getComputedStyle(media).height is "525px"

PASS successfullyParsed is true

TEST COMPLETE




<script src="../../../../resources/js-test-pre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<iframe src="../../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<script type="text/javascript">

description("Testing the size of the media element in a video media document on iOS.");

window.jsTestIsAsync = true;

let media;

(function runTestIfReady() {
    const iframe = document.querySelector("iframe");
    media = iframe.contentDocument.querySelector("video");

    if (!media) {
        setTimeout(runTestIfReady);
        return;
    }

    shouldBecomeEqualToString("getComputedStyle(media).width", "700px", () => {
        shouldBeEqualToString("getComputedStyle(media).height", "525px");

        debug("");
        iframe.remove();
        finishJSTest();
    });

})();

</script>
<script src="../../../../resources/js-test-post.js"></script>
</body>



Testing the size of the media element in an audio media document on iOS.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getComputedStyle(media).width became "320px"
PASS getComputedStyle(media).height is "50px"

PASS successfullyParsed is true

TEST COMPLETE




<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<script src="../../../resources/js-test-pre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<iframe src="../../content/silence.mp3" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<script type="text/javascript">

description("Testing the size of the media element in an audio media document on iOS.");

window.jsTestIsAsync = true;

let media;

(function runTestIfReady() {
    const iframe = document.querySelector("iframe");
    media = iframe.contentDocument.querySelector("video");

    if (!media) {
        setTimeout(runTestIfReady);
        return;
    }

    shouldBecomeEqualToString("getComputedStyle(media).width", "320px", () => {
        shouldBeEqualToString("getComputedStyle(media).height", "50px");

        debug("");
        iframe.remove();
        finishJSTest();
    });

})();

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>



Testing the size of the media element in an audio media document on macOS.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getComputedStyle(media).width became "650px"
PASS getComputedStyle(media).height is "25px"

PASS successfullyParsed is true

TEST COMPLETE




<script src="../../../resources/js-test-pre.js"></script>
<body>
<iframe src="../../content/test.wav" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<script type="text/javascript">

description("Testing the size of the media element in an audio media document on macOS.");

window.jsTestIsAsync = true;

let media;

(function runTestIfReady() {
    const iframe = document.querySelector("iframe");
    media = iframe.contentDocument.querySelector("video");

    if (!media) {
        setTimeout(runTestIfReady);
        return;
    }

    shouldBecomeEqualToString("getComputedStyle(media).width", "650px", () => {
        shouldBeEqualToString("getComputedStyle(media).height", "25px");

        debug("");
        iframe.remove();
        finishJSTest();
    });

})();

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>



Testing the size of the media element in a video media document on iOS.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getComputedStyle(media).height became "240px"
PASS getComputedStyle(media).width is "320px"

PASS successfullyParsed is true

TEST COMPLETE




<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<script src="../../../resources/js-test-pre.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<iframe src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<script type="text/javascript">

description("Testing the size of the media element in a video media document on iOS.");

window.jsTestIsAsync = true;

let media;

(function runTestIfReady() {
    const iframe = document.querySelector("iframe");
    media = iframe.contentDocument.querySelector("video");

    if (!media) {
        setTimeout(runTestIfReady);
        return;
    }

    shouldBecomeEqualToString("getComputedStyle(media).height", "240px", () => {
        shouldBeEqualToString("getComputedStyle(media).width", "320px");

        debug("");
        iframe.remove();
        finishJSTest();
    });

})();

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>



Testing the size of the media element in a video media document on macOS.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


PASS getComputedStyle(media).width became "700px"
PASS getComputedStyle(media).height is "525px"

PASS successfullyParsed is true

TEST COMPLETE




<script src="../../../resources/js-test-pre.js"></script>
<body>
<iframe src="../../content/test.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<script type="text/javascript">

description("Testing the size of the media element in a video media document on macOS.");

window.jsTestIsAsync = true;

let media;

(function runTestIfReady() {
    const iframe = document.querySelector("iframe");
    media = iframe.contentDocument.querySelector("video");

    if (!media) {
        setTimeout(runTestIfReady);
        return;
    }

    shouldBecomeEqualToString("getComputedStyle(media).width", "700px", () => {
        shouldBeEqualToString("getComputedStyle(media).height", "525px");

        debug("");
        iframe.remove();
        finishJSTest();
    });

})();

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>



Testing that the picture-in-picture button is disabled for <video> with an audio resource.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


Once media loads its metadata the picture-in-picture button should become disabled
Obtained loadedmetadata event
PASS mediaController.isAudio is true
PASS mediaController.controls.pipButton.enabled is false

PASS successfullyParsed is true

TEST COMPLETE




<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<style type="text/css" media="screen">
    
    video, #host {
        position: absolute;
        top: 0;
        left: 0;
    }

    video {
        width: 800px;
        height: 240px;
    }
    
</style>
<video src="../../content/test.wav" controls autoplay></video>
<div id="host"></div>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing that the picture-in-picture button is disabled for &lt;video> with an audio resource.");

const container = document.querySelector("div#host");
const media = document.querySelector("video");
const mediaController = createControls(container, media, null);

debug("Once media loads its metadata the picture-in-picture button should become disabled");
media.addEventListener("loadedmetadata", () => {
    debug("Obtained loadedmetadata event");
    shouldBeTrue("mediaController.isAudio");
    shouldBeFalse("mediaController.controls.pipButton.enabled");
    
    debug("");
    media.remove();
    container.remove();
    finishJSTest();
});

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>



media/modern-media-controls/placard-support/placard-support-pip.html [ Skip ]
media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]
media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html [ Skip ]
media/modern-media-controls/media-documents/media-document-video-mac-sizing.html [ Skip ]

# These tests use uiController and need to be skipped in open-source
media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]



media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]
media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html [ Skip ]
media/modern-media-controls/media-documents/media-document-video-ios-sizing.html [ Skip ]
media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html [ Skip ]
media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html [ Skip ]

webkit.org/b/167266 media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html [ Pass Failure ]


Return to Bug 169163

Lines 43-50 a/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css_sec1
- a/Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css -2 / +1 lines
43	will-change: transform;	43	will-change: transform;
44	}	44	}
45		45
46	:host(audio) .media-controls.ios.inline > .controls-bar:before,	46	:host(audio) .media-controls.ios.inline > .controls-bar:before {
47	:host(.media-document.audio) .media-controls.ios.inline > .controls-bar:before {
48	-webkit-appearance: none;	47	-webkit-appearance: none;
49	background-color: rgb(212, 212, 212);	48	background-color: rgb(212, 212, 212);
50	}	49	}

Lines 104-129 void MediaDocumentParser::createDocumentStructure() a/Source/WebCore/html/MediaDocument.cpp_sec1
- a/Source/WebCore/html/MediaDocument.cpp -9 / +21 lines
104	#endif	104	#endif
105		105
106	auto body = HTMLBodyElement::create(document);	106	auto body = HTMLBodyElement::create(document);
		107	if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
		108	StringBuilder bodyStyle;
		109	bodyStyle.appendLiteral("margin: 0; padding: 0;");
		110	bodyStyle.appendLiteral("background-color: rgb(38, 38, 38);");
		111	bodyStyle.appendLiteral("display: flex; justify-content: center; align-items: center;");
		112	body->setAttribute(styleAttr, bodyStyle.toString());
		113	}
107	rootElement->appendChild(body);	114	rootElement->appendChild(body);
108		115
109	auto videoElement = HTMLVideoElement::create(document);	116	auto videoElement = HTMLVideoElement::create(document);
110	m_mediaElement = videoElement.ptr();	117	m_mediaElement = videoElement.ptr();
111	videoElement->setAttributeWithoutSynchronization(controlsAttr, emptyAtom);	118	videoElement->setAttributeWithoutSynchronization(controlsAttr, emptyAtom);
112	videoElement->setAttributeWithoutSynchronization(autoplayAttr, emptyAtom);	119	videoElement->setAttributeWithoutSynchronization(autoplayAttr, emptyAtom);
113	videoElement->setAttributeWithoutSynchronization(playsinlineAttr, emptyAtom);	120	videoElement->setAttributeWithoutSynchronization(nameAttr, AtomicString("media", AtomicString::ConstructFromLiteral));
114	videoElement->setSrc(document.url());
115	if (auto* loader = document.loader())
116	videoElement->setAttributeWithoutSynchronization(typeAttr, loader->responseMIMEType());
117		121
118	if (!RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {	122	StringBuilder elementStyle;
119	StringBuilder elementStyle;	123	elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
120	elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
121	#if PLATFORM(IOS)	124	#if PLATFORM(IOS)
122	elementStyle.appendLiteral("width: 100%; height: auto;");	125	elementStyle.appendLiteral("width: 100%; height: auto;");
123	#endif	126	#endif
124	videoElement->setAttribute(styleAttr, elementStyle.toString());	127	if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
		128	elementStyle.appendLiteral("min-height: 50px;");
125	}	129	}
		130	videoElement->setAttribute(styleAttr, elementStyle.toString());
		131
		132	auto sourceElement = HTMLSourceElement::create(document);
		133	sourceElement->setSrc(document.url());
		134
		135	if (auto* loader = document.loader())
		136	sourceElement->setType(loader->responseMIMEType());
126		137
		138	videoElement->appendChild(sourceElement);
127	body->appendChild(videoElement);	139	body->appendChild(videoElement);
128		140
129	Frame* frame = document.frame();	141	Frame* frame = document.frame();

Lines 2818-2825 media/modern-media-controls/pip-support/pip-support-enabled.html [ Skip ] a/LayoutTests/platform/ios-simulator/TestExpectations_sec1
- a/LayoutTests/platform/ios-simulator/TestExpectations -2 lines
2818	media/modern-media-controls/placard-support/placard-support-pip.html [ Skip ]	2818	media/modern-media-controls/placard-support/placard-support-pip.html [ Skip ]
2819	media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]	2819	media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]
2820	media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]	2820	media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
2821	media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html [ Skip ]
2822	media/modern-media-controls/media-documents/media-document-video-mac-sizing.html [ Skip ]
2823		2821
2824	# These tests use uiController and need to be skipped in open-source	2822	# These tests use uiController and need to be skipped in open-source
2825	media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]	2823	media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]

Lines 1480-1489 media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls- a/LayoutTests/platform/mac/TestExpectations_sec1
- a/LayoutTests/platform/mac/TestExpectations -4 lines
1480	media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]	1480	media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
1481	media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]	1481	media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]
1482	media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]	1482	media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
1483	media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html [ Skip ]
1484	media/modern-media-controls/media-documents/media-document-video-ios-sizing.html [ Skip ]
1485	media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html [ Skip ]
1486	media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html [ Skip ]
1487		1483
1488	webkit.org/b/167266 media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html [ Pass Failure ]	1484	webkit.org/b/167266 media/modern-media-controls/media-controller/media-controller-auto-hide-mouse-enter-over-controls-bar.html [ Pass Failure ]
1489		1485

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +15 lines
		1	2017-03-03 Commit Queue <commit-queue@webkit.org>
		2
		3	Unreviewed, rolling out r213400.
		4	https://bugs.webkit.org/show_bug.cgi?id=169163
		5
		6	Caused frequent assertion failures (Requested by ap on
		7	#webkit).
		8
		9	Reverted changeset:
		10
		11	"[Modern Media Controls] Improve media documents across macOS,
		12	iPhone and iPad"
		13	https://bugs.webkit.org/show_bug.cgi?id=169145
		14	http://trac.webkit.org/changeset/213400
		15
1	2017-03-03 Andy Estes <aestes@apple.com>	16	2017-03-03 Andy Estes <aestes@apple.com>
2		17
3	Add support for canvas.toBlob	18	Add support for canvas.toBlob

Lines 51-62 a/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css_sec1
- a/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css -4 / +2 lines
51	-webkit-appearance: none !important;	51	-webkit-appearance: none !important;
52	}	52	}
53		53
54	:host(audio) .media-controls.mac.inline > .controls-bar,	54	:host(audio) .media-controls.mac.inline > .controls-bar {
55	:host(.media-document.audio) .media-controls.mac.inline > .controls-bar {
56	background-color: rgb(41, 41, 41);	55	background-color: rgb(41, 41, 41);
57	}	56	}
58		57
59	:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,	58	:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint {
60	:host(.media-document.audio) .media-controls.mac.inline > .controls-bar > .background-tint {
61	display: none;	59	display: none;
62	}	60	}

Lines 1-65 a/Source/WebCore/Modules/modern-media-controls/controls/media-document.css_sec1
- a/Source/WebCore/Modules/modern-media-controls/controls/media-document.css -65 lines
1	/*
2	* Copyright (C) 2017 Apple Inc. All Rights Reserved.
3	*
4	* Redistribution and use in source and binary forms, with or without
5	* modification, are permitted provided that the following conditions
6	* are met:
7	* 1. Redistributions of source code must retain the above copyright
8	* notice, this list of conditions and the following disclaimer.
9	* 2. Redistributions in binary form must reproduce the above copyright
10	* notice, this list of conditions and the following disclaimer in the
11	* documentation and/or other materials provided with the distribution.
12	*
13	* THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
14	* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15	* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16	* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
17	* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18	* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19	* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
20	* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
21	* OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
22	* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23	* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24	*/
25
26	:host(.media-document) {
27	visibility: hidden !important;
28	max-width: 100% !important;
29	min-height: 50px !important;
30	}
31
32	:host(.media-document.ready) {
33	visibility: visible !important;
34	}
35
36	/* Audio */
37
38	:host(.media-document.audio.mac) {
39	width: 650px !important;
40	min-height: 25px !important;
41	}
42
43	:host(.media-document.audio.ipad) {
44	width: 650px !important;
45	}
46
47	:host(.media-document.audio.iphone) {
48	padding: 0 10px;
49	width: 100% !important;
50	box-sizing: border-box;
51	}
52
53	/* Video */
54
55	:host(.media-document.video.mac) {
56	min-width: 700px !important;
57	}
58
59	:host(.media-document.video.ipad) {
60	min-width: 700px !important;
61	}
62
63	:host(.media-document.video.iphone) {
64	width: 100% !important;
65	}

Lines 41-48 class MediaController a/Source/WebCore/Modules/modern-media-controls/media/media-controller.js_sec1
- a/Source/WebCore/Modules/modern-media-controls/media/media-controller.js -11 / +1 lines
41	if (host) {	41	if (host) {
42	host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;	42	host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS;
43	this.container.appendChild(host.textTrackContainer);	43	this.container.appendChild(host.textTrackContainer);
44	if (host.isInMediaDocument)
45	this.mediaDocumentController = new MediaDocumentController(this);
46	}	44	}
47		45
48	this._updateControlsIfNeeded();	46	this._updateControlsIfNeeded();
Lines 62-76 class MediaController a/Source/WebCore/Modules/modern-media-controls/media/media-controller.js_sec2
62		60
63	get isAudio()	61	get isAudio()
64	{	62	{
65	if (this.media instanceof HTMLAudioElement)	63	return this.media instanceof HTMLAudioElement \|\| (this.media.readyState >= HTMLMediaElement.HAVE_METADATA && this.media.videoWidth === 0);
66	return true;
67
68	if (this.media.readyState < HTMLMediaElement.HAVE_METADATA)
69	return false;
70
71	const isLiveBroadcast = this.media.duration === Number.POSITIVE_INFINITY;
72	const hasVideoTracks = this.media.videoWidth != 0;
73	return !isLiveBroadcast && !hasVideoTracks;
74	}	64	}
75		65
76	get layoutTraits()	66	get layoutTraits()

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +15 lines
		1	2017-03-03 Commit Queue <commit-queue@webkit.org>
		2
		3	Unreviewed, rolling out r213400.
		4	https://bugs.webkit.org/show_bug.cgi?id=169163
		5
		6	Caused frequent assertion failures (Requested by ap on
		7	#webkit).
		8
		9	Reverted changeset:
		10
		11	"[Modern Media Controls] Improve media documents across macOS,
		12	iPhone and iPad"
		13	https://bugs.webkit.org/show_bug.cgi?id=169145
		14	http://trac.webkit.org/changeset/213400
		15
1	2017-03-03 Antoine Quint <graouts@apple.com>	16	2017-03-03 Antoine Quint <graouts@apple.com>
2		17
3	[Modern Media Controls] Improve media documents across macOS, iPhone and iPad	18	[Modern Media Controls] Improve media documents across macOS, iPhone and iPad

Lines 1-14 a/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt_sec1
- a/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt -14 lines
1	Testing that the fullscreen button is disabled for <video> with an audio resource.
2
3	On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
4
5
6	Once media loads its metadata the fullscreen button should become disabled
7	Obtained loadedmetadata event
8	PASS mediaController.isAudio is true
9	PASS mediaController.controls.fullscreenButton.enabled is false
10
11	PASS successfullyParsed is true
12
13	TEST COMPLETE
14

Lines 1-44 a/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html_sec1
- a/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html -44 lines
1	<script src="../../../resources/js-test-pre.js"></script>
2	<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
3	<body>
4	<style type="text/css" media="screen">
5
6	video, #host {
7	position: absolute;
8	top: 0;
9	left: 0;
10	}
11
12	video {
13	width: 800px;
14	height: 240px;
15	}
16
17	</style>
18	<video src="../../content/test.wav" controls autoplay></video>
19	<div id="host"></div>
20	<script type="text/javascript">
21
22	window.jsTestIsAsync = true;
23
24	description("Testing that the fullscreen button is disabled for <video> with an audio resource.");
25
26	const container = document.querySelector("div#host");
27	const media = document.querySelector("video");
28	const mediaController = createControls(container, media, null);
29
30	debug("Once media loads its metadata the fullscreen button should become disabled");
31	media.addEventListener("loadedmetadata", () => {
32	debug("Obtained loadedmetadata event");
33	shouldBeTrue("mediaController.isAudio");
34	shouldBeFalse("mediaController.controls.fullscreenButton.enabled");
35
36	debug("");
37	media.remove();
38	container.remove();
39	finishJSTest();
40	});
41
42	</script>
43	<script src="../../../resources/js-test-post.js"></script>
44	</body>

Lines 1-12 a/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt_sec1
- a/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt -12 lines
1	Testing the size of the media element in an audio media document on iOS.
2
3	On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
4
5
6	PASS getComputedStyle(media).width became "650px"
7	PASS getComputedStyle(media).height is "50px"
8
9	PASS successfullyParsed is true
10
11	TEST COMPLETE
12

Lines 1-34 a/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html_sec1
- a/LayoutTests/media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html -34 lines
1	<script src="../../../../resources/js-test-pre.js"></script>
2	<meta name="viewport" content="width=device-width, initial-scale=1">
3	<body>
4	<iframe src="../../../content/silence.mp3" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
5	<script type="text/javascript">
6
7	description("Testing the size of the media element in an audio media document on iOS.");
8
9	window.jsTestIsAsync = true;
10
11	let media;
12
13	(function runTestIfReady() {
14	const iframe = document.querySelector("iframe");
15	media = iframe.contentDocument.querySelector("video");
16
17	if (!media) {
18	setTimeout(runTestIfReady);
19	return;
20	}
21
22	shouldBecomeEqualToString("getComputedStyle(media).width", "650px", () => {
23	shouldBeEqualToString("getComputedStyle(media).height", "50px");
24
25	debug("");
26	iframe.remove();
27	finishJSTest();
28	});
29
30	})();
31
32	</script>
33	<script src="../../../../resources/js-test-post.js"></script>
34	</body>

Lines 1-35 a/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html_sec1
- a/LayoutTests/media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html -35 lines
1	<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
2	<script src="../../../resources/js-test-pre.js"></script>
3	<meta name="viewport" content="width=device-width, initial-scale=1">
4	<body>
5	<iframe src="../../content/silence.mp3" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
6	<script type="text/javascript">
7
8	description("Testing the size of the media element in an audio media document on iOS.");
9
10	window.jsTestIsAsync = true;
11
12	let media;
13
14	(function runTestIfReady() {
15	const iframe = document.querySelector("iframe");
16	media = iframe.contentDocument.querySelector("video");
17
18	if (!media) {
19	setTimeout(runTestIfReady);
20	return;
21	}
22
23	shouldBecomeEqualToString("getComputedStyle(media).width", "320px", () => {
24	shouldBeEqualToString("getComputedStyle(media).height", "50px");
25
26	debug("");
27	iframe.remove();
28	finishJSTest();
29	});
30
31	})();
32
33	</script>
34	<script src="../../../resources/js-test-post.js"></script>
35	</body>

Lines 1-14 a/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt_sec1
- a/LayoutTests/media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt -14 lines
1	Testing that the picture-in-picture button is disabled for <video> with an audio resource.
2
3	On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
4
5
6	Once media loads its metadata the picture-in-picture button should become disabled
7	Obtained loadedmetadata event
8	PASS mediaController.isAudio is true
9	PASS mediaController.controls.pipButton.enabled is false
10
11	PASS successfullyParsed is true
12
13	TEST COMPLETE
14