Attachment #305457 for bug #169145

View Details Raw Unified Return to Bug 169145

| Differences between



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

        [Modern Media Controls] Improve media documents across macOS, iPhone and iPad
        https://bugs.webkit.org/show_bug.cgi?id=169145
        <rdar://problem/17048858>

        Reviewed by Dean Jackson.

        There were a variety of issues with media documents, some longstanding, and some specifically
        about modern media controls.

        One issue was that fullscreen and picture-in-picture buttons would show for audio media documents,
        due to using a <video> element to load the audio file. We now have additional logic in MediaController
        to identify if the loaded media is really an audio file, and using this information to hide the
        fullscreen and picture-in-picture buttons.

        Another issue was that we would inject style in MediaDocument.cpp that was specific to modern media
        controls when we could have the modern-media-controls module injected CSS handle this styling. We now
        use the injected style in the shadow root to size media documents based on the device characteristics
        and ensuring that page styles are overridden.

        We also simplify how MediaDocument.cpp sets the source of the media element to simply use the "src"
        attribute and not a <source> element.

        Finally, we introduce a MediaDocumentController class that is instantiated when we're dealing with
        a media document to hide the controls while we determine the type of media we're loading (audio vs.
        video) in order to apply the appropriate styling without flashes.

        As a result of the new styles applied by the modern-media-controls module, media documents have a
        similar behavior on macOS and iPad, where we only enforce a min-width for video allowing them
        to play at their natural size otherwise, and enforcing a fixed width for audio. On iPhone however,
        we want to always play the media at full width, with some padding in the case of audio.

        Tests: media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html
               media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html
               media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html
               media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html
               media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html
               media/modern-media-controls/media-documents/media-document-video-ios-sizing.html
               media/modern-media-controls/media-documents/media-document-video-mac-sizing.html
               media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html

        * Modules/modern-media-controls/controls/ios-inline-media-controls.css:
        (:host(audio) .media-controls.ios.inline > .controls-bar:before,):
        (:host(audio) .media-controls.ios.inline > .controls-bar:before): Deleted.
        * Modules/modern-media-controls/controls/macos-media-controls.css:
        (:host(audio) .media-controls.mac.inline > .controls-bar,):
        (:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,):
        (:host(audio) .media-controls.mac.inline > .controls-bar): Deleted.
        (:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint): Deleted.
        * Modules/modern-media-controls/controls/media-document.css: Added.
        (:host(.media-document)):
        (:host(.media-document.ready)):
        (:host(.media-document.audio.mac)):
        (:host(.media-document.audio.ipad)):
        (:host(.media-document.audio.iphone)):
        (:host(.media-document.video.mac)):
        (:host(.media-document.video.ipad)):
        (:host(.media-document.video.iphone)):
        * Modules/modern-media-controls/js-files:
        * Modules/modern-media-controls/media/fullscreen-support.js:
        (FullscreenSupport.prototype.syncControl):
        (FullscreenSupport):
        * Modules/modern-media-controls/media/media-controller.js:
        (MediaController):
        (MediaController.prototype.get isAudio):
        * Modules/modern-media-controls/media/media-document-controller.js: Added.
        (MediaDocumentController):
        (MediaDocumentController.prototype.handleEvent):
        (MediaDocumentController.prototype._mediaDocumentHasMetadata):
        (MediaDocumentController.prototype._mediaDocumentHasSize):
        * Modules/modern-media-controls/media/pip-support.js:
        (PiPSupport.prototype.syncControl):
        (PiPSupport):
        * html/MediaDocument.cpp:
        (WebCore::MediaDocumentParser::createDocumentStructure):

2017-03-25  Chris Dumez  <cdumez@apple.com>

        REGRESSION(r214195): zillow.com header video doesn't resume when switching to another tab and back



    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 61-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
61	media/volume-down-support.js	61	media/volume-down-support.js
62	media/volume-support.js	62	media/volume-support.js
63	media/volume-up-support.js	63	media/volume-up-support.js
		64	media/media-document-controller.js
64	media/media-controller.js	65	media/media-controller.js
65		66

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 = media.webkitSupportsFullscreen && media.videoTracks.length > 0;	72	control.enabled = !this.mediaController.isAudio && media.webkitSupportsFullscreen;
73	control.isFullScreen = media.webkitDisplayingFullscreen;	73	control.isFullScreen = media.webkitDisplayingFullscreen;
74	}	74	}
75		75

Lines 41-46 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 -1 / +11 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);
44	}	46	}
45		47
46	this._updateControlsIfNeeded();	48	this._updateControlsIfNeeded();
Lines 61-67 class MediaController a/Source/WebCore/Modules/modern-media-controls/media/media-controller.js_sec2
61		63
62	get isAudio()	64	get isAudio()
63	{	65	{
64	return this.media instanceof HTMLAudioElement \|\| (this.media.readyState >= HTMLMediaElement.HAVE_METADATA && this.media.videoWidth === 0);	66	if (this.media instanceof HTMLAudioElement)
		67	return true;
		68
		69	if (this.media.readyState < HTMLMediaElement.HAVE_METADATA)
		70	return false;
		71
		72	const isLiveBroadcast = this.media.duration === Number.POSITIVE_INFINITY;
		73	const hasVideoTracks = this.media.videoWidth != 0;
		74	return !isLiveBroadcast && !hasVideoTracks;
65	}	75	}
66		76
67	get layoutTraits()	77	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()
    {
        window.requestAnimationFrame(() => {
            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 = media instanceof HTMLVideoElement && media.webkitSupportsPresentationMode(PiPMode) && !media.webkitCurrentPlaybackTargetIsWireless;	59	this.control.enabled = !this.mediaController.isAudio && 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(playsinlineAttr, emptyAtom);
    videoElement->setSrc(document.url());
    if (auto* loader = document.loader())
        videoElement->setAttributeWithoutSynchronization(typeAttr, loader->responseMIMEType());

    if (!RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
        StringBuilder elementStyle;
        elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
#if PLATFORM(IOS)
        elementStyle.appendLiteral("width: 100%; height: auto;");
#endif
        videoElement->setAttribute(styleAttr, elementStyle.toString());
        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-27  Antoine Quint  <graouts@apple.com>

        [Modern Media Controls] Improve media documents across macOS, iPhone and iPad
        https://bugs.webkit.org/show_bug.cgi?id=169145
        <rdar://problem/17048858>

        Reviewed by Dean Jackson.

        We add new tests for media documents and related features that cover the following cases:
        
            - checking <video> with only audio tracks does not show the fullscreen button
            - checking <video> with only audio tracks does not show the picture-in-picture button
            - checking the size used in media documents for audio and video across macOS, iPhone and iPad

        * media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
        * media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html: Added.
        * media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt: Added.
        * media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html: Added.
        * media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt: Added.
        * media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html: Added.
        * media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt: Added.
        * media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html: Added.
        * media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt: Added.
        * media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html: Added.
        * media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt: Added.
        * media/modern-media-controls/media-documents/media-document-video-ios-sizing.html: Added.
        * media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt: Added.
        * media/modern-media-controls/media-documents/media-document-video-mac-sizing.html: Added.
        * media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
        * media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html: Added.
        * platform/ios-simulator/TestExpectations:
        * platform/mac/TestExpectations:

2017-03-25  Aaron Chu  <aaron_chu@apple.com>

        AX: Media controls are unlabeled



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/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 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>

Lines 2840-2845 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
2840	media/modern-media-controls/placard-support/placard-support-pip.html [ Skip ]	2840	media/modern-media-controls/placard-support/placard-support-pip.html [ Skip ]
2841	media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]	2841	media/modern-media-controls/scrubber-support/scrubber-support-drag.html [ Skip ]
2842	media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]	2842	media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
		2843	media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html [ Skip ]
		2844	media/modern-media-controls/media-documents/media-document-video-mac-sizing.html [ Skip ]
2843		2845
2844	# These tests use uiController and need to be skipped in open-source	2846	# These tests use uiController and need to be skipped in open-source
2845	media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]	2847	media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip ]

Lines 1471-1476 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
1471	media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]	1471	media/modern-media-controls/media-controller/media-controller-ios-only-enable-tap-gesture-recognizer-with-fades-when-idle.html [ Skip ]
1472	media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]	1472	media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html [ Skip ]
1473	media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]	1473	media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
		1474	media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html [ Skip ]
		1475	media/modern-media-controls/media-documents/media-document-video-ios-sizing.html [ Skip ]
		1476	media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html [ Skip ]
		1477	media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html [ Skip ]
1474	media/modern-media-controls/audio/audio-controls-styles.html [ Skip ]	1478	media/modern-media-controls/audio/audio-controls-styles.html [ Skip ]
1475		1479
1476	webkit.org/b/169118 [ Debug ] media/modern-media-controls/fullscreen-support/fullscreen-support-click.html [ Pass Timeout ]	1480	webkit.org/b/169118 [ Debug ] media/modern-media-controls/fullscreen-support/fullscreen-support-click.html [ Pass Timeout ]

Return to Bug 169145

Lines 104-141 void MediaDocumentParser::createDocumentStructure() a/Source/WebCore/html/MediaDocument.cpp_sec1
- a/Source/WebCore/html/MediaDocument.cpp -21 / +9 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	}
114	rootElement->appendChild(body);	107	rootElement->appendChild(body);
115		108
116	auto videoElement = HTMLVideoElement::create(document);	109	auto videoElement = HTMLVideoElement::create(document);
117	m_mediaElement = videoElement.ptr();	110	m_mediaElement = videoElement.ptr();
118	videoElement->setAttributeWithoutSynchronization(controlsAttr, emptyAtom);	111	videoElement->setAttributeWithoutSynchronization(controlsAttr, emptyAtom);
119	videoElement->setAttributeWithoutSynchronization(autoplayAttr, emptyAtom);	112	videoElement->setAttributeWithoutSynchronization(autoplayAttr, emptyAtom);
120	videoElement->setAttributeWithoutSynchronization(nameAttr, AtomicString("media", AtomicString::ConstructFromLiteral));	113	videoElement->setAttributeWithoutSynchronization(playsinlineAttr, emptyAtom);
		114	videoElement->setSrc(document.url());
		115	if (auto* loader = document.loader())
		116	videoElement->setAttributeWithoutSynchronization(typeAttr, loader->responseMIMEType());
121		117
122	StringBuilder elementStyle;	118	if (!RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {
123	elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");	119	StringBuilder elementStyle;
		120	elementStyle.appendLiteral("max-width: 100%; max-height: 100%;");
124	#if PLATFORM(IOS)	121	#if PLATFORM(IOS)
125	elementStyle.appendLiteral("width: 100%; height: auto;");	122	elementStyle.appendLiteral("width: 100%; height: auto;");
126	#endif	123	#endif
127	if (RuntimeEnabledFeatures::sharedFeatures().modernMediaControlsEnabled()) {	124	videoElement->setAttribute(styleAttr, elementStyle.toString());
128	elementStyle.appendLiteral("min-height: 50px;");
129	}	125	}
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());
137		126
138	videoElement->appendChild(sourceElement);
139	body->appendChild(videoElement);	127	body->appendChild(videoElement);
140		128
141	Frame* frame = document.frame();	129	Frame* frame = document.frame();

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +77 lines
		1	2017-03-27 Antoine Quint <graouts@apple.com>
		2
		3	[Modern Media Controls] Improve media documents across macOS, iPhone and iPad
		4	https://bugs.webkit.org/show_bug.cgi?id=169145
		5	<rdar://problem/17048858>
		6
		7	Reviewed by Dean Jackson.
		8
		9	There were a variety of issues with media documents, some longstanding, and some specifically
		10	about modern media controls.
		11
		12	One issue was that fullscreen and picture-in-picture buttons would show for audio media documents,
		13	due to using a <video> element to load the audio file. We now have additional logic in MediaController
		14	to identify if the loaded media is really an audio file, and using this information to hide the
		15	fullscreen and picture-in-picture buttons.
		16
		17	Another issue was that we would inject style in MediaDocument.cpp that was specific to modern media
		18	controls when we could have the modern-media-controls module injected CSS handle this styling. We now
		19	use the injected style in the shadow root to size media documents based on the device characteristics
		20	and ensuring that page styles are overridden.
		21
		22	We also simplify how MediaDocument.cpp sets the source of the media element to simply use the "src"
		23	attribute and not a <source> element.
		24
		25	Finally, we introduce a MediaDocumentController class that is instantiated when we're dealing with
		26	a media document to hide the controls while we determine the type of media we're loading (audio vs.
		27	video) in order to apply the appropriate styling without flashes.
		28
		29	As a result of the new styles applied by the modern-media-controls module, media documents have a
		30	similar behavior on macOS and iPad, where we only enforce a min-width for video allowing them
		31	to play at their natural size otherwise, and enforcing a fixed width for audio. On iPhone however,
		32	we want to always play the media at full width, with some padding in the case of audio.
		33
		34	Tests: media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html
		35	media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html
		36	media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html
		37	media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html
		38	media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html
		39	media/modern-media-controls/media-documents/media-document-video-ios-sizing.html
		40	media/modern-media-controls/media-documents/media-document-video-mac-sizing.html
		41	media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html
		42
		43	* Modules/modern-media-controls/controls/ios-inline-media-controls.css:
		44	(:host(audio) .media-controls.ios.inline > .controls-bar:before,):
		45	(:host(audio) .media-controls.ios.inline > .controls-bar:before): Deleted.
		46	* Modules/modern-media-controls/controls/macos-media-controls.css:
		47	(:host(audio) .media-controls.mac.inline > .controls-bar,):
		48	(:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,):
		49	(:host(audio) .media-controls.mac.inline > .controls-bar): Deleted.
		50	(:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint): Deleted.
		51	* Modules/modern-media-controls/controls/media-document.css: Added.
		52	(:host(.media-document)):
		53	(:host(.media-document.ready)):
		54	(:host(.media-document.audio.mac)):
		55	(:host(.media-document.audio.ipad)):
		56	(:host(.media-document.audio.iphone)):
		57	(:host(.media-document.video.mac)):
		58	(:host(.media-document.video.ipad)):
		59	(:host(.media-document.video.iphone)):
		60	* Modules/modern-media-controls/js-files:
		61	* Modules/modern-media-controls/media/fullscreen-support.js:
		62	(FullscreenSupport.prototype.syncControl):
		63	(FullscreenSupport):
		64	* Modules/modern-media-controls/media/media-controller.js:
65	(MediaController):
66	(MediaController.prototype.get isAudio):
67	* Modules/modern-media-controls/media/media-document-controller.js: Added.
68	(MediaDocumentController):
69	(MediaDocumentController.prototype.handleEvent):
70	(MediaDocumentController.prototype._mediaDocumentHasMetadata):
71	(MediaDocumentController.prototype._mediaDocumentHasSize):
72	* Modules/modern-media-controls/media/pip-support.js:
73	(PiPSupport.prototype.syncControl):
74	(PiPSupport):
75	* html/MediaDocument.cpp:
76	(WebCore::MediaDocumentParser::createDocumentStructure):
77
1	2017-03-25 Chris Dumez <cdumez@apple.com>	78	2017-03-25 Chris Dumez <cdumez@apple.com>
2		79
3	REGRESSION(r214195): zillow.com header video doesn't resume when switching to another tab and back	80	REGRESSION(r214195): zillow.com header video doesn't resume when switching to another tab and back

Lines 43-49 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 -1 / +2 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 {
47	-webkit-appearance: none;	48	-webkit-appearance: none;
48	background-color: rgb(212, 212, 212);	49	background-color: rgb(212, 212, 212);
49	}	50	}

Lines 50-59 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 -2 / +4 lines
50	-webkit-appearance: none !important;	50	-webkit-appearance: none !important;
51	}	51	}
52		52
53	:host(audio) .media-controls.mac.inline > .controls-bar {	53	:host(audio) .media-controls.mac.inline > .controls-bar,
		54	:host(.media-document.audio) .media-controls.mac.inline > .controls-bar {
54	background-color: rgb(41, 41, 41);	55	background-color: rgb(41, 41, 41);
55	}	56	}
56		57
57	:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint {	58	:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint,
		59	:host(.media-document.audio) .media-controls.mac.inline > .controls-bar > .background-tint {
58	display: none;	60	display: none;
59	}	61	}

Line 0 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 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +33 lines
		1	2017-03-27 Antoine Quint <graouts@apple.com>
		2
		3	[Modern Media Controls] Improve media documents across macOS, iPhone and iPad
		4	https://bugs.webkit.org/show_bug.cgi?id=169145
		5	<rdar://problem/17048858>
		6
		7	Reviewed by Dean Jackson.
		8
		9	We add new tests for media documents and related features that cover the following cases:
		10
		11	- checking <video> with only audio tracks does not show the fullscreen button
		12	- checking <video> with only audio tracks does not show the picture-in-picture button
		13	- checking the size used in media documents for audio and video across macOS, iPhone and iPad
		14
		15	* media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
		16	* media/modern-media-controls/fullscreen-support/fullscreen-support-disabled-video-with-audio-tracks-only.html: Added.
		17	* media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing-expected.txt: Added.
		18	* media/modern-media-controls/media-documents/ipad/media-document-audio-ios-sizing.html: Added.
		19	* media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing-expected.txt: Added.
		20	* media/modern-media-controls/media-documents/ipad/media-document-video-ios-sizing.html: Added.
		21	* media/modern-media-controls/media-documents/media-document-audio-ios-sizing-expected.txt: Added.
		22	* media/modern-media-controls/media-documents/media-document-audio-ios-sizing.html: Added.
		23	* media/modern-media-controls/media-documents/media-document-audio-mac-sizing-expected.txt: Added.
		24	* media/modern-media-controls/media-documents/media-document-audio-mac-sizing.html: Added.
		25	* media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt: Added.
		26	* media/modern-media-controls/media-documents/media-document-video-ios-sizing.html: Added.
		27	* media/modern-media-controls/media-documents/media-document-video-mac-sizing-expected.txt: Added.
		28	* media/modern-media-controls/media-documents/media-document-video-mac-sizing.html: Added.
		29	* media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only-expected.txt: Added.
		30	* media/modern-media-controls/pip-support/pip-support-disabled-video-with-audio-tracks-only.html: Added.
		31	* platform/ios-simulator/TestExpectations:
		32	* platform/mac/TestExpectations:
		33
1	2017-03-25 Aaron Chu <aaron_chu@apple.com>	34	2017-03-25 Aaron Chu <aaron_chu@apple.com>
2		35
3	AX: Media controls are unlabeled	36	AX: Media controls are unlabeled

Line 0 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

Line 0 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>

Line 0 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

Line 0 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>

Line 0 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>

Line 0 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