Skip to content
Permalink
Browse files
Stop adjusting position to absolute for root element in fullscreen
https://bugs.webkit.org/show_bug.cgi?id=249404
rdar://103313030

Reviewed by Alan Baradlay.

Other browsers do not adjust the position to absolute for the root element (tested by applying inset properties).
The adjustment in WebKit causes the root to collapse, which is an unwanted side-effect.

* LayoutTests/imported/w3c/web-platform-tests/fullscreen/rendering/fullscreen-root-fills-page-expected.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/fullscreen/rendering/fullscreen-root-fills-page-ref.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/fullscreen/rendering/fullscreen-root-fills-page.html: Added.
* Source/WebCore/style/StyleAdjuster.cpp:
(WebCore::Style::Adjuster::adjust const):

Canonical link: https://commits.webkit.org/257946@main
  • Loading branch information
nt1m committed Dec 15, 2022
1 parent 0d87218 commit 9dcd18cf6f84a66fe763ab00f04fd0571f98ec6e
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 1 deletion.
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

body {
background-color: green;
}
</style>
</head>

<body>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script>
document.addEventListener("fullscreenchange", () => {
document.documentElement.classList.remove("reftest-wait");
});
test_driver.bless("fullscreen")
.then(() => document.documentElement.requestFullscreen())
</script>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

body {
background-color: green;
}
</style>
</head>

<body>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script>
document.addEventListener("fullscreenchange", () => {
document.documentElement.classList.remove("reftest-wait");
});
test_driver.bless("fullscreen")
.then(() => document.documentElement.requestFullscreen())
</script>
</body>
</html>
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<link rel="author" href="https://github.com/nt1m">
<link rel="match" href="fullscreen-root-fills-page-ref.html">
<style>
html {
background-color: red;
height: 100%;
overflow: hidden;

/* These should be no-op */
top: 200px;
left: 200px;
right: 200px;
bottom: 200px;
}

html, body {
margin: 0;
padding: 0;
}

body, #cover {
height: 100%;
width: 100%;
}

#cover {
background-color: green;
}
</style>
</head>

<body>
<div id="cover"></div>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script>
document.addEventListener("fullscreenchange", () => {
document.documentElement.classList.remove("reftest-wait");
});
test_driver.bless("fullscreen")
.then(() => document.documentElement.requestFullscreen())
</script>
</body>
</html>
@@ -306,7 +306,7 @@ void Adjuster::adjust(RenderStyle& style, const RenderStyle* userAgentAppearance

// Top layer elements are always position: absolute; unless the position is set to fixed.
// https://fullscreen.spec.whatwg.org/#new-stacking-layer
if (style.position() != PositionType::Absolute && style.position() != PositionType::Fixed && isInTopLayerOrBackdrop(style, m_element))
if (m_element != m_document.documentElement() && style.position() != PositionType::Absolute && style.position() != PositionType::Fixed && isInTopLayerOrBackdrop(style, m_element))
style.setPosition(PositionType::Absolute);

// Absolute/fixed positioned elements, floating elements and the document element need block-like outside display.

0 comments on commit 9dcd18c

Please sign in to comment.