Make color-filter affect caret-color
https://bugs.webkit.org/show_bug.cgi?id=185129
rdar://problem/39829066
Reviewed by Tim Horton.
Source/WebCore:
Transform the colors used to compare the caret color with the background through
color-filter (since we want contrasting colors after filters are applied), and
transform caret-color itself.
Test: css3/color-filters/color-filter-caret-color.html
* editing/FrameSelection.cpp:
(WebCore::CaretBase::paintCaret const):
LayoutTests:
* css3/color-filters/color-filter-caret-color-expected.html: Added.
* css3/color-filters/color-filter-caret-color.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@231159 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 7534cf5..e2a2a49 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,14 @@
+2018-04-30 Simon Fraser <simon.fraser@apple.com>
+
+ Make color-filter affect caret-color
+ https://bugs.webkit.org/show_bug.cgi?id=185129
+ rdar://problem/39829066
+
+ Reviewed by Tim Horton.
+
+ * css3/color-filters/color-filter-caret-color-expected.html: Added.
+ * css3/color-filters/color-filter-caret-color.html: Added.
+
2018-04-28 Simon Fraser <simon.fraser@apple.com>
Fix color-filter to apply to SVG colors
diff --git a/LayoutTests/css3/color-filters/color-filter-caret-color-expected.html b/LayoutTests/css3/color-filters/color-filter-caret-color-expected.html
new file mode 100644
index 0000000..4dd384b
--- /dev/null
+++ b/LayoutTests/css3/color-filters/color-filter-caret-color-expected.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: color-filter reference</title>
+ <link rel="author" title="Apple" href="http://www.apple.com/">
+
+ <style>
+ #test-container {
+ height: 50px;
+ width: 50px;
+ overflow: hidden;
+ border: 1px solid black;
+ }
+
+ #test {
+ background-color: white;
+ transform-origin: left top;
+ transform: scale(50, 50);
+ font-size: 10px; /* Needed for the caret to render in Firefox. */
+ caret-color: green;
+ }
+
+ </style>
+ </head>
+ <body>
+ <p>The caret should show as a green flashing square below.</p>
+ <div id="test-container">
+ <div id="test" contenteditable="true">
+ <span> <!-- Needed for the caret to render in Firefox. --></span>
+ </div>
+ </div>
+ <script>
+ document.getElementById("test").focus();
+ window.getSelection().modify("move", "left", "character"); // Place the caret at the start of the <span>.
+ </script>
+ </body>
+</html>
diff --git a/LayoutTests/css3/color-filters/color-filter-caret-color.html b/LayoutTests/css3/color-filters/color-filter-caret-color.html
new file mode 100644
index 0000000..f814dd6
--- /dev/null
+++ b/LayoutTests/css3/color-filters/color-filter-caret-color.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: color-filter affects caret-color</title>
+ <link rel="author" title="Apple" href="http://www.apple.com/">
+ <link rel="match" href="color-filter-caret-color-expected.html">
+
+ <meta name="assert" content="color-filter affects caret-color">
+ <style>
+ #test-container {
+ height: 50px;
+ width: 50px;
+ overflow: hidden;
+ border: 1px solid black;
+ }
+
+ #test {
+ color-filter: invert();
+ background-color: white;
+ transform-origin: left top;
+ transform: scale(50, 50);
+ font-size: 10px; /* Needed for the caret to render in Firefox. */
+ caret-color: rgb(255, 128, 255);
+ }
+
+ </style>
+ </head>
+ <body>
+ <p>The caret should show as a green flashing square below.</p>
+ <div id="test-container">
+ <div id="test" contenteditable="true">
+ <span> <!-- Needed for the caret to render in Firefox. --></span>
+ </div>
+ </div>
+ <script>
+ document.getElementById("test").focus();
+ window.getSelection().modify("move", "left", "character"); // Place the caret at the start of the <span>.
+ </script>
+ </body>
+</html>
diff --git a/LayoutTests/platform/ios/TestExpectations b/LayoutTests/platform/ios/TestExpectations
index f2b6825c..96df023 100644
--- a/LayoutTests/platform/ios/TestExpectations
+++ b/LayoutTests/platform/ios/TestExpectations
@@ -1045,6 +1045,7 @@
fast/css/caret-color-span-inside-editable-parent.html [ Skip ]
fast/css/caret-color.html [ Skip ]
fast/history/visited-link-caret-color.html [ Skip ]
+css3/color-filters/color-filter-caret-color [ Skip ]
# Run webrtc tests on iOS 11
imported/w3c/web-platform-tests/webrtc [ Pass ]
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 94ad207..f5df448 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,20 @@
+2018-04-30 Simon Fraser <simon.fraser@apple.com>
+
+ Make color-filter affect caret-color
+ https://bugs.webkit.org/show_bug.cgi?id=185129
+ rdar://problem/39829066
+
+ Reviewed by Tim Horton.
+
+ Transform the colors used to compare the caret color with the background through
+ color-filter (since we want contrasting colors after filters are applied), and
+ transform caret-color itself.
+
+ Test: css3/color-filters/color-filter-caret-color.html
+
+ * editing/FrameSelection.cpp:
+ (WebCore::CaretBase::paintCaret const):
+
2018-04-30 Michael Catanzaro <mcatanzaro@igalia.com>
[GTK] Webkit should spoof as Safari on a Mac when on Chase.com
diff --git a/Source/WebCore/editing/FrameSelection.cpp b/Source/WebCore/editing/FrameSelection.cpp
index 7f2d779..0683af2 100644
--- a/Source/WebCore/editing/FrameSelection.cpp
+++ b/Source/WebCore/editing/FrameSelection.cpp
@@ -1754,13 +1754,13 @@
auto computeCaretColor = [] (const RenderStyle& elementStyle, const RenderStyle* rootEditableStyle) {
// CSS value "auto" is treated as an invalid color.
if (!elementStyle.caretColor().isValid() && rootEditableStyle) {
- auto rootEditableBackgroundColor = rootEditableStyle->visitedDependentColor(CSSPropertyBackgroundColor);
- auto elementBackgroundColor = elementStyle.visitedDependentColor(CSSPropertyBackgroundColor);
+ auto rootEditableBackgroundColor = rootEditableStyle->visitedDependentColorWithColorFilter(CSSPropertyBackgroundColor);
+ auto elementBackgroundColor = elementStyle.visitedDependentColorWithColorFilter(CSSPropertyBackgroundColor);
auto disappearsIntoBackground = rootEditableBackgroundColor.blend(elementBackgroundColor) == rootEditableBackgroundColor;
if (disappearsIntoBackground)
- return rootEditableStyle->visitedDependentColor(CSSPropertyCaretColor);
+ return rootEditableStyle->visitedDependentColorWithColorFilter(CSSPropertyCaretColor);
}
- return elementStyle.visitedDependentColor(CSSPropertyCaretColor);
+ return elementStyle.visitedDependentColorWithColorFilter(CSSPropertyCaretColor);
};
auto* rootEditableElement = node->rootEditableElement();
auto* rootEditableStyle = rootEditableElement && rootEditableElement->renderer() ? &rootEditableElement->renderer()->style() : nullptr;
