REGRESSION: Two editing/caret/color-span-inside-editable tests are co…

…nstant image failures

https://bugs.webkit.org/show_bug.cgi?id=265871
rdar://113875623

Reviewed by Brent Fulgham.

There were 2 caret-related changes:
A) Caret shape changed between Ventura and Sonoma (from squared to rounded).
B) Caret color behavior changed. The caret color should now update in content
editable elements if a foreground color is specified. This change was introduced by https://commits.webkit.org/266070@main.

Because of (A) we need to rebaseline these tests for the expected values
to match the shape of the updated caret. This change is only valid from Sonoma,
so we are adding -expected values for Ventura and Monterey, that expect
the caret to still be squared.

Because of (B) we need to rebaseline these tests for the expected values
to match the color of the caret in content editable elements. We also need
to update the description of the test themselves to match the new behavior, since
before the WebKit change on (B) caret would preserve its color even if set
by author.

* LayoutTests/editing/caret/color-span-inside-editable-background-expected.html:
* LayoutTests/editing/caret/color-span-inside-editable-background.html:
* LayoutTests/editing/caret/color-span-inside-editable-expected.html:
* LayoutTests/editing/caret/color-span-inside-editable.html:
* LayoutTests/platform/gtk/editing/caret/color-span-inside-editable-background-expected.html: Added.
* LayoutTests/platform/gtk/editing/caret/color-span-inside-editable-expected.html: Added.
* LayoutTests/platform/mac-monterey/editing/caret/color-span-inside-editable-background-expected.html: Added.
* LayoutTests/platform/mac-monterey/editing/caret/color-span-inside-editable-expected.html: Added.
* LayoutTests/platform/mac-ventura/editing/caret/color-span-inside-editable-background-expected.html: Added.
* LayoutTests/platform/mac-ventura/editing/caret/color-span-inside-editable-expected.html: Added.
* LayoutTests/platform/mac-wk2/editing/caret/caret-color-expected.png: Removed.
* LayoutTests/platform/mac-wk2/editing/caret/color-span-inside-editable-background-expected.html: Removed.
* LayoutTests/platform/mac-wk2/editing/caret/color-span-inside-editable-expected.html: Removed.
* LayoutTests/platform/mac/TestExpectations:

Canonical link: https://commits.webkit.org/271563@main

LayoutTests/editing/caret/color-span-inside-editable-background-expected.html

@@ -1,4 +1,4 @@
-This test makes sure that carets in content editable divs with a background color specified remain as default even if there is a span inside them with a foreground color specified.
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+<div style="width: 100px; height: 500px; background-color: red; border-radius: 50px;"></div>
 </div>

LayoutTests/editing/caret/color-span-inside-editable-background.html

@@ -1,4 +1,4 @@
-This test makes sure that carets in content editable divs with a background color specified remain as default even if there is a span inside them with a foreground color specified.
+This test makes sure that carets in content editable divs changes color 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>

LayoutTests/editing/caret/color-span-inside-editable-expected.html

@@ -1,4 +1,4 @@
-This test makes sure that carets in content editable divs remain as default if there is a span inside them with a foreground color specified.
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+<div style="width: 100px; height: 500px; background-color: red; border-radius: 50px;"></div>
 </div>

LayoutTests/editing/caret/color-span-inside-editable.html

@@ -1,4 +1,4 @@
-This test makes sure that carets in content editable divs remain as default if there is a span inside them with a foreground color specified.
+This test makes sure that carets in content editable divs changes color 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="-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>

LayoutTests/platform/gtk/editing/caret/color-span-inside-editable-background-expected.html

@@ -0,0 +1,4 @@
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+ </div>

LayoutTests/platform/gtk/editing/caret/color-span-inside-editable-expected.html

@@ -0,0 +1,4 @@
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+ </div>

LayoutTests/platform/mac-monterey/editing/caret/color-span-inside-editable-background-expected.html

@@ -0,0 +1,4 @@
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+ </div>

LayoutTests/platform/mac-monterey/editing/caret/color-span-inside-editable-expected.html

@@ -0,0 +1,4 @@
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+ </div>

LayoutTests/platform/mac-ventura/editing/caret/color-span-inside-editable-background-expected.html

@@ -0,0 +1,4 @@
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+ </div>

LayoutTests/platform/mac-ventura/editing/caret/color-span-inside-editable-expected.html

@@ -0,0 +1,4 @@
+This test makes sure that carets in content editable divs changes color 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: red"></div>
+ </div>

LayoutTests/platform/mac/TestExpectations

@@ -2462,10 +2462,6 @@ css3/color-filters/color-filter-caret-color.html [ ImageOnlyFailure ]
 fast/css/caret-color-fallback-to-color.html [ ImageOnlyFailure ]
 fast/css/caret-color-span-inside-editable-parent.html [ ImageOnlyFailure ]
 
-# rdar://111079967 (REGRESSION ( Sonoma ): [ Sonoma ] Two editing/caret/color-span-inside-editabl tests are constant image failures)
-editing/caret/color-span-inside-editable-background.html [ ImageOnlyFailure ]
-editing/caret/color-span-inside-editable.html [ ImageOnlyFailure ]
-
 # Caps lock indicator is disabled on Sonoma, as it is provided by the OS.
 fast/forms/caps-lock-indicator-width.html [ Skip ]