Skip to content
Permalink
Browse files
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
  • Loading branch information
jernoble committed Aug 25, 2022
1 parent 7cbb5c9 commit 5b6026cbed5508f67d6f3305a2e42e47e1a7aad5
Show file tree
Hide file tree
Showing 9 changed files with 133 additions and 19 deletions.
@@ -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)
)
)
)
)
)
@@ -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)
)
)
)
)
)
)
@@ -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

@@ -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>
@@ -158,7 +158,7 @@ function waitForEventTestAndEnd(element, eventName, testFuncString)
{
waitForEventAndTest(element, eventName, testFuncString, true);
}

var testEnded = false;

function endTest()
@@ -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

@@ -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();
});
@@ -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;
@@ -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;

0 comments on commit 5b6026c

Please sign in to comment.