Skip to content
Permalink
Browse files
color-scheme should not propagate to viewport background if set on <b…
…ody>

https://bugs.webkit.org/show_bug.cgi?id=243757

Reviewed by Simon Fraser.

Change to web compatible behavior where setting the color-scheme on <body> no longer propagates it to <html> tag for scrollbar and
webpage background purposes. This change puts WebKit in-line with Gecko & Blink.

* LayoutTests/css-dark-mode/color-scheme-scrollbar-expected.txt:
* LayoutTests/css-dark-mode/color-scheme-scrollbar.html:
* Source/WebCore/page/FrameView.cpp:
(WebCore::FrameView::rendererForColorScheme const):

Canonical link: https://commits.webkit.org/253565@main
  • Loading branch information
nt1m committed Aug 18, 2022
1 parent 3d8b0c6 commit cbdcbdd4e8f1b5144374bef91ba9e45483f6072f
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 12 deletions.
@@ -1,13 +1,13 @@

PASS Set dark appearance
PASS Set view to transparent
PASS Body Element color scheme is light and dark
PASS Document Element color scheme is auto
PASS Document Element color scheme is light and dark
PASS Body Element color scheme is light and dark (inherited from document element)
PASS Document scrollbar overlay style is light
PASS Document scrollbar is using dark appearance
PASS Element scrollbar overlay style is default
PASS Element scrollbar is using dark appearance
PASS Set color scheme to light on the document element
PASS Set color scheme to light on the document element, but to light/dark on body
PASS Body Element color scheme is light and dark 2
PASS Document Element color scheme is light
PASS Document scrollbar overlay style is default
@@ -4,7 +4,7 @@
<script src="../resources/testharnessreport.js"></script>

<style>
body {
:root {
color-scheme: light dark;
}

@@ -41,12 +41,12 @@
}, "Set view to transparent");

test(function() {
test_prop(document.body, "color-scheme", "light dark");
}, "Body Element color scheme is light and dark");
test_prop(document.documentElement, "color-scheme", "light dark");
}, "Document Element color scheme is light and dark");

test(function() {
test_prop(document.documentElement, "color-scheme", "auto");
}, "Document Element color scheme is auto");
test_prop(document.body, "color-scheme", "light dark");
}, "Body Element color scheme is light and dark (inherited from document element)");

test(function() {
if (!window.internals)
@@ -74,9 +74,9 @@

test(function() {
let styleElement = document.createElement("style");
styleElement.textContent = ":root { color-scheme: light }";
styleElement.textContent = ":root { color-scheme: light } \n body { color-scheme: light dark; }";
document.head.appendChild(styleElement);
}, "Set color scheme to light on the document element");
}, "Set color scheme to light on the document element, but to light/dark on body");

test(function() {
test_prop(document.body, "color-scheme", "light dark");
@@ -2073,8 +2073,7 @@ RenderObject* FrameView::rendererForColorScheme() const
auto* documentElementRenderer = documentElement ? documentElement->renderer() : nullptr;
if (documentElementRenderer && documentElementRenderer->style().hasExplicitlySetColorScheme())
return documentElementRenderer;
auto* bodyElement = document ? document->bodyOrFrameset() : nullptr;
return bodyElement ? bodyElement->renderer() : nullptr;
return nullptr;
}
#endif

0 comments on commit cbdcbdd

Please sign in to comment.