Update prefers-color-scheme media query matching based on GitHub issue #3278.

https://bugs.webkit.org/show_bug.cgi?id=191654
rdar://problem/46074307

Reviewed by Simon Fraser.

Source/WebCore:

Test: css-dark-mode/prefers-color-scheme.html

* css/MediaQueryEvaluator.cpp:
(WebCore::prefersColorSchemeEvaluate): Return true when there is no value. Return false
for `no-preference` since there is no macOS option for no user preference.
* css/MediaQueryExpression.cpp:
(WebCore::isFeatureValidWithoutValue): Added prefers-color-scheme.

LayoutTests:

* css-dark-mode/prefers-color-scheme-expected.txt: Rebaseline.
* css-dark-mode/prefers-color-scheme.html: Updates to better match the spec.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@238200 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index dad2a80..2252ff3 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,14 @@
+2018-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Update prefers-color-scheme media query matching based on GitHub issue #3278.
+        https://bugs.webkit.org/show_bug.cgi?id=191654
+        rdar://problem/46074307
+
+        Reviewed by Simon Fraser.
+
+        * css-dark-mode/prefers-color-scheme-expected.txt: Rebaseline.
+        * css-dark-mode/prefers-color-scheme.html: Updates to better match the spec.
+
 2018-11-14  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Canvas: send a call stack with each action instead of an array of call frames

diff --git a/LayoutTests/css-dark-mode/prefers-color-scheme-expected.txt b/LayoutTests/css-dark-mode/prefers-color-scheme-expected.txt
index 75c2174..02d00be 100644 (file)
--- a/LayoutTests/css-dark-mode/prefers-color-scheme-expected.txt
+++ b/LayoutTests/css-dark-mode/prefers-color-scheme-expected.txt
@@ -1,5 +1,7 @@
 
 PASS Element colors are correct in light color scheme 
+PASS Element colors are correct in light color scheme with boolean context query 
 PASS Dark color scheme enabled 
 PASS Element colors are correct in dark color scheme 
+PASS Element colors are correct in dark color scheme with boolean context query 
 

diff --git a/LayoutTests/css-dark-mode/prefers-color-scheme.html b/LayoutTests/css-dark-mode/prefers-color-scheme.html
index 542cf5e..c2cbe77 100644 (file)
--- a/LayoutTests/css-dark-mode/prefers-color-scheme.html
+++ b/LayoutTests/css-dark-mode/prefers-color-scheme.html
@@ -6,7 +6,7 @@
 <script src="../resources/testharnessreport.js"></script>
 
 <style>
-#test1 {
+div {
     background-color: red;
     color: text;
 }
@@ -23,6 +23,13 @@
     }
 }
 
+@media (prefers-color-scheme: no-preference) {
+    /* This is valid, but should not apply for us since there is no option for no user preference. */
+    #test1 {
+        background-color: cyan;
+    }
+}
+
 @media (prefers-color-scheme: foo) {
     /* This is invalid and should not apply. */
     #test1 {
@@ -31,14 +38,15 @@
 }
 
 @media (prefers-color-scheme) {
-    /* This is invalid and should not apply. */
-    #test1 {
-        background-color: orange;
+    /* This is valid and should always apply for us, since there is always a user preference currently. */
+    #test2 {
+        background-color: lime;
     }
 }
 </style>
 
 <div id="test1"></div>
+<div id="test2"></div>
 
 <script>
 function test_prop(id, prop, expected) {
@@ -54,6 +62,14 @@ test(function() {
 }, "Element colors are correct in light color scheme");
 
 test(function() {
+    // Styled background-color in media query should be lime green.
+    test_prop("test2", "background-color", "rgb(0, 255, 0)");
+
+    // The semantic text color should be black.
+    test_prop("test2", "color", "rgb(0, 0, 0)");
+}, "Element colors are correct in light color scheme with boolean context query");
+
+test(function() {
     if (window.internals)
         internals.settings.setUseDarkAppearance(true);
 }, "Dark color scheme enabled");
@@ -65,4 +81,12 @@ test(function() {
     // The semantic text color should be black, and not change.
     test_prop("test1", "color", "rgb(0, 0, 0)");
 }, "Element colors are correct in dark color scheme");
+
+test(function() {
+    // Styled background-color in media query should be lime green.
+    test_prop("test2", "background-color", "rgb(0, 255, 0)");
+
+    // The semantic text color should be black.
+    test_prop("test2", "color", "rgb(0, 0, 0)");
+}, "Element colors are correct in dark color scheme with boolean context query");
 </script>

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index ef32b42..262e979 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,19 @@
+2018-11-14  Timothy Hatcher  <timothy@apple.com>
+
+        Update prefers-color-scheme media query matching based on GitHub issue #3278.
+        https://bugs.webkit.org/show_bug.cgi?id=191654
+        rdar://problem/46074307
+
+        Reviewed by Simon Fraser.
+
+        Test: css-dark-mode/prefers-color-scheme.html
+
+        * css/MediaQueryEvaluator.cpp:
+        (WebCore::prefersColorSchemeEvaluate): Return true when there is no value. Return false
+        for `no-preference` since there is no macOS option for no user preference.
+        * css/MediaQueryExpression.cpp:
+        (WebCore::isFeatureValidWithoutValue): Added prefers-color-scheme.
+
 2018-11-14  Devin Rousso  <drousso@apple.com>
 
         Web Inspector: Canvas: send a call stack with each action instead of an array of call frames

diff --git a/Source/WebCore/css/MediaQueryEvaluator.cpp b/Source/WebCore/css/MediaQueryEvaluator.cpp
index 29f5046..e959ae6 100644 (file)
--- a/Source/WebCore/css/MediaQueryEvaluator.cpp
+++ b/Source/WebCore/css/MediaQueryEvaluator.cpp
@@ -745,6 +745,9 @@ static bool prefersColorSchemeEvaluate(CSSValue* value, const CSSToLengthConvers
 {
     ASSERT(RuntimeEnabledFeatures::sharedFeatures().darkModeCSSEnabled());
 
+    if (!value)
+        return true;
+
     if (!is<CSSPrimitiveValue>(value))
         return false;
 
@@ -753,7 +756,7 @@ static bool prefersColorSchemeEvaluate(CSSValue* value, const CSSToLengthConvers
 
     switch (keyword) {
     case CSSValueNoPreference:
-        return true;
+        return false;
     case CSSValueDark:
         return useDarkAppearance;
     case CSSValueLight:

diff --git a/Source/WebCore/css/MediaQueryExpression.cpp b/Source/WebCore/css/MediaQueryExpression.cpp
index 92087e4..08be055 100644 (file)
--- a/Source/WebCore/css/MediaQueryExpression.cpp
+++ b/Source/WebCore/css/MediaQueryExpression.cpp
@@ -167,6 +167,9 @@ static inline bool isFeatureValidWithoutValue(const AtomicString& mediaFeature,
         || mediaFeature == MediaFeatureNames::pointer
         || mediaFeature == MediaFeatureNames::prefersReducedMotion
         || (mediaFeature == MediaFeatureNames::prefersDarkInterface && (context.useSystemAppearance || isUASheetBehavior(context.mode)))
+#if ENABLE(DARK_MODE_CSS)
+        || (mediaFeature == MediaFeatureNames::prefersColorScheme && RuntimeEnabledFeatures::sharedFeatures().darkModeCSSEnabled())
+#endif
         || mediaFeature == MediaFeatureNames::devicePixelRatio
         || mediaFeature == MediaFeatureNames::resolution
 #if ENABLE(APPLICATION_MANIFEST)