gamespot.com shows a smaller video when entering full screen

https://bugs.webkit.org/show_bug.cgi?id=244256 <rdar://98754870> Reviewed by Eric Carlson. When Gamespot.com videos enter fullscreen, they have a rule with a max-width: property set on their fullscreen element, that prevents the element from being resized to occupy the entire screen. Adopt CSS from the current Fullscreen API specification for the fullscreen element, including an explicit and !important min, max, and explicit width and height. * LayoutTests/fullscreen/full-screen-min-max-width-height-expected.txt: Added. * LayoutTests/fullscreen/full-screen-min-max-width-height.html: Added. * LayoutTests/fullscreen/full-screen-test.js: (waitFor): * Source/WebCore/css/fullscreen.css: Canonical link: https://commits.webkit.org/253790@main
WebKit · Aug 25, 2022 · 5b6026c · 5b6026c
1 parent 7cbb5c9
commit 5b6026c
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 19 deletions.
diff --git a/LayoutTests/compositing/no-compositing-when-fulll-screen-is-present-expected.txt b/LayoutTests/compositing/no-compositing-when-fulll-screen-is-present-expected.txt
@@ -6,8 +6,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 PASS successfullyParsed is true
 
 TEST COMPLETE
-full screen content
-foobar
+full screen contentfoobar
 foobar
 (GraphicsLayer
   (anchor 0.00 0.00)
@@ -30,8 +29,15 @@ foobar
             )
             (GraphicsLayer
               (bounds 800.00 600.00)
-              (drawsContent 1)
               (backingStoreAttached 1)
+              (children 1
+                (GraphicsLayer
+                  (bounds 800.00 600.00)
+                  (contentsOpaque 1)
+                  (drawsContent 1)
+                  (backingStoreAttached 1)
+                )
+              )
             )
           )
         )

diff --git a/LayoutTests/fullscreen/full-screen-layer-dump-expected.txt b/LayoutTests/fullscreen/full-screen-layer-dump-expected.txt
@@ -19,7 +19,16 @@
             )
             (GraphicsLayer
               (bounds 800.00 600.00)
-              (drawsContent 1)
+              (children 1
+                (GraphicsLayer
+                  (bounds 800.00 600.00)
+                  (contentsOpaque 1)
+                  (contents layer (background color)
+                    (position 0.00 0.00)
+                    (bounds 800.00 600.00)
+                  )
+                )
+              )
             )
           )
         )

diff --git a/LayoutTests/fullscreen/full-screen-min-max-width-height-expected.txt b/LayoutTests/fullscreen/full-screen-min-max-width-height-expected.txt
@@ -0,0 +1,17 @@
+Testing with explicit width and height
+EVENT(webkitfullscreenchange)
+EXPECTED (target.clientWidth === document.documentElement.clientWidth == 'true') OK
+EXPECTED (target.clientHeight === document.documentElement.clientHeight == 'true') OK
+EVENT(webkitfullscreenchange)
+Testing with max-width and max-height
+EVENT(webkitfullscreenchange)
+EXPECTED (target.clientWidth === document.documentElement.clientWidth == 'true') OK
+EXPECTED (target.clientHeight === document.documentElement.clientHeight == 'true') OK
+EVENT(webkitfullscreenchange)
+Testing with min-width and min-height
+EVENT(webkitfullscreenchange)
+EXPECTED (target.clientWidth === document.documentElement.clientWidth == 'true') OK
+EXPECTED (target.clientHeight === document.documentElement.clientHeight == 'true') OK
+EVENT(webkitfullscreenchange)
+END OF TEST
+
diff --git a/LayoutTests/fullscreen/full-screen-min-max-width-height.html b/LayoutTests/fullscreen/full-screen-min-max-width-height.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<style>
+    .explicit-width-height {
+        height: 400px;
+        width: 400px;
+    }
+
+    .max-width-height {
+        max-height: 400px;
+        max-width: 400px;
+    }
+
+
+    .min-width-height {
+        min-height: 400px;
+        min-width: 400px;
+    }
+</style>
+</head>
+<script src="full-screen-test.js"></script>
+<script>
+window.addEventListener('load', async event => {
+    target = document.getElementById('target');
+
+    consoleWrite('Testing with explicit width and height');
+    target.className = 'explicit-width-height';
+    runWithKeyDown(() => { target.webkitRequestFullscreen(); })
+    await waitFor(document, 'webkitfullscreenchange');
+
+    testExpected('target.clientWidth === document.documentElement.clientWidth', true);
+    testExpected('target.clientHeight === document.documentElement.clientHeight', true);
+
+    runWithKeyDown(() => { document.webkitExitFullscreen(); });
+    await waitFor(document, 'webkitfullscreenchange');
+
+    consoleWrite('Testing with max-width and max-height');
+    target.className = 'max-width-height';
+    runWithKeyDown(() => { target.webkitRequestFullscreen(); })
+    await waitFor(document, 'webkitfullscreenchange');
+
+    testExpected('target.clientWidth === document.documentElement.clientWidth', true);
+    testExpected('target.clientHeight === document.documentElement.clientHeight', true);
+
+    runWithKeyDown(() => { document.webkitExitFullscreen(); });
+    await waitFor(document, 'webkitfullscreenchange');
+
+    consoleWrite('Testing with min-width and min-height');
+    target.className = 'min-width-height';
+    runWithKeyDown(() => { target.webkitRequestFullscreen(); })
+    await waitFor(document, 'webkitfullscreenchange');
+
+    testExpected('target.clientWidth === document.documentElement.clientWidth', true);
+    testExpected('target.clientHeight === document.documentElement.clientHeight', true);
+
+    runWithKeyDown(() => { document.webkitExitFullscreen(); });
+    await waitFor(document, 'webkitfullscreenchange');
+
+    endTest();
+});
+</script>
+<body>
+    <div id="target"></div>
+</body>
+</html>
diff --git a/LayoutTests/fullscreen/full-screen-test.js b/LayoutTests/fullscreen/full-screen-test.js
@@ -158,7 +158,7 @@ function waitForEventTestAndEnd(element, eventName, testFuncString)
 {
     waitForEventAndTest(element, eventName, testFuncString, true);
 }
-  
+
 var testEnded = false;
 
 function endTest()

diff --git a/LayoutTests/fullscreen/fullscreen-user-agent-style-expected.txt b/LayoutTests/fullscreen/fullscreen-user-agent-style-expected.txt
@@ -1,12 +1,12 @@
-EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('width') == 'auto') OK
-EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('height') == 'auto') OK
+EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('bottom') == 'auto') OK
+EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('right') == 'auto') OK
 RUN(span.webkitRequestFullscreen())
 EVENT(webkitfullscreenchange)
-EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('width') == '100%') OK
-EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('height') == '100%') OK
+EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('bottom') == '0px') OK
+EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('right') == '0px') OK
 RUN(document.webkitExitFullscreen())
 EVENT(webkitfullscreenchange)
-EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('width') == 'auto') OK
-EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('height') == 'auto') OK
+EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('bottom') == 'auto') OK
+EXPECTED (document.defaultView.getComputedStyle(span, null).getPropertyValue('right') == 'auto') OK
 END OF TEST
 
diff --git a/LayoutTests/fullscreen/fullscreen-user-agent-style.html b/LayoutTests/fullscreen/fullscreen-user-agent-style.html
@@ -7,20 +7,20 @@
         window.addEventListener('load', async event => {
             window.span = document.querySelector('span');
 
-            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('width')", "auto");
-            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('height')", "auto");
+            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('bottom')", "auto");
+            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('right')", "auto");
 
             runWithKeyDown(() => { run("span.webkitRequestFullscreen()") });
             await waitFor(span, 'webkitfullscreenchange');
 
-            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('width')", "100%");
-            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('height')", "100%");
+            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('bottom')", "0px");
+            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('right')", "0px");
 
             runWithKeyDown(() => { run("document.webkitExitFullscreen()") });
             await waitFor(span, 'webkitfullscreenchange');
 
-            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('width')", "auto");
-            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('height')", "auto");
+            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('bottom')", "auto");
+            testExpected("document.defaultView.getComputedStyle(span, null).getPropertyValue('right')", "auto");
 
             endTest();
         });

diff --git a/Source/WebCore/css/fullscreen.css b/Source/WebCore/css/fullscreen.css
@@ -24,6 +24,23 @@
 
 #if defined(ENABLE_FULLSCREEN_API) && ENABLE_FULLSCREEN_API
 
+:not(:root):-webkit-full-screen {
+  position:fixed !important;
+  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
+  margin:0 !important;
+  box-sizing:border-box !important;
+  min-width:0 !important;
+  max-width:none !important;
+  min-height:0 !important;
+  max-height:none !important;
+  width:100% !important;
+  height:100% !important;
+  transform:none !important;
+
+  /* intentionally not !important */
+  object-fit:contain;
+}
+
 :-webkit-full-screen {
     background-color: white;
     z-index: 2147483647 !important;

diff --git a/Tools/TestWebKitAPI/Tests/mac/FullscreenZoomInitialFrame.mm b/Tools/TestWebKitAPI/Tests/mac/FullscreenZoomInitialFrame.mm
@@ -175,8 +175,8 @@ static void runJavaScriptAlert(WKPageRef page, WKStringRef alertText, WKFrameRef
 
     EXPECT_EQ(300, initialFrame.size.width);
     EXPECT_EQ(300, initialFrame.size.height);
-    EXPECT_EQ(400, finalFrame.size.width);
-    EXPECT_EQ(400, finalFrame.size.height);
+    EXPECT_EQ(view.bounds.size.width, finalFrame.size.width);
+    EXPECT_EQ(view.bounds.size.height, finalFrame.size.height);
 
     isWaitingForPageSignalToContinue = true;
     didGetPageSignalToContinue = false;