Carets in GMail and iCloud compositions are the foreground text color

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

Reviewed by Simon Fraser.

Source/WebCore:

Previously, we were only checking whether the background colors of the foreground and background
elements were the same, rather than taking validity and opacity into consideration.

Test: editing/caret/color-span-inside-editable-background.html

* editing/FrameSelection.cpp:
(WebCore::disappearsIntoBackground):
(WebCore::CaretBase::paintCaret):

LayoutTests:

Test the case where the content editable root has a background color specified.

* editing/caret/color-span-inside-editable-background-expected.html: Added.
* editing/caret/color-span-inside-editable-background.html: Added.

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index e6d86e34f45d8f54f6a0c92ab4cdc4485678a74f..aeafa4dda10750f79484b02896b8b70285b061af 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2014-10-23  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        Carets in GMail and iCloud compositions are the foreground text color
+        https://bugs.webkit.org/show_bug.cgi?id=138029
+
+        Reviewed by Simon Fraser.
+
+        Test the case where the content editable root has a background color specified.
+
+        * editing/caret/color-span-inside-editable-background-expected.html: Added.
+        * editing/caret/color-span-inside-editable-background.html: Added.
+
 2014-10-23  Roger Fong  <roger_fong@apple.com>
 
         [Windows] Unreviewed gardening after removing SafariTheme.

diff --git a/LayoutTests/editing/caret/color-span-inside-editable-background-expected.html b/LayoutTests/editing/caret/color-span-inside-editable-background-expected.html
new file mode 100644 (file)
index 0000000..9a1f5b1
--- /dev/null
+++ b/LayoutTests/editing/caret/color-span-inside-editable-background-expected.html
@@ -0,0 +1,4 @@
+This test makes sure that carets in content editable divs with a background color specified remain black even if there is a span inside them with a foreground color specified.
+<div style="width: 505px; height: 505px; overflow: hidden;">
+<div style="width: 50px; height: 500px; background-color: black"></div>
+</div>

diff --git a/LayoutTests/editing/caret/color-span-inside-editable-background.html b/LayoutTests/editing/caret/color-span-inside-editable-background.html
new file mode 100644 (file)
index 0000000..bd332f2
--- /dev/null
+++ b/LayoutTests/editing/caret/color-span-inside-editable-background.html
@@ -0,0 +1,8 @@
+This test makes sure that carets in content editable divs with a background color specified remain black even if there is a span inside them with a foreground color specified.
+<div style="width: 505px; height: 505px; overflow: hidden;">
+<div id="edit" contenteditable="true" style="background: #fff; -webkit-transform-origin: left top; -webkit-transform: scale(50, 50); outline: none; font-family: Ahem; font-size: 10px;"><span id="spn" style="color: red;">&nbsp;&nbsp;</span></div>
+</div>
+<script>
+var edit = document.getElementById("edit");
+edit.focus();
+</script>

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 6ac4963434cec579a94a16d8f0e8aa8158e844d3..0bcdf4a9c9b082d6aa7a8a585e36dc6a7df6e16e 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,19 @@
+2014-10-23  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        Carets in GMail and iCloud compositions are the foreground text color
+        https://bugs.webkit.org/show_bug.cgi?id=138029
+
+        Reviewed by Simon Fraser.
+
+        Previously, we were only checking whether the background colors of the foreground and background
+        elements were the same, rather than taking validity and opacity into consideration.
+
+        Test: editing/caret/color-span-inside-editable-background.html
+
+        * editing/FrameSelection.cpp:
+        (WebCore::disappearsIntoBackground):
+        (WebCore::CaretBase::paintCaret):
+
 2014-10-23  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Provide a way to have alternate inspector agents

diff --git a/Source/WebCore/editing/FrameSelection.cpp b/Source/WebCore/editing/FrameSelection.cpp
index 80a06f903fe3331ef3380bb092f59fdae53a310d..d9f4d5cb11c1d3a651481aba672e66411b064b5c 100644 (file)
--- a/Source/WebCore/editing/FrameSelection.cpp
+++ b/Source/WebCore/editing/FrameSelection.cpp
@@ -1474,6 +1474,11 @@ void FrameSelection::paintCaret(GraphicsContext* context, const LayoutPoint& pai
         CaretBase::paintCaret(m_selection.start().deprecatedNode(), context, paintOffset, clipRect);
 }
 
+static inline bool disappearsIntoBackground(Color foreground, Color background)
+{
+    return background.blend(foreground) == background;
+}
+
 void CaretBase::paintCaret(Node* node, GraphicsContext* context, const LayoutPoint& paintOffset, const LayoutRect& clipRect) const
 {
 #if ENABLE(TEXT_CARET)
@@ -1499,9 +1504,11 @@ void CaretBase::paintCaret(Node* node, GraphicsContext* context, const LayoutPoi
         if (rootEditableElement && rootEditableElement->renderer()) {
             const auto& rootEditableStyle = rootEditableElement->renderer()->style();
             const auto& elementStyle = element->renderer()->style();
-            if (rootEditableStyle.visitedDependentColor(CSSPropertyBackgroundColor) == elementStyle.visitedDependentColor(CSSPropertyBackgroundColor)) {
-                caretColor = rootEditableElement->renderer()->style().visitedDependentColor(CSSPropertyColor);
-                colorSpace = rootEditableElement->renderer()->style().colorSpace();
+            auto rootEditableBGColor = rootEditableStyle.visitedDependentColor(CSSPropertyBackgroundColor);
+            auto elementBGColor = elementStyle.visitedDependentColor(CSSPropertyBackgroundColor);
+            if (disappearsIntoBackground(elementBGColor, rootEditableBGColor)) {
+                caretColor = rootEditableStyle.visitedDependentColor(CSSPropertyColor);
+                colorSpace = rootEditableStyle.colorSpace();
                 setToRootEditableElement = true;
             }
         }