Input form controls have a white background in dark mode, when they should not.
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 13 Jun 2018 20:26:32 +0000 (20:26 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 13 Jun 2018 20:26:32 +0000 (20:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=186577
rdar://problem/39258325

Reviewed by Tim Horton.

Source/WebCore:

* DerivedSources.make: Allow WTF_PLATFORM_MAC ifdefs to preprocess in html.css.
* css/CSSValueKeywords.in: Added -apple-system-control-background.
* css/MediaQueryExpression.cpp:
(WebCore::featureWithValidIdent): Allow dark mode media query in user agent stylesheets.
(WebCore::isFeatureValidWithoutValue): Ditto.
* css/MediaQueryParserContext.cpp:
(WebCore::MediaQueryParserContext::MediaQueryParserContext): Transfer the CSSParserMode from CSSParserContext.
* css/MediaQueryParserContext.h:
* css/html.css: Set color and background-color to semantic colors for input, textarea, and select.
Make input background-color transparent in dark mode to match AppKit.
* rendering/RenderThemeMac.mm:
(WebCore::RenderThemeMac::systemColor const): Added -apple-system-control-background.
(WebCore::RenderThemeMac::paintTextField): Adjust the drawing rect to match new artwork in macOS 10.14.

LayoutTests:

* fast/css/apple-system-control-colors-expected.txt: Updated.
* fast/css/apple-system-control-colors.html: Added -apple-system-control-background.
* platform/gtk/fast/css/apple-system-control-colors-expected.txt: Updated.

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

12 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/apple-system-control-colors-expected.txt
LayoutTests/fast/css/apple-system-control-colors.html
LayoutTests/platform/gtk/fast/css/apple-system-control-colors-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/DerivedSources.make
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/MediaQueryExpression.cpp
Source/WebCore/css/MediaQueryParserContext.cpp
Source/WebCore/css/MediaQueryParserContext.h
Source/WebCore/css/html.css
Source/WebCore/rendering/RenderThemeMac.mm

index 9fde60e..c04c60a 100644 (file)
@@ -1,3 +1,16 @@
+2018-06-13  Timothy Hatcher  <timothy@apple.com>
+
+        Input form controls have a white background in dark mode, when they should not.
+
+        https://bugs.webkit.org/show_bug.cgi?id=186577
+        rdar://problem/39258325
+
+        Reviewed by Tim Horton.
+
+        * fast/css/apple-system-control-colors-expected.txt: Updated.
+        * fast/css/apple-system-control-colors.html: Added -apple-system-control-background.
+        * platform/gtk/fast/css/apple-system-control-colors-expected.txt: Updated.
+
 2018-06-13  John Wilander  <wilander@apple.com>
 
         Add console logging to test case to help investigate flaky timeouts
index 6062db0..6ebee22 100644 (file)
@@ -1,5 +1,6 @@
 -apple-system-header-text : rgba(0, 0, 0, 0.85098)
 -apple-system-text-background : rgb(255, 255, 255)
+-apple-system-control-background : rgb(255, 255, 255)
 -apple-system-alternate-selected-text : rgb(255, 255, 255)
 -apple-system-label : rgba(0, 0, 0, 0.85098)
 -apple-system-secondary-label : rgba(0, 0, 0, 0.498039)
index d72c3cf..1a06fbe 100644 (file)
@@ -23,6 +23,7 @@
 </style>
 <div><span class="swatch" style="background-color: -apple-system-header-text"></span>-apple-system-header-text</div>
 <div><span class="swatch" style="background-color: -apple-system-text-background"></span>-apple-system-text-background</div>
+<div><span class="swatch" style="background-color: -apple-system-control-background"></span>-apple-system-control-background</div>
 <div><span class="swatch" style="background-color: -apple-system-alternate-selected-text"></span>-apple-system-alternate-selected-text</div>
 <div><span class="swatch" style="background-color: -apple-system-label"></span>-apple-system-label</div>
 <div><span class="swatch" style="background-color: -apple-system-secondary-label"></span>-apple-system-secondary-label</div>
index 9ffe4d7..71763fd 100644 (file)
@@ -1,5 +1,6 @@
 -apple-system-header-text : rgba(0, 0, 0, 0)
 -apple-system-text-background : rgba(0, 0, 0, 0)
+-apple-system-control-background : rgba(0, 0, 0, 0)
 -apple-system-alternate-selected-text : rgba(0, 0, 0, 0)
 -apple-system-label : rgba(0, 0, 0, 0)
 -apple-system-secondary-label : rgba(0, 0, 0, 0)
index 2a9a325..a57ca2a 100644 (file)
@@ -1,3 +1,26 @@
+2018-06-13  Timothy Hatcher  <timothy@apple.com>
+
+        Input form controls have a white background in dark mode, when they should not.
+
+        https://bugs.webkit.org/show_bug.cgi?id=186577
+        rdar://problem/39258325
+
+        Reviewed by Tim Horton.
+
+        * DerivedSources.make: Allow WTF_PLATFORM_MAC ifdefs to preprocess in html.css.
+        * css/CSSValueKeywords.in: Added -apple-system-control-background.
+        * css/MediaQueryExpression.cpp:
+        (WebCore::featureWithValidIdent): Allow dark mode media query in user agent stylesheets.
+        (WebCore::isFeatureValidWithoutValue): Ditto.
+        * css/MediaQueryParserContext.cpp:
+        (WebCore::MediaQueryParserContext::MediaQueryParserContext): Transfer the CSSParserMode from CSSParserContext.
+        * css/MediaQueryParserContext.h:
+        * css/html.css: Set color and background-color to semantic colors for input, textarea, and select.
+        Make input background-color transparent in dark mode to match AppKit.
+        * rendering/RenderThemeMac.mm:
+        (WebCore::RenderThemeMac::systemColor const): Added -apple-system-control-background.
+        (WebCore::RenderThemeMac::paintTextField): Adjust the drawing rect to match new artwork in macOS 10.14.
+
 2018-06-13  Said Abou-Hallawa  <sabouhallawa@apple.com>
 
         TileFirstPaint strategy for async image decoding should be disabled for non root RenderLayers
index 262e0c7..cddfdcd 100644 (file)
@@ -1023,6 +1023,12 @@ else
     WTF_PLATFORM_IOS = 0
 endif
 
+ifeq ($(shell $(CC) -std=gnu++17 -x c++ -E -P -dM $(SDK_FLAGS) $(TARGET_TRIPLE_FLAGS) $(FRAMEWORK_FLAGS) $(HEADER_FLAGS) -include "wtf/Platform.h" /dev/null | grep ' WTF_PLATFORM_MAC ' | cut -d' ' -f3), 1)
+    WTF_PLATFORM_MAC = 1
+else
+    WTF_PLATFORM_MAC = 0
+endif
+
 ifeq ($(shell $(CC) -std=gnu++17 -x c++ -E -P -dM $(SDK_FLAGS) $(TARGET_TRIPLE_FLAGS) $(FRAMEWORK_FLAGS) $(HEADER_FLAGS) -include "wtf/Platform.h" /dev/null | grep USE_APPLE_INTERNAL_SDK | cut -d' ' -f3), 1)
     USE_APPLE_INTERNAL_SDK = 1
 else
@@ -1035,6 +1041,8 @@ endif
 
 ifeq ($(WTF_PLATFORM_IOS), 1)
 FEATURE_AND_PLATFORM_DEFINES = $(FEATURE_DEFINES) WTF_PLATFORM_IOS
+else ifeq ($(WTF_PLATFORM_MAC), 1)
+FEATURE_AND_PLATFORM_DEFINES = $(FEATURE_DEFINES) WTF_PLATFORM_MAC
 else
 FEATURE_AND_PLATFORM_DEFINES = $(FEATURE_DEFINES)
 endif
index d458562..69359fc 100644 (file)
@@ -224,6 +224,7 @@ windowframe
 windowtext
 -apple-system-header-text
 -apple-system-text-background
+-apple-system-control-background
 -apple-system-alternate-selected-text
 -apple-system-label
 -apple-system-secondary-label
index d553392..617cb6a 100644 (file)
@@ -54,7 +54,7 @@ static inline bool featureWithValidIdent(const AtomicString& mediaFeature, const
     || mediaFeature == MediaFeatureNames::displayMode
 #endif
     || mediaFeature == MediaFeatureNames::prefersReducedMotion
-    || (mediaFeature == MediaFeatureNames::prefersDarkInterface && context.useSystemAppearance);
+    || (mediaFeature == MediaFeatureNames::prefersDarkInterface && (context.useSystemAppearance || isUASheetBehavior(context.mode)));
 }
 
 static inline bool featureWithValidDensity(const String& mediaFeature, const CSSPrimitiveValue& value)
@@ -162,7 +162,7 @@ static inline bool isFeatureValidWithoutValue(const AtomicString& mediaFeature,
         || mediaFeature == MediaFeatureNames::invertedColors
         || mediaFeature == MediaFeatureNames::pointer
         || mediaFeature == MediaFeatureNames::prefersReducedMotion
-        || (mediaFeature == MediaFeatureNames::prefersDarkInterface && context.useSystemAppearance)
+        || (mediaFeature == MediaFeatureNames::prefersDarkInterface && (context.useSystemAppearance || isUASheetBehavior(context.mode)))
         || mediaFeature == MediaFeatureNames::devicePixelRatio
         || mediaFeature == MediaFeatureNames::resolution
 #if ENABLE(APPLICATION_MANIFEST)
index 7f7366e..6d110b4 100644 (file)
@@ -26,7 +26,6 @@
 #include "config.h"
 #include "MediaQueryParserContext.h"
 
-#include "CSSParserMode.h"
 #include "Document.h"
 #include "Page.h"
 
@@ -35,11 +34,12 @@ namespace WebCore {
 MediaQueryParserContext::MediaQueryParserContext(const CSSParserContext& context)
 {
     useSystemAppearance = context.useSystemAppearance;
+    mode = context.mode;
 }
 
 MediaQueryParserContext::MediaQueryParserContext(const Document& document)
 {
     useSystemAppearance = document.page() ? document.page()->useSystemAppearance() : false;
 }
-    
+
 } // namespace WebCore
index 0b03bf5..1bfbcde 100644 (file)
@@ -25,6 +25,8 @@
 
 #pragma once
 
+#include "CSSParserMode.h"
+
 namespace WebCore {
     
 class Document;
@@ -35,8 +37,9 @@ public:
     MediaQueryParserContext() { }
     MediaQueryParserContext(const CSSParserContext&);
     WEBCORE_EXPORT MediaQueryParserContext(const Document&);
-    
+
     bool useSystemAppearance { false };
+    CSSParserMode mode { HTMLStandardMode };
 };
     
 } // namespace WebCore
index 3d4607a..6a7e49e 100644 (file)
@@ -384,7 +384,12 @@ input[type="range"],
 input,
 input:matches([type="password"], [type="search"]) {
     -webkit-appearance: textfield;
+#if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
+    color: text;
+    background-color: -apple-system-control-background;
+#else
     background-color: white;
+#endif
 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
     border-radius: 5px;
     font: 11px Helvetica, -webkit-pictograph;
@@ -399,6 +404,15 @@ input:matches([type="password"], [type="search"]) {
     cursor: auto;
 }
 
+#if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
+@media (prefers-dark-interface) {
+    input,
+    input:matches([type="password"], [type="search"]) {
+        background-color: transparent;
+    }
+}
+#endif
+
 input[type="search"] {
     -webkit-appearance: searchfield;
     box-sizing: border-box;
@@ -613,7 +627,12 @@ keygen::-webkit-keygen-select {
 textarea {
     -webkit-appearance: textarea;
 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
+#if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
+    color: text;
+    background-color: -apple-system-control-background;
+#else
     background-color: white;
+#endif
     border: 1px solid;
     -webkit-rtl-ordering: logical;
     -webkit-user-select: text;
@@ -899,9 +918,14 @@ select {
 #else
     -webkit-appearance: menulist;
     border: 1px solid;
+#if defined(WTF_PLATFORM_MAC) && WTF_PLATFORM_MAC
+    color: text;
+    background-color: -apple-system-control-background;
+#else
     color: black;
     background-color: white;
 #endif
+#endif
     align-items: center;
     white-space: pre;
     -webkit-rtl-ordering: logical;
index a2e3ce7..8295887 100644 (file)
@@ -570,6 +570,8 @@ Color RenderThemeMac::systemColor(CSSValueID cssValueID, OptionSet<StyleColor::O
                 return @selector(headerTextColor);
             case CSSValueAppleSystemTextBackground:
                 return @selector(textBackgroundColor);
+            case CSSValueAppleSystemControlBackground:
+                return @selector(controlBackgroundColor);
             case CSSValueAppleSystemAlternateSelectedText:
                 return @selector(alternateSelectedControlTextColor);
             case CSSValueAppleSystemLabel:
@@ -867,7 +869,12 @@ bool RenderThemeMac::paintTextField(const RenderObject& o, const PaintInfo& pain
     AffineTransform transform = paintInfo.context().getCTM();
     if (transform.xScale() > 1 || transform.yScale() > 1) {
         adjustedPaintRect.inflateX(1 / transform.xScale());
+#if __MAC_OS_X_VERSION_MIN_REQUIRED >= 101400
+        adjustedPaintRect.inflateY(2 / transform.yScale());
+        adjustedPaintRect.move(0, -1 / transform.yScale());
+#else
         adjustedPaintRect.inflateY(1 / transform.yScale());
+#endif
     }
     NSTextFieldCell *textField = this->textField();