The css properties stroke-width/stroke-color and -webkit-text-stroke-width/-webkit...
authorpvollan@apple.com <pvollan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Nov 2017 22:13:34 +0000 (22:13 +0000)
committerpvollan@apple.com <pvollan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 13 Nov 2017 22:13:34 +0000 (22:13 +0000)
https://bugs.webkit.org/show_bug.cgi?id=174737

Reviewed by Antti Koivisto.

Source/WebCore:

Previously, the stroke width and stroke color would independently fall back to the -webkit-text-stroke-width and
-webkit-text-stroke-color values if stroke-width and/or stroke-color were not explicitly specified. This is
problematic, since we might end up mixing the new stroke properties with the legacy Webkit stroke properties.
The new strategy is to use the stroke-width and stroke-color value combination only if stroke-color has been
explicitly specified. This should work well, since there will be no visible stroke when specifying only
stroke-width (because stroke-color by default is transparent). We can then safely fall back to the legacy Webkit
stroke value combination. In the case where only stroke-color is specified, we should use the stroke-width/
stroke-color combination, since stroke-width by default is 1, and we will then have a visible stroke.

No new tests, existing tests have been updated to reflect behavior changes.

* rendering/TextDecorationPainter.cpp:
(WebCore::decorationColor):
* rendering/TextPaintStyle.cpp:
(WebCore::computeTextPaintStyle):
(WebCore::computeTextSelectionPaintStyle):
* rendering/style/RenderStyle.cpp:
(WebCore::RenderStyle::computedStrokeWidth const):
(WebCore::RenderStyle::hasPositiveStrokeWidth const):
(WebCore::RenderStyle::computedStrokeColor const):
* rendering/style/RenderStyle.h:

LayoutTests:

* fast/css/stroke-color-expected.html:
* fast/css/stroke-color-fallback-expected.html:
* fast/css/stroke-color-fallback.html:
* fast/css/stroke-color.html:
* fast/css/stroke-width-expected.html:
* fast/css/stroke-width-fallback-expected.html:
* fast/css/stroke-width-fallback.html:
* fast/css/stroke-width.html:

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

14 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/stroke-color-expected.html
LayoutTests/fast/css/stroke-color-fallback-expected.html
LayoutTests/fast/css/stroke-color-fallback.html
LayoutTests/fast/css/stroke-color.html
LayoutTests/fast/css/stroke-width-expected.html
LayoutTests/fast/css/stroke-width-fallback-expected.html
LayoutTests/fast/css/stroke-width-fallback.html
LayoutTests/fast/css/stroke-width.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/TextDecorationPainter.cpp
Source/WebCore/rendering/TextPaintStyle.cpp
Source/WebCore/rendering/style/RenderStyle.cpp
Source/WebCore/rendering/style/RenderStyle.h

index 381b1b8..7f97976 100644 (file)
@@ -1,3 +1,19 @@
+2017-11-13  Per Arne Vollan  <pvollan@apple.com>
+
+        The css properties stroke-width/stroke-color and -webkit-text-stroke-width/-webkit-text-stroke-color should not be mixed.
+        https://bugs.webkit.org/show_bug.cgi?id=174737
+
+        Reviewed by Antti Koivisto.
+
+        * fast/css/stroke-color-expected.html:
+        * fast/css/stroke-color-fallback-expected.html:
+        * fast/css/stroke-color-fallback.html:
+        * fast/css/stroke-color.html:
+        * fast/css/stroke-width-expected.html:
+        * fast/css/stroke-width-fallback-expected.html:
+        * fast/css/stroke-width-fallback.html:
+        * fast/css/stroke-width.html:
+
 2017-11-13  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r224763.
index 0425687..169761e 100644 (file)
@@ -8,6 +8,7 @@
             color: gray;
             text-shadow: none;
             -webkit-text-stroke-width: 10px;
+            display: inline;
         }
     </style>
 </head>
index 58b102c..44d0e73 100644 (file)
@@ -7,7 +7,8 @@
             font-size: 80px;
             color: gray;
             text-shadow: none;
-            -webkit-text-stroke-width: 10px;
+            stroke-width: 10px;
+            display: inline;
         }
     
         stroke-color-class {
index d798bb7..477dfa7 100644 (file)
@@ -7,10 +7,12 @@
             font-size: 80px;
             color: gray;
             text-shadow: none;
+            stroke-width: 10px;
             -webkit-text-stroke-width: 10px;
+            display: inline;
         }
     
-        stroke-color-class {
+        div.stroke-color-class {
             stroke-color: green;
         }
     </style>
index 91c074f..e84c3d8 100644 (file)
@@ -7,7 +7,8 @@
             font-size: 80px;
             color: gray;
             text-shadow: none;
-            -webkit-text-stroke-width: 10px;
+            stroke-width: 10px;
+            display: inline;
         }
     </style>
 </head>
index 00a2165..237bda4 100644 (file)
@@ -8,6 +8,7 @@
             color: gray;
             text-shadow: none;
             -webkit-text-stroke-color: blue;
+            display: inline;
         }
     </style>
 </head>
index 59fde85..e1d6955 100644 (file)
@@ -7,25 +7,30 @@
             font-size: 80px;
             color: gray;
             text-shadow: none;
-            -webkit-text-stroke-color: blue;
+            display: inline
         }
     </style>
 </head>
 <body>
 
-<div style="stroke-width: 10px;">&#x25fc;</div>
-<div style="stroke-width: 25px;">&#x25fc;</div>
-<div style="stroke-width: 25px;">&#x25fc;</div>
-<div style="stroke-width: 30px;">&#x25fc;</div>
-<div style="stroke-width: 25px;">&#x25fc;</div>
+<div>&#x25fc;</div>
+<div style="-webkit-text-stroke-width: 25px; -webkit-text-stroke-color: green;">&#x25fc;</div>
+<div style="stroke-width: 1px; stroke-color: green;">&#x25fc;</div>
+<div style="stroke-width: 10px; stroke-color: blue;">&#x25fc;</div>
+<div style="stroke-width: 1px; stroke-color: green;">&#x25fc;</div>
+<div style="stroke-width: 10px; stroke-color: blue;">&#x25fc;</div>
+<div style="stroke-width: 25px; stroke-color: green;">&#x25fc;</div>
 
-<div style="stroke-width: 25px;"><span>&#x25fc;</span></div>
-<div style="stroke-width: 25px;"><span>&#x25fc;</span></div>
-<div style="stroke-width: 10px;"><span>&#x25fc;</span></div>
-<div style="stroke-width: 25px;"><span>&#x25fc;</span></div>
-<div style="stroke-width: 25px;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 10px; stroke-color: blue;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 25px; stroke-color: green;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 10px; stroke-color: blue;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 25px; stroke-color: green;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 10px; stroke-color: blue;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 1px; stroke-color: green;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 10px; stroke-color: blue;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 25px; stroke-color: green;"><span>&#x25fc;</span></div>
 
-<div style="stroke-width: 25px;">&#x25fc;</div>
+<div style="stroke-width: 10px; stroke-color: blue;">&#x25fc;</div>
 
 </body>
 </html>
index c414031..c0829a6 100644 (file)
@@ -8,26 +8,32 @@
             color: gray;
             text-shadow: none;
             -webkit-text-stroke-color: blue;
+            display: inline
         }
     
-        stroke-width-class {
+        div.stroke-width-class {
             stroke-width: 25px;
         }
     </style>
 </head>
 <body>
 
+<div style="stroke-width: 25px;">&#x25fc;</div>
+<div style="stroke-width: 25px; stroke-color: green;">&#x25fc;</div>
+<div style="stroke-color: green;">&#x25fc;</div>
 <div style="-webkit-text-stroke-width: 10px;">&#x25fc;</div>
+<div style="-webkit-text-stroke-width: 10px; stroke-color: green;">&#x25fc;</div>
 <div style="stroke-width: 25px; -webkit-text-stroke-width: 10px;">&#x25fc;</div>
-<div style="-webkit-text-stroke-width: 10px; stroke-width: 25px;">&#x25fc;</div>
-<div style="-webkit-text-stroke-width: 10px; stroke-width: 25px; stroke-width: 30px;">&#x25fc;</div>
-<div style="-webkit-text-stroke-width: 10px; stroke-width: 25px; -webkit-text-stroke-width: 30px;">&#x25fc;</div>
+<div style="stroke-width: 25px; -webkit-text-stroke-width: 10px; stroke-color: green;">&#x25fc;</div>
 
 <div style="stroke-width: 25px;"><span style="-webkit-text-stroke-width: 10px;">&#x25fc;</span></div>
+<div style="stroke-width: 25px; stroke-color: green;"><span style="-webkit-text-stroke-width: 10px;">&#x25fc;</span></div>
 <div style="-webkit-text-stroke-width: 10px;"><span style="stroke-width: 25px;">&#x25fc;</span></div>
+<div style="-webkit-text-stroke-width: 10px; stroke-color: green;"><span style="stroke-width: 25px;">&#x25fc;</span></div>
 <div style="-webkit-text-stroke-width: 10px;"><span>&#x25fc;</span></div>
+<div style="-webkit-text-stroke-width: 10px; stroke-color: green;"><span>&#x25fc;</span></div>
 <div style="stroke-width: 25px; -webkit-text-stroke-width: 10px;"><span>&#x25fc;</span></div>
-<div style="-webkit-text-stroke-width: 10px; stroke-width: 25px;"><span>&#x25fc;</span></div>
+<div style="stroke-width: 25px; -webkit-text-stroke-width: 10px; stroke-color: green;"><span>&#x25fc;</span></div>
 
 <div class="stroke-width-class" style="-webkit-text-stroke-width: 10px;">&#x25fc;</div>
 
index 39a19de..d9587b3 100644 (file)
@@ -7,7 +7,8 @@
             font-size: 80px;
             color: gray;
             text-shadow: none;
-            -webkit-text-stroke-color: blue;
+            stroke-color: blue;
+            display: inline;
         }
     </style>
 </head>
index 46dd0f3..3dff65e 100644 (file)
@@ -1,3 +1,32 @@
+2017-11-13  Per Arne Vollan  <pvollan@apple.com>
+
+        The css properties stroke-width/stroke-color and -webkit-text-stroke-width/-webkit-text-stroke-color should not be mixed.
+        https://bugs.webkit.org/show_bug.cgi?id=174737
+
+        Reviewed by Antti Koivisto.
+
+        Previously, the stroke width and stroke color would independently fall back to the -webkit-text-stroke-width and
+        -webkit-text-stroke-color values if stroke-width and/or stroke-color were not explicitly specified. This is
+        problematic, since we might end up mixing the new stroke properties with the legacy Webkit stroke properties.
+        The new strategy is to use the stroke-width and stroke-color value combination only if stroke-color has been
+        explicitly specified. This should work well, since there will be no visible stroke when specifying only
+        stroke-width (because stroke-color by default is transparent). We can then safely fall back to the legacy Webkit
+        stroke value combination. In the case where only stroke-color is specified, we should use the stroke-width/
+        stroke-color combination, since stroke-width by default is 1, and we will then have a visible stroke. 
+
+        No new tests, existing tests have been updated to reflect behavior changes.
+
+        * rendering/TextDecorationPainter.cpp:
+        (WebCore::decorationColor):
+        * rendering/TextPaintStyle.cpp:
+        (WebCore::computeTextPaintStyle):
+        (WebCore::computeTextSelectionPaintStyle):
+        * rendering/style/RenderStyle.cpp:
+        (WebCore::RenderStyle::computedStrokeWidth const):
+        (WebCore::RenderStyle::hasPositiveStrokeWidth const):
+        (WebCore::RenderStyle::computedStrokeColor const):
+        * rendering/style/RenderStyle.h:
+
 2017-11-13  Gabriel Ivascu  <givascu@igalia.com>
 
         [GTK] Automatically adjust font size when gtk-xft-dpi changes
index 0235964..ad1d7ae 100644 (file)
@@ -358,7 +358,7 @@ static Color decorationColor(const RenderStyle& style)
         return result;
     if (style.hasPositiveStrokeWidth()) {
         // Prefer stroke color if possible but not if it's fully transparent.
-        result = style.visitedDependentColor(style.hasExplicitlySetStrokeColor() ? CSSPropertyStrokeColor :  CSSPropertyWebkitTextStrokeColor);
+        result = style.computedStrokeColor();
         if (result.isVisible())
             return result;
     }
index b0ab8f5..14a342d 100644 (file)
@@ -107,7 +107,7 @@ TextPaintStyle computeTextPaintStyle(const Frame& frame, const RenderStyle& line
     if (forceBackgroundToWhite)
         paintStyle.fillColor = adjustColorForVisibilityOnBackground(paintStyle.fillColor, Color::white);
 
-    paintStyle.strokeColor = lineStyle.visitedDependentColor(lineStyle.hasExplicitlySetStrokeColor() ? CSSPropertyStrokeColor : CSSPropertyWebkitTextStrokeColor);
+    paintStyle.strokeColor = lineStyle.computedStrokeColor();
 
     // Make the text stroke color legible against a white background
     if (forceBackgroundToWhite)
@@ -162,7 +162,7 @@ TextPaintStyle computeTextSelectionPaintStyle(const TextPaintStyle& textPaintSty
             selectionPaintStyle.strokeWidth = strokeWidth;
         }
 
-        Color stroke = paintInfo.forceTextColor() ? paintInfo.forcedTextColor() : pseudoStyle->visitedDependentColor(pseudoStyle->hasExplicitlySetStrokeColor() ? CSSPropertyStrokeColor : CSSPropertyWebkitTextStrokeColor);
+        Color stroke = paintInfo.forceTextColor() ? paintInfo.forcedTextColor() : pseudoStyle->computedStrokeColor();
         if (stroke != selectionPaintStyle.strokeColor) {
             if (!paintSelectedTextOnly)
                 paintSelectedTextSeparately = true;
index 077d04b..5448184 100644 (file)
@@ -2361,7 +2361,10 @@ Vector<PaintType, 3> RenderStyle::paintTypesForPaintOrder(PaintOrder order)
 
 float RenderStyle::computedStrokeWidth(const IntSize& viewportSize) const
 {
-    if (!hasExplicitlySetStrokeWidth())
+    // Use the stroke-width and stroke-color value combination only if stroke-color has been explicitly specified.
+    // Since there will be no visible stroke when stroke-color is not specified (transparent by default), we fall
+    // back to the legacy Webkit text stroke combination in that case.
+    if (!hasExplicitlySetStrokeColor())
         return textStrokeWidth();
     
     const Length& length = strokeWidth();
@@ -2389,4 +2392,12 @@ bool RenderStyle::hasPositiveStrokeWidth() const
     return strokeWidth().isPositive();
 }
 
+Color RenderStyle::computedStrokeColor() const
+{
+    CSSPropertyID propertyID = CSSPropertyStrokeColor;
+    if (!hasExplicitlySetStrokeColor())
+        propertyID = CSSPropertyWebkitTextStrokeColor;
+    return visitedDependentColor(propertyID);
+}
+
 } // namespace WebCore
index c8435ed..05ff469 100644 (file)
@@ -1275,7 +1275,8 @@ public:
     void setHasExplicitlySetStrokeColor(bool v) { SET_VAR(m_rareInheritedData, hasSetStrokeColor, static_cast<unsigned>(v)); }
     bool hasExplicitlySetStrokeColor() const { return m_rareInheritedData->hasSetStrokeColor; };
     static Color initialStrokeColor() { return Color(Color::transparent); }
-    
+    Color computedStrokeColor() const;
+
     float strokeMiterLimit() const { return m_rareInheritedData->miterLimit; }
     void setStrokeMiterLimit(float f) { SET_VAR(m_rareInheritedData, miterLimit, f); }
     static float initialStrokeMiterLimit() { return defaultMiterLimit; }