Don't enforce end points for dotted line on text

Sometimes the first or the last dot of dotted line for text is too heavy and long. We should improve this. Bug: 807368 Change-Id: I2851c964892b145154514c6f38e8025a8c29a7b6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2319501 Commit-Queue: Sang Woo Ko <sangwoo108@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/master@{#795789}
marcosholgado · Aug 7, 2020 · d8031b1 · d8031b1
1 parent 7888f7d
commit d8031b1
Show file tree

Hide file tree

Showing 23 changed files with 69 additions and 12 deletions.
diff --git a/third_party/blink/renderer/platform/graphics/graphics_context.cc b/third_party/blink/renderer/platform/graphics/graphics_context.cc
@@ -651,7 +651,8 @@ static void EnforceDotsAtEndpoints(GraphicsContext& context,
 
 void GraphicsContext::DrawLine(const IntPoint& point1,
                                const IntPoint& point2,
-                               const DarkModeFilter::ElementRole role) {
+                               const DarkModeFilter::ElementRole role,
+                               bool is_text_line) {
   DCHECK(canvas_);
 
   StrokeStyle pen_style = GetStrokeStyle();
@@ -668,18 +669,21 @@ void GraphicsContext::DrawLine(const IntPoint& point1,
   // probably worth the speed up of no square root, which also won't be exact.
   FloatSize disp = p2 - p1;
   int length = SkScalarRoundToInt(disp.Width() + disp.Height());
-  const DarkModeFlags flags(this, ImmutableState()->StrokeFlags(length), role);
+  const DarkModeFlags flags(this, ImmutableState()->StrokeFlags(length, width),
+                            role);
 
   if (pen_style == kDottedStroke) {
     if (StrokeData::StrokeIsDashed(width, pen_style)) {
-      // We draw thin dotted lines as dashes and gaps that are always
-      // exactly the size of the width. When the length of the line is
-      // an odd multiple of the width, things work well because we get
-      // dots at each end of the line, but if the length is anything else,
-      // we get gaps or partial dots at the end of the line. Fix that by
-      // explicitly enforcing full dots at the ends of lines.
-      EnforceDotsAtEndpoints(*this, p1, p2, length, width, flags,
-                             is_vertical_line);
+      // When the length of the line is an odd multiple of the width, things
+      // work well because we get dots at each end of the line, but if the
+      // length is anything else, we get gaps or partial dots at the end of the
+      // line. Fix that by explicitly enforcing full dots at the ends of lines.
+      // Note that we don't enforce end points when it's text line as enforcing
+      // is to improve border line quality.
+      if (!is_text_line) {
+        EnforceDotsAtEndpoints(*this, p1, p2, length, width, flags,
+                               is_vertical_line);
+      }
     } else {
       // We draw thick dotted lines with 0 length dash strokes and round
       // endcaps, producing circles. The endcaps extend beyond the line's
@@ -725,7 +729,7 @@ void GraphicsContext::DrawLineForText(const FloatPoint& pt, float width) {
     case kDashedStroke: {
       int y = floorf(pt.Y() + std::max<float>(StrokeThickness() / 2.0f, 0.5f));
       DrawLine(IntPoint(pt.X(), y), IntPoint(pt.X() + width, y),
-               DarkModeFilter::ElementRole::kText);
+               DarkModeFilter::ElementRole::kText, true);
       return;
     }
     case kWavyStroke:

diff --git a/third_party/blink/renderer/platform/graphics/graphics_context.h b/third_party/blink/renderer/platform/graphics/graphics_context.h
@@ -184,7 +184,8 @@ class PLATFORM_EXPORT GraphicsContext {
   void DrawLine(const IntPoint&,
                 const IntPoint&,
                 const DarkModeFilter::ElementRole role =
-                    DarkModeFilter::ElementRole::kBackground);
+                    DarkModeFilter::ElementRole::kBackground,
+                bool is_text_line = false);
 
   void FillPath(const Path&);
 

diff --git a/...arty/blink/web_tests/fast/css3-text/css3-text-decoration/text-decoration-dotted-line.html b/...arty/blink/web_tests/fast/css3-text/css3-text-decoration/text-decoration-dotted-line.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CSS Test: CSS3 text-decoration dotted line for text test</title>
+        <link rel="help" href="http://http://dev.w3.org/csswg/css3-text/#text-decoration-style"/>
+        <meta name="flags" content="ahem"/>
+        <style>
+            .overline {
+              text-decoration: overline;
+              text-decoration-skip-ink: auto;
+              text-decoration-style: dotted;
+              text-decoration-skip-ink: none;
+              text-decoration-color: red;
+            }
+
+            .line-through {
+              text-decoration: line-through;
+              text-decoration-skip-ink: auto;
+              text-decoration-style: dotted;
+              text-decoration-skip-ink: none;
+              text-decoration-color: red;
+            }
+
+            .underline {
+              text-decoration: underline;
+              text-decoration-skip-ink: auto;
+              text-decoration-style: dotted;
+              text-decoration-skip-ink: none;
+              text-decoration-color: red;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="overline">Lorem ipsum dolor sit amet</div>
+        <div class="overline">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</div>
+        <div class="overline">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</div>
+        <div class="overline">Nulla porttitor accumsan tincidunt.</div>
+        <div class="overline">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</div>
+
+        <div class="line-through">Lorem ipsum dolor sit amet</div>
+        <div class="line-through">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</div>
+        <div class="line-through">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</div>
+        <div class="line-through">Nulla porttitor accumsan tincidunt.</div>
+        <div class="line-through">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</div>
+
+        <div class="underline">Lorem ipsum dolor sit amet</div>
+        <div class="underline">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</div>
+        <div class="underline">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</div>
+        <div class="underline">Nulla porttitor accumsan tincidunt.</div>
+        <div class="underline">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</div>
+    </body>
+</html>
diff --git a/...tests/fast/css3-text/css3-text-decoration/text-decoration-skip-ink-expected.png b/...tests/fast/css3-text/css3-text-decoration/text-decoration-skip-ink-expected.png
diff --git a/...eb_tests/fast/css3-text/css3-text-decoration/text-decoration-style-expected.png b/...eb_tests/fast/css3-text/css3-text-decoration/text-decoration-style-expected.png
diff --git a/...ux/fast/css3-text/css3-text-decoration/text-decoration-dotted-line-expected.png b/...ux/fast/css3-text/css3-text-decoration/text-decoration-dotted-line-expected.png
diff --git a/...rm/linux/fast/css3-text/css3-text-decoration/text-decoration-style-expected.png b/...rm/linux/fast/css3-text/css3-text-decoration/text-decoration-style-expected.png
diff --git a/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png b/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png
diff --git a/...nk/web_tests/platform/linux/paint/markers/composition-marker-basic-expected.png b/...nk/web_tests/platform/linux/paint/markers/composition-marker-basic-expected.png
diff --git a/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png b/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png
diff --git a/...etina/fast/css3-text/css3-text-decoration/text-decoration-skip-ink-expected.png b/...etina/fast/css3-text/css3-text-decoration/text-decoration-skip-ink-expected.png
diff --git a/...c-retina/fast/css3-text/css3-text-decoration/text-decoration-style-expected.png b/...c-retina/fast/css3-text/css3-text-decoration/text-decoration-style-expected.png
diff --git a/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png b/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png
diff --git a/...b_tests/platform/mac-retina/paint/markers/composition-marker-basic-expected.png b/...b_tests/platform/mac-retina/paint/markers/composition-marker-basic-expected.png
diff --git a/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png b/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png
diff --git a/...ac/fast/css3-text/css3-text-decoration/text-decoration-dotted-line-expected.png b/...ac/fast/css3-text/css3-text-decoration/text-decoration-dotted-line-expected.png
diff --git a/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png b/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png
diff --git a/...link/web_tests/platform/mac/paint/markers/composition-marker-basic-expected.png b/...link/web_tests/platform/mac/paint/markers/composition-marker-basic-expected.png
diff --git a/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png b/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png
diff --git a/...in/fast/css3-text/css3-text-decoration/text-decoration-dotted-line-expected.png b/...in/fast/css3-text/css3-text-decoration/text-decoration-dotted-line-expected.png
diff --git a/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png b/.../fast/css3-text/css3-text-decoration/text-decoration-style-inherit-expected.png
diff --git a/...link/web_tests/platform/win/paint/markers/composition-marker-basic-expected.png b/...link/web_tests/platform/win/paint/markers/composition-marker-basic-expected.png
diff --git a/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png b/...color-scheme/composition_marker/composition-marker-basic-dark-mode-expected.png