Media documents on iPad are too wide in split screen
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 31 May 2019 02:03:59 +0000 (02:03 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 31 May 2019 02:03:59 +0000 (02:03 +0000)
https://bugs.webkit.org/show_bug.cgi?id=198405
<rdar://problem/50974548>

Reviewed by Tim Horton.

Source/WebCore:

Media documents on iPad had a minimum width of 700px. This
was fine in full-screen, but didn't work when then window
was smaller, such as split screen or a link preview.

Tests: media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html
       media/modern-media-controls/media-documents/media-document-video-iphone-sizing.html

* Modules/modern-media-controls/controls/media-document.css: Add a media query to
detect small windows.
* Modules/modern-media-controls/media/media-document-controller.js:

LayoutTests:

Make old test iPhone-specific. Add an iPad-specific test.
And mark all the expectations correctly.

* media/modern-media-controls/media-documents/media-document-video-ipad-sizing-expected.txt: Copied from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt.
* media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html: Copied from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html.
* media/modern-media-controls/media-documents/media-document-video-iphone-sizing-expected.txt: Renamed from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt.
* media/modern-media-controls/media-documents/media-document-video-iphone-sizing.html: Renamed from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html.
* platform/ios/TestExpectations:
* platform/ipad/TestExpectations:
* platform/mac/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@245942 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/media-documents/media-document-video-ipad-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-iphone-sizing-expected.txt [moved from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt with 96% similarity]
LayoutTests/media/modern-media-controls/media-documents/media-document-video-iphone-sizing.html [moved from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html with 97% similarity]
LayoutTests/platform/ios/TestExpectations
LayoutTests/platform/ipad/TestExpectations
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/media-document.css
Source/WebCore/Modules/modern-media-controls/media/media-document-controller.js

index 5d98e40..950b9c0 100644 (file)
@@ -1,3 +1,22 @@
+2019-05-30  Dean Jackson  <dino@apple.com>
+
+        Media documents on iPad are too wide in split screen
+        https://bugs.webkit.org/show_bug.cgi?id=198405
+        <rdar://problem/50974548>
+
+        Reviewed by Tim Horton.
+
+        Make old test iPhone-specific. Add an iPad-specific test.
+        And mark all the expectations correctly.
+
+        * media/modern-media-controls/media-documents/media-document-video-ipad-sizing-expected.txt: Copied from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt.
+        * media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html: Copied from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html.
+        * media/modern-media-controls/media-documents/media-document-video-iphone-sizing-expected.txt: Renamed from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing-expected.txt.
+        * media/modern-media-controls/media-documents/media-document-video-iphone-sizing.html: Renamed from LayoutTests/media/modern-media-controls/media-documents/media-document-video-ios-sizing.html.
+        * platform/ios/TestExpectations:
+        * platform/ipad/TestExpectations:
+        * platform/mac/TestExpectations:
+
 2019-05-30  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Audit: there should be a default test for WebInspectorAudit.Resources functionality
diff --git a/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ipad-sizing-expected.txt b/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ipad-sizing-expected.txt
new file mode 100644 (file)
index 0000000..45fd2ef
--- /dev/null
@@ -0,0 +1,11 @@
+Testing the size of the media element in a video media document on iPad.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(media).width became "200px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html b/LayoutTests/media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html
new file mode 100644 (file)
index 0000000..2b180c1
--- /dev/null
@@ -0,0 +1,33 @@
+<!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: 200px; height: 100%;"></iframe>
+<script type="text/javascript">
+
+description("Testing the size of the media element in a video media document on iPad.");
+
+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", "200px", () => {
+        debug("");
+        iframe.remove();
+        finishJSTest();
+    });
+
+})();
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
@@ -5,7 +5,7 @@
 <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.");
+description("Testing the size of the media element in a video media document on iPhone.");
 
 window.jsTestIsAsync = true;
 
index d9fed77..bb50245 100644 (file)
@@ -3012,6 +3012,7 @@ media/modern-media-controls/media-controller/media-controller-click-on-video-bac
 media/modern-media-controls/media-controller/media-controller-space-bar-toggle-playback.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 ]
+media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html [ Skip ]
 media/modern-media-controls/pip-support [ Skip ]
 media/modern-media-controls/playback-support/playback-support-button-click.html [ Skip ]
 media/modern-media-controls/scrubber-support/scrubber-support-click.html [ Skip ]
index 1467c30..7a84021 100644 (file)
@@ -18,7 +18,10 @@ fast/visual-viewport/ios/caret-after-focus-in-fixed.html [ Skip ]
 
 # These tests are designed for iPhone and crash on iPad
 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/media-document-video-iphone-sizing.html [ Skip ]
+
+# This test is iPad-specific
+media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html [ Pass ]
 
 webkit.org/b/194221 fast/forms/datalist/datalist-textinput-suggestions-order.html [ Failure ]
 webkit.org/b/194221 fast/forms/datalist/datalist-show-hide.html [ Skip ]
index 2cc9aac..e284d8c 100644 (file)
@@ -1375,7 +1375,8 @@ media/modern-media-controls/ios-inline-media-controls [ Skip ]
 media/modern-media-controls/placard-support/ipad [ Skip ]
 media/modern-media-controls/media-controller/ios [ 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/media-document-video-iphone-sizing.html [ Skip ]
+media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html [ Skip ]
 media/modern-media-controls/scrubber-support/ipad [ Skip ]
 
 # These tests are timing-related and can fail due to performance issues on bots
index a368a5f..60ef2cf 100644 (file)
@@ -1,3 +1,22 @@
+2019-05-30  Dean Jackson  <dino@apple.com>
+
+        Media documents on iPad are too wide in split screen
+        https://bugs.webkit.org/show_bug.cgi?id=198405
+        <rdar://problem/50974548>
+
+        Reviewed by Tim Horton.
+
+        Media documents on iPad had a minimum width of 700px. This
+        was fine in full-screen, but didn't work when then window
+        was smaller, such as split screen or a link preview.
+
+        Tests: media/modern-media-controls/media-documents/media-document-video-ipad-sizing.html
+               media/modern-media-controls/media-documents/media-document-video-iphone-sizing.html
+
+        * Modules/modern-media-controls/controls/media-document.css: Add a media query to
+        detect small windows.
+        * Modules/modern-media-controls/media/media-document-controller.js:
+
 2019-05-30  Andres Gonzalez  <andresg_22@apple.com>
 
         Inserting a newline in contenteditable causes two characters to be added instead of one
index 3f81cce..2d383f4 100644 (file)
     min-width: 700px !important;
 }
 
+@media (max-width: 699px) {
+    :host(.media-document.video.ipad) {
+        min-width: 100% !important;
+    }
+}
+
 :host(.media-document.video.iphone) {
     width: 100% !important;
 }
index 8bf275d..83b2744 100644 (file)
@@ -39,7 +39,12 @@ class MediaDocumentController
         const media = mediaController.media;
         media.classList.add("media-document");
         media.classList.add("audio");
-        media.classList.add(window.navigator.platform === "MacIntel" ? "mac" : window.navigator.platform);
+
+        let deviceType = window.navigator.platform;
+        if (deviceType == "MacIntel")
+            deviceType = GestureRecognizer.SupportsTouches ? "ipad" : "mac";
+
+        media.classList.add(deviceType);
 
         media.addEventListener("error", this);
         media.addEventListener("play", this);