Attachment #301042 for bug #168049

View Details Raw Unified Return to Bug 168049



2017-02-09  Antoine Quint  <graouts@apple.com>

        [Modern Media Controls] Tapping the skip back button on iOS inline media controls make the controls disappear
        https://bugs.webkit.org/show_bug.cgi?id=168049
        <rdar://problem/30442660>

        Reviewed by NOBODY (OOPS!).

        Calling elementAtPoint() on the Document will not return an element in the ShadowRoot,
        we need to call it on the ShadowRoot. So we now iterate over ancestors of the controls
        bar to find the ShadowRoot, if any, and check whether the tapped element is contained
        within the controls bar. We only fade the controls bar out if the tapped element is
        outside of the controls bar hierarchy.

        Test: media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html

        * Modules/modern-media-controls/controls/controls-bar.js:
        (ControlsBar.prototype.gestureRecognizerStateDidChange):

2017-02-09  Antoine Quint  <graouts@apple.com>

        [Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
        https://bugs.webkit.org/show_bug.cgi?id=168047
        <rdar://problem/30441939>



        if (this.faded)
            this.faded = false;
        else {
            let ancestor = this.element.parentNode;
            while (ancestor && !(ancestor instanceof ShadowRoot))
                ancestor = ancestor.parentNode;

            const shadowRoot = ancestor;
            if (!shadowRoot)
                return;

            const tapLocation = recognizer.locationInClient();
            const tappedElement = shadowRoot.elementFromPoint(tapLocation.x, tapLocation.y);
            if (!this.element.contains(tappedElement))
                this.faded = true;
        }



2017-02-09  Antoine Quint  <graouts@apple.com>

        [Modern Media Controls] Tapping the skip back button on iOS inline media controls make the controls disappear
        https://bugs.webkit.org/show_bug.cgi?id=168049
        <rdar://problem/30442660>

        Reviewed by NOBODY (OOPS!).

        Add a new iOS-specific test that checks that tapping a button does not automatically dismisses the controls bar.

        * media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button-expected.txt: Added.
        * media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html: Added.
        * platform/mac/TestExpectations:

2017-02-09  Antoine Quint  <graouts@apple.com>

        [Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
        https://bugs.webkit.org/show_bug.cgi?id=168047
        <rdar://problem/30441939>



Testing that tapping on the skip back button while playing on iOS does not fade the controls.

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


PASS window.internals.shadowRoot(media).querySelector('.controls-bar').classList.contains('faded') is false
PASS successfullyParsed is true

TEST COMPLETE




<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<video src="../../content/test.mp4" style="width: 300px; position: absolute; left: 0; top: 0;" type="video/mp4" playsinline muted autoplay controls></video>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing that tapping on the skip back button while playing on iOS does not fade the controls.");

const media = document.querySelector("video");

media.addEventListener("play", event => {
    pressOnElement(window.internals.shadowRoot(media).querySelector("button.skip-back"), () => {
        window.requestAnimationFrame(() => {
            shouldBeFalse("window.internals.shadowRoot(media).querySelector('.controls-bar').classList.contains('faded')");
            finishJSTest();
        });
    });
});

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

Lines 1469-1474 media/modern-media-controls/placard-support/ipad/placard-support-pip.html [ Skip a/LayoutTests/platform/mac/TestExpectations_sec1
- a/LayoutTests/platform/mac/TestExpectations +1 lines
1469	media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]	1469	media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
1470	media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html [ Skip ]	1470	media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-audio-background.html [ Skip ]
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		1473
1473	# This one always times out on the bots, cannot reproduce locally.	1474	# This one always times out on the bots, cannot reproduce locally.
1474	webkit.org/b/165234 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]	1475	webkit.org/b/165234 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]

Return to Bug 168049

Lines 176-183 class ControlsBar extends LayoutNode a/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js_sec1
- a/Source/WebCore/Modules/modern-media-controls/controls/controls-bar.js -1 / +9 lines
176	if (this.faded)	176	if (this.faded)
177	this.faded = false;	177	this.faded = false;
178	else {	178	else {
		179	let ancestor = this.element.parentNode;
		180	while (ancestor && !(ancestor instanceof ShadowRoot))
		181	ancestor = ancestor.parentNode;
		182
		183	const shadowRoot = ancestor;
		184	if (!shadowRoot)
		185	return;
		186
179	const tapLocation = recognizer.locationInClient();	187	const tapLocation = recognizer.locationInClient();
180	const tappedElement = document.elementFromPoint(tapLocation.x, tapLocation.y);	188	const tappedElement = shadowRoot.elementFromPoint(tapLocation.x, tapLocation.y);
181	if (!this.element.contains(tappedElement))	189	if (!this.element.contains(tappedElement))
182	this.faded = true;	190	this.faded = true;
183	}	191	}

Lines 1-5 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +19 lines
1	2017-02-09 Antoine Quint <graouts@apple.com>	1	2017-02-09 Antoine Quint <graouts@apple.com>
2		2
		3	[Modern Media Controls] Tapping the skip back button on iOS inline media controls make the controls disappear
		4	https://bugs.webkit.org/show_bug.cgi?id=168049
		5	<rdar://problem/30442660>
		6
		7	Reviewed by NOBODY (OOPS!).
		8
		9	Calling elementAtPoint() on the Document will not return an element in the ShadowRoot,
		10	we need to call it on the ShadowRoot. So we now iterate over ancestors of the controls
		11	bar to find the ShadowRoot, if any, and check whether the tapped element is contained
		12	within the controls bar. We only fade the controls bar out if the tapped element is
		13	outside of the controls bar hierarchy.
		14
		15	Test: media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html
		16
		17	* Modules/modern-media-controls/controls/controls-bar.js:
		18	(ControlsBar.prototype.gestureRecognizerStateDidChange):
		19
		20	2017-02-09 Antoine Quint <graouts@apple.com>
		21
3	[Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear	22	[Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
4	https://bugs.webkit.org/show_bug.cgi?id=168047	23	https://bugs.webkit.org/show_bug.cgi?id=168047
5	<rdar://problem/30441939>	24	<rdar://problem/30441939>

Lines 1-5 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +14 lines
1	2017-02-09 Antoine Quint <graouts@apple.com>	1	2017-02-09 Antoine Quint <graouts@apple.com>
2		2
		3	[Modern Media Controls] Tapping the skip back button on iOS inline media controls make the controls disappear
		4	https://bugs.webkit.org/show_bug.cgi?id=168049
		5	<rdar://problem/30442660>
		6
		7	Reviewed by NOBODY (OOPS!).
		8
		9	Add a new iOS-specific test that checks that tapping a button does not automatically dismisses the controls bar.
		10
		11	* media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button-expected.txt: Added.
		12	* media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html: Added.
		13	* platform/mac/TestExpectations:
		14
		15	2017-02-09 Antoine Quint <graouts@apple.com>
		16
3	[Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear	17	[Modern Media Controls] Playing an <audio> element on iOS makes the controls disappear
4	https://bugs.webkit.org/show_bug.cgi?id=168047	18	https://bugs.webkit.org/show_bug.cgi?id=168047
5	<rdar://problem/30441939>	19	<rdar://problem/30441939>

Line 0 a/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button-expected.txt_sec1
- a/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button-expected.txt +10 lines
	1	Testing that tapping on the skip back button while playing on iOS does not fade the controls.
	2
	3	On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
	4
	5
	6	PASS window.internals.shadowRoot(media).querySelector('.controls-bar').classList.contains('faded') is false
	7	PASS successfullyParsed is true
	8
	9	TEST COMPLETE
	10

Line 0 a/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html_sec1
- a/LayoutTests/media/modern-media-controls/media-controller/media-controller-ios-do-not-hide-controls-when-tapping-button.html +25 lines
	1	<script src="../../../resources/js-test-pre.js"></script>
	2	<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
	3	<meta name="viewport" content="width=device-width, initial-scale=1">
	4	<body>
	5	<video src="../../content/test.mp4" style="width: 300px; position: absolute; left: 0; top: 0;" type="video/mp4" playsinline muted autoplay controls></video>
	6	<script type="text/javascript">
	7
	8	window.jsTestIsAsync = true;
	9
	10	description("Testing that tapping on the skip back button while playing on iOS does not fade the controls.");
	11
	12	const media = document.querySelector("video");
	13
	14	media.addEventListener("play", event => {
	15	pressOnElement(window.internals.shadowRoot(media).querySelector("button.skip-back"), () => {
	16	window.requestAnimationFrame(() => {
	17	shouldBeFalse("window.internals.shadowRoot(media).querySelector('.controls-bar').classList.contains('faded')");
	18	finishJSTest();
	19	});
	20	});
	21	});
	22
	23	</script>
	24	<script src="../../../resources/js-test-post.js"></script>
	25	</body>