Diff
Modified: trunk/LayoutTests/ChangeLog (281684 => 281685)
--- trunk/LayoutTests/ChangeLog 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/ChangeLog 2021-08-27 04:58:53 UTC (rev 281685)
@@ -1,3 +1,22 @@
+2021-08-26 Joone Hur <[email protected]>
+
+ Caret should respect text background color
+ https://bugs.webkit.org/show_bug.cgi?id=117493
+
+ Reviewed by Ryosuke Niwa.
+
+ Rebaselined caret rendering tests.
+
+ * editing/caret/caret-color.html:
+ * editing/caret/color-span-inside-editable-background-expected.html:
+ * editing/caret/color-span-inside-editable-expected.html:
+ * fast/css/caret-color-auto-expected.html:
+ * platform/ios-wk2/editing/caret/caret-color-expected.png:
+ * platform/ios/editing/caret/caret-color-expected.txt:
+ * platform/mac/editing/caret/caret-color-expected.png:
+ * platform/mac/editing/caret/caret-color-expected.txt:
+ * platform/win/editing/caret/caret-color-expected.txt:
+
2021-08-26 Simon Fraser <[email protected]>
CSS keyframed animations don't respect edges in 4 value background-position
Modified: trunk/LayoutTests/editing/caret/caret-color.html (281684 => 281685)
--- trunk/LayoutTests/editing/caret/caret-color.html 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/editing/caret/caret-color.html 2021-08-27 04:58:53 UTC (rev 281685)
@@ -16,10 +16,10 @@
<title>Editing Test</title>
</head>
<body>
-<p>This tests to make sure that the caret is visible in the black background by getting the caret color from the color of the element(span) containing the text, not the parent element(div) that has the contentEditable attribute.
+<p>This tests to make sure that the caret is visible in the black background by getting the caret color from the color of the element(span) containing the text, not the root editable element(div) that has the contentEditable attribute.
</p>
-<div contenteditable id="root" class="editing">
-<span id="test" style="color: white; background-color: black">Where is my caret?</span>
+<div contenteditable id="root" class="editing" style="background-color: black" >
+<span id="test" style="color: white">Where is my caret?</span>
</div>
<script>
Modified: trunk/LayoutTests/editing/caret/color-span-inside-editable-background-expected.html (281684 => 281685)
--- trunk/LayoutTests/editing/caret/color-span-inside-editable-background-expected.html 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/editing/caret/color-span-inside-editable-background-expected.html 2021-08-27 04:58:53 UTC (rev 281685)
@@ -1,4 +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 style="width: 50px; height: 500px; background-color: red"></div>
</div>
Modified: trunk/LayoutTests/editing/caret/color-span-inside-editable-expected.html (281684 => 281685)
--- trunk/LayoutTests/editing/caret/color-span-inside-editable-expected.html 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/editing/caret/color-span-inside-editable-expected.html 2021-08-27 04:58:53 UTC (rev 281685)
@@ -1,4 +1,4 @@
This test makes sure that carets in content editable divs 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 style="width: 50px; height: 500px; background-color: red"></div>
</div>
Modified: trunk/LayoutTests/fast/css/caret-color-auto-expected.html (281684 => 281685)
--- trunk/LayoutTests/fast/css/caret-color-auto-expected.html 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/fast/css/caret-color-auto-expected.html 2021-08-27 04:58:53 UTC (rev 281685)
@@ -11,7 +11,7 @@
#test {
background-color: white;
color: red;
- caret-color: green;
+ caret-color: red;
transform-origin: left top;
transform: scale(50, 50);
font-size: 10px; /* Needed for the caret to render in Firefox. */
Modified: trunk/LayoutTests/platform/ios/editing/caret/caret-color-expected.txt (281684 => 281685)
--- trunk/LayoutTests/platform/ios/editing/caret/caret-color-expected.txt 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/platform/ios/editing/caret/caret-color-expected.txt 2021-08-27 04:58:53 UTC (rev 281685)
@@ -11,9 +11,9 @@
RenderBlock {P} at (0,0) size 784x40
RenderText {#text} at (0,0) size 754x39
text run at (0,0) width 754: "This tests to make sure that the caret is visible in the black background by getting the caret color from the color of the"
- text run at (0,20) width 638: "element(span) containing the text, not the parent element(div) that has the contentEditable attribute."
- RenderBlock {DIV} at (0,56) size 784x20
- RenderInline {SPAN} at (0,0) size 124x19 [color=#FFFFFF] [bgcolor=#000000]
+ text run at (0,20) width 679: "element(span) containing the text, not the root editable element(div) that has the contentEditable attribute."
+ RenderBlock {DIV} at (0,56) size 784x20 [bgcolor=#000000]
+ RenderInline {SPAN} at (0,0) size 124x19 [color=#FFFFFF]
RenderText {#text} at (0,0) size 124x19
text run at (0,0) width 124: "Where is my caret?"
RenderText {#text} at (0,0) size 0x0
Modified: trunk/LayoutTests/platform/ios-wk2/editing/caret/caret-color-expected.png
(Binary files differ)
Modified: trunk/LayoutTests/platform/mac/editing/caret/caret-color-expected.png
(Binary files differ)
Modified: trunk/LayoutTests/platform/mac/editing/caret/caret-color-expected.txt (281684 => 281685)
--- trunk/LayoutTests/platform/mac/editing/caret/caret-color-expected.txt 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/platform/mac/editing/caret/caret-color-expected.txt 2021-08-27 04:58:53 UTC (rev 281685)
@@ -11,9 +11,9 @@
RenderBlock {P} at (0,0) size 784x36
RenderText {#text} at (0,0) size 754x36
text run at (0,0) width 754: "This tests to make sure that the caret is visible in the black background by getting the caret color from the color of the"
- text run at (0,18) width 638: "element(span) containing the text, not the parent element(div) that has the contentEditable attribute."
- RenderBlock {DIV} at (0,52) size 784x18
- RenderInline {SPAN} at (0,0) size 124x18 [color=#FFFFFF] [bgcolor=#000000]
+ text run at (0,18) width 679: "element(span) containing the text, not the root editable element(div) that has the contentEditable attribute."
+ RenderBlock {DIV} at (0,52) size 784x18 [bgcolor=#000000]
+ RenderInline {SPAN} at (0,0) size 124x18 [color=#FFFFFF]
RenderText {#text} at (0,0) size 124x18
text run at (0,0) width 124: "Where is my caret?"
RenderText {#text} at (0,0) size 0x0
Modified: trunk/LayoutTests/platform/win/editing/caret/caret-color-expected.txt (281684 => 281685)
--- trunk/LayoutTests/platform/win/editing/caret/caret-color-expected.txt 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/LayoutTests/platform/win/editing/caret/caret-color-expected.txt 2021-08-27 04:58:53 UTC (rev 281685)
@@ -1,3 +1,8 @@
+EDITING DELEGATE: shouldBeginEditingInDOMRange:range from 0 of DIV > BODY > HTML > #document to 3 of DIV > BODY > HTML > #document
+EDITING DELEGATE: webViewDidBeginEditing:WebViewDidBeginEditingNotification
+EDITING DELEGATE: webViewDidChangeSelection:WebViewDidChangeSelectionNotification
+EDITING DELEGATE: webViewDidChangeSelection:WebViewDidChangeSelectionNotification
+EDITING DELEGATE: webViewDidChangeSelection:WebViewDidChangeSelectionNotification
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x94
@@ -6,9 +11,9 @@
RenderBlock {P} at (0,0) size 784x36
RenderText {#text} at (0,0) size 735x36
text run at (0,0) width 735: "This tests to make sure that the caret is visible in the black background by getting the caret color from the color of the"
- text run at (0,18) width 621: "element(span) containing the text, not the parent element(div) that has the contentEditable attribute."
- RenderBlock {DIV} at (0,52) size 784x18
- RenderInline {SPAN} at (0,0) size 121x18 [color=#FFFFFF] [bgcolor=#000000]
+ text run at (0,18) width 660: "element(span) containing the text, not the root editable element(div) that has the contentEditable attribute."
+ RenderBlock {DIV} at (0,52) size 784x18 [bgcolor=#000000]
+ RenderInline {SPAN} at (0,0) size 121x18 [color=#FFFFFF]
RenderText {#text} at (0,0) size 121x18
text run at (0,0) width 121: "Where is my caret?"
RenderText {#text} at (0,0) size 0x0
Modified: trunk/Source/WebCore/ChangeLog (281684 => 281685)
--- trunk/Source/WebCore/ChangeLog 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/Source/WebCore/ChangeLog 2021-08-27 04:58:53 UTC (rev 281685)
@@ -1,3 +1,20 @@
+2021-08-26 Joone Hur <[email protected]>
+
+ Caret should respect text background color
+ https://bugs.webkit.org/show_bug.cgi?id=117493
+
+ Reviewed by Ryosuke Niwa.
+
+ An earlier fix for caret color, which we are now improving, was this commit:
+ https://trac.webkit.org/changeset/152612/webkit
+
+ This patch allows the caret to become visible in the black background
+ by getting the caret color from the element containing
+ the text, not the root editable element that has the contentEditable attribute.
+
+ * editing/FrameSelection.cpp:
+ (WebCore::CaretBase::computeCaretColor):
+
2021-08-26 Simon Fraser <[email protected]>
CSS keyframed animations don't respect edges in 4 value background-position
Modified: trunk/Source/WebCore/editing/FrameSelection.cpp (281684 => 281685)
--- trunk/Source/WebCore/editing/FrameSelection.cpp 2021-08-27 04:26:35 UTC (rev 281684)
+++ trunk/Source/WebCore/editing/FrameSelection.cpp 2021-08-27 04:58:53 UTC (rev 281685)
@@ -1790,15 +1790,15 @@
UNUSED_PARAM(node);
return elementStyle.caretColor();
#else
- auto* rootEditableElement = node ? node->rootEditableElement() : nullptr;
- auto* rootEditableStyle = rootEditableElement && rootEditableElement->renderer() ? &rootEditableElement->renderer()->style() : nullptr;
+ RefPtr parentElement = node ? node->parentElement() : nullptr;
+ auto* parentStyle = parentElement && parentElement->renderer() ? &parentElement->renderer()->style() : nullptr;
// CSS value "auto" is treated as an invalid color.
- if (!elementStyle.caretColor().isValid() && rootEditableStyle) {
- auto rootEditableBackgroundColor = rootEditableStyle->visitedDependentColorWithColorFilter(CSSPropertyBackgroundColor);
+ if (!elementStyle.caretColor().isValid() && parentStyle) {
+ auto parentBackgroundColor = parentStyle->visitedDependentColorWithColorFilter(CSSPropertyBackgroundColor);
auto elementBackgroundColor = elementStyle.visitedDependentColorWithColorFilter(CSSPropertyBackgroundColor);
- auto disappearsIntoBackground = blendSourceOver(rootEditableBackgroundColor, elementBackgroundColor) == rootEditableBackgroundColor;
+ auto disappearsIntoBackground = blendSourceOver(parentBackgroundColor, elementBackgroundColor) == parentBackgroundColor;
if (disappearsIntoBackground)
- return rootEditableStyle->visitedDependentColorWithColorFilter(CSSPropertyCaretColor);
+ return parentStyle->visitedDependentColorWithColorFilter(CSSPropertyCaretColor);
}
return elementStyle.visitedDependentColorWithColorFilter(CSSPropertyCaretColor);
#endif
