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
WebKit · Aug 18, 2022 · cbdcbdd4e8f1b5144374bef91ba9e45483f6072f · cbdcbdd
1 parent 3d8b0c6
commit cbdcbdd4e8f1b5144374bef91ba9e45483f6072f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/LayoutTests/css-dark-mode/color-scheme-scrollbar-expected.txt b/LayoutTests/css-dark-mode/color-scheme-scrollbar-expected.txt
@@ -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

diff --git a/LayoutTests/css-dark-mode/color-scheme-scrollbar.html b/LayoutTests/css-dark-mode/color-scheme-scrollbar.html
@@ -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");

diff --git a/Source/WebCore/page/FrameView.cpp b/Source/WebCore/page/FrameView.cpp
@@ -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