Skip to content

GitLab

T
tangled
Commit d8031b1f authored by sangwoo's avatar sangwoo Committed by Commit Bot
Browse files
Options

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: default avatarPhilip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795789}
parent 7888f7dd
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 12 deletions
third_party/blink/renderer/platform/graphics/graphics_context.cc
View file @ d8031b1f
......@@ -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:
......
third_party/blink/renderer/platform/graphics/graphics_context.h
View file @ d8031b1f
......@@ -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&);
......
third_party/blink/web_tests/fast/css3-text/css3-text-decoration/text-decoration-dotted-line.html 0 → 100644
View file @ d8031b1f
<!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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment