Fix the composition underline to be transformed by -apple-color-filter
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jun 2018 01:52:59 +0000 (01:52 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 25 Jun 2018 01:52:59 +0000 (01:52 +0000)
https://bugs.webkit.org/show_bug.cgi?id=186983
rdar://problem/40515558

Reviewed by Zalan Bujtas.

Source/WebCore:

Transform the composition underline color with the color filter.

Test: css3/color-filters/color-filter-composition-underline-color.html

* rendering/InlineTextBox.cpp:
(WebCore::InlineTextBox::paintCompositionUnderline const):

LayoutTests:

* css3/color-filters/color-filter-composition-underline-color-expected.html: Added.
* css3/color-filters/color-filter-composition-underline-color.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/css3/color-filters/color-filter-composition-underline-color-expected.html [new file with mode: 0644]
LayoutTests/css3/color-filters/color-filter-composition-underline-color.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/InlineTextBox.cpp

index 497e27a..15a0b6b 100644 (file)
@@ -1,3 +1,14 @@
+2018-06-24  Simon Fraser  <simon.fraser@apple.com>
+
+        Fix the composition underline to be transformed by -apple-color-filter
+        https://bugs.webkit.org/show_bug.cgi?id=186983
+        rdar://problem/40515558
+
+        Reviewed by Zalan Bujtas.
+        
+        * css3/color-filters/color-filter-composition-underline-color-expected.html: Added.
+        * css3/color-filters/color-filter-composition-underline-color.html: Added.
+
 2018-06-23  Zalan Bujtas  <zalan@apple.com>
 
         [Mail] Use the Mail Viewer width as the base for resolving horizontal viewport units
diff --git a/LayoutTests/css3/color-filters/color-filter-composition-underline-color-expected.html b/LayoutTests/css3/color-filters/color-filter-composition-underline-color-expected.html
new file mode 100644 (file)
index 0000000..3f162e1
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
+<style>
+    div {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    #test {
+        color: green;
+        font: 20px/1 Monospace;
+        outline: none;
+    }
+    #overlapping-top {
+        background: white;
+        width: 100px;
+        height: 15px;
+    }
+    #overlapping-right {
+        background: white;
+        width: 50px;
+        height: 50px;
+        left: 50px;
+    }
+</style>
+<div contenteditable id="test"></div>
+<!-- The overlapping DIVs are hiding the "^^^^^" characters and the caret to show only the composition underline. -->
+<div id="overlapping-top"></div>
+<div id="overlapping-right"></div>
+<script>
+    document.getElementById("test").focus();
+    if (window.textInputController)
+        textInputController.setMarkedText("^^^^^", 5, 0);
+</script>
diff --git a/LayoutTests/css3/color-filters/color-filter-composition-underline-color.html b/LayoutTests/css3/color-filters/color-filter-composition-underline-color.html
new file mode 100644 (file)
index 0000000..75626e2
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html><!-- webkit-test-runner [ enableColorFilter=true ] -->
+<style>
+    div {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    #test {
+        color: rgb(255, 128, 255);
+        font: 20px/1 Monospace;
+        outline: none;
+        -apple-color-filter: invert(1);
+    }
+    #overlapping-top {
+        background: white;
+        width: 100px;
+        height: 15px;
+    }
+    #overlapping-right {
+        background: white;
+        width: 50px;
+        height: 50px;
+        left: 50px;
+    }
+</style>
+<div contenteditable id="test"></div>
+<!-- The overlapping DIVs are hiding the "^^^^^" characters and the caret to show only the composition underline. -->
+<div id="overlapping-top"></div>
+<div id="overlapping-right"></div>
+<script>
+    document.getElementById("test").focus();
+    if (window.textInputController)
+        textInputController.setMarkedText("^^^^^", 5, 0);
+</script>
index 8ffb021..196bf54 100644 (file)
@@ -1,3 +1,18 @@
+2018-06-24  Simon Fraser  <simon.fraser@apple.com>
+
+        Fix the composition underline to be transformed by -apple-color-filter
+        https://bugs.webkit.org/show_bug.cgi?id=186983
+        rdar://problem/40515558
+
+        Reviewed by Zalan Bujtas.
+        
+        Transform the composition underline color with the color filter.
+
+        Test: css3/color-filters/color-filter-composition-underline-color.html
+
+        * rendering/InlineTextBox.cpp:
+        (WebCore::InlineTextBox::paintCompositionUnderline const):
+
 2018-06-23  Zalan Bujtas  <zalan@apple.com>
 
         [Mail] Use the Mail Viewer width as the base for resolving horizontal viewport units
index 3e7e161..cea1cd0 100644 (file)
@@ -1168,7 +1168,8 @@ void InlineTextBox::paintCompositionUnderline(PaintInfo& paintInfo, const FloatP
     width -= 2;
 
     GraphicsContext& context = paintInfo.context();
-    context.setStrokeColor(underline.compositionUnderlineColor == CompositionUnderlineColor::TextColor ? renderer().style().visitedDependentColorWithColorFilter(CSSPropertyWebkitTextFillColor) : underline.color);
+    Color underlineColor = underline.compositionUnderlineColor == CompositionUnderlineColor::TextColor ? renderer().style().visitedDependentColorWithColorFilter(CSSPropertyWebkitTextFillColor) : renderer().style().colorByApplyingColorFilter(underline.color);
+    context.setStrokeColor(underlineColor);
     context.setStrokeThickness(lineThickness);
     context.drawLineForText(FloatPoint(boxOrigin.x() + start, boxOrigin.y() + logicalHeight() - lineThickness), width, renderer().document().printing());
 }