- Revision
- 285567
- Author
- [email protected]
- Date
- 2021-11-10 00:38:18 -0800 (Wed, 10 Nov 2021)
Log Message
Wavy decorations don't cover the whole line length
https://bugs.webkit.org/show_bug.cgi?id=232663
Reviewed by Myles C. Maxfield.
LayoutTests/imported/w3c:
Import WPT tests from https://github.com/web-platform-tests/wpt/pull/31540.
* web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001-expected-mismatch.html: Added.
* web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html: Added.
* web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001-expected-mismatch.html: Added.
* web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html: Added.
* web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001-expected-mismatch.html: Added.
* web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html: Added.
* web-platform-tests/css/css-text-decor/w3c-import.log:
Source/WebCore:
We have a problem with wavy decorations, because we are only painting
whole waves. Which means that, sometimes, the last part of the line
is not covered by the wavy decorations.
To fix this we're modifying strokeWavyTextDecoration() method.
We paint 2 extra waves before and after the line width,
and we clip the wavy text decoration to match the line's width.
This patch also removes adjustStepToDecorationLength() as the method
was wrong (e.g. passing 40px length and 10px step, it'd modify the step
to be 10.75px which makes no sense).
Apart from that, as we're now clipping the wave to the text line,
this adjustment is no longer needed.
Tests: imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html
imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html
imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html
* rendering/TextDecorationPainter.cpp:
(WebCore::strokeWavyTextDecoration):
(WebCore::adjustStepToDecorationLength): Deleted.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (285566 => 285567)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-11-10 08:20:30 UTC (rev 285566)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-11-10 08:38:18 UTC (rev 285567)
@@ -1,3 +1,20 @@
+2021-11-10 Manuel Rego Casasnovas <[email protected]>
+
+ Wavy decorations don't cover the whole line length
+ https://bugs.webkit.org/show_bug.cgi?id=232663
+
+ Reviewed by Myles C. Maxfield.
+
+ Import WPT tests from https://github.com/web-platform-tests/wpt/pull/31540.
+
+ * web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001-expected-mismatch.html: Added.
+ * web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html: Added.
+ * web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001-expected-mismatch.html: Added.
+ * web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html: Added.
+ * web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001-expected-mismatch.html: Added.
+ * web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html: Added.
+ * web-platform-tests/css/css-text-decor/w3c-import.log:
+
2021-11-09 Ben Nham <[email protected]>
Add support for PushSubscriptionChangeEvent
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001-expected-mismatch.html (0 => 285567)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001-expected-mismatch.html 2021-11-10 08:38:18 UTC (rev 285567)
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Decoration Test: Wavy decorations covers the whole line length mismatch reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<p>The test passes if you see some green below (the end of a wavy green text decoration).</p>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html (0 => 285567)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html 2021-11-10 08:38:18 UTC (rev 285567)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Decoration Test: Wavy line-through covers the whole line length</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks that a wavy line-through covers the whole line length.">
+<link rel="mismatch" href=""
+<link rel="stylesheet" type="text/css" href=""
+<style>
+ body {
+ overflow: hidden;
+ }
+ #wrapper {
+ position: absolute;
+ margin: 100px;
+ }
+ #decoration {
+ font: 400px/1 Ahem;
+ color: transparent;
+ text-decoration-line: line-through;
+ text-decoration-color: green;
+ text-decoration-style: wavy;
+ text-decoration-skip-ink: none;
+ }
+ #abspos {
+ position: absolute;
+ left: -100px;
+ top: -100px;
+ width: 480px;
+ height: 1000px;
+ background: white;
+ }
+</style>
+<p>The test passes if you see some green below (the end of a wavy green text decoration).</p>
+<div id="wrapper">
+ <div id="decoration">X</div>
+ <div id="abspos"></div>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001-expected-mismatch.html (0 => 285567)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001-expected-mismatch.html 2021-11-10 08:38:18 UTC (rev 285567)
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Decoration Test: Wavy decorations covers the whole line length mismatch reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<p>The test passes if you see some green below (the end of a wavy green text decoration).</p>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html (0 => 285567)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html 2021-11-10 08:38:18 UTC (rev 285567)
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Decoration Test: Wavy overline covers the whole line length</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks that a wavy overline covers the whole line length.">
+<link rel="mismatch" href=""
+<link rel="stylesheet" type="text/css" href=""
+<style>
+ body {
+ overflow: hidden;
+ }
+ #wrapper {
+ position: absolute;
+ margin: 100px;
+ padding-top: 200px;
+ }
+ #decoration {
+ font: 400px/1 Ahem;
+ color: transparent;
+ text-decoration-line: overline;
+ text-decoration-color: green;
+ text-decoration-style: wavy;
+ text-decoration-skip-ink: none;
+ }
+ #abspos {
+ position: absolute;
+ left: -100px;
+ top: -100px;
+ width: 480px;
+ height: 1000px;
+ background: white;
+ }
+</style>
+<p>The test passes if you see some green below (the end of a wavy green text decoration).</p>
+<div id="wrapper">
+ <div id="decoration">X</div>
+ <div id="abspos"></div>
+</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001-expected-mismatch.html (0 => 285567)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001-expected-mismatch.html 2021-11-10 08:38:18 UTC (rev 285567)
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Decoration Test: Wavy decorations covers the whole line length mismatch reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<p>The test passes if you see some green below (the end of a wavy green text decoration).</p>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html (0 => 285567)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html 2021-11-10 08:38:18 UTC (rev 285567)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Text Decoration Test: Wavy underline covers the whole line length</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks that a wavy underline covers the whole line length.">
+<link rel="mismatch" href=""
+<link rel="stylesheet" type="text/css" href=""
+<style>
+ body {
+ overflow: hidden;
+ }
+ #wrapper {
+ position: absolute;
+ margin: 100px;
+ }
+ #decoration {
+ font: 400px/1 Ahem;
+ color: transparent;
+ text-decoration-line: underline;
+ text-decoration-color: green;
+ text-decoration-style: wavy;
+ text-decoration-skip-ink: none;
+ }
+ #abspos {
+ position: absolute;
+ left: -100px;
+ top: -100px;
+ width: 480px;
+ height: 1000px;
+ background: white;
+ }
+</style>
+<p>The test passes if you see some green below (the end of a wavy green text decoration).</p>
+<div id="wrapper">
+ <div id="decoration">X</div>
+ <div id="abspos"></div>
+</div>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/w3c-import.log (285566 => 285567)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/w3c-import.log 2021-11-10 08:20:30 UTC (rev 285566)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/w3c-import.log 2021-11-10 08:38:18 UTC (rev 285567)
@@ -38,7 +38,11 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-recalc-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-recalc.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001-expected-mismatch.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001-expected-mismatch.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-propagation-shadow-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-propagation-shadow.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-serialization.tentative.html
@@ -119,6 +123,8 @@
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-position-vertical-ja-expected.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-position-vertical-ja.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-position-vertical.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001-expected-mismatch.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-visibility-001.xht
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-visibility-002.xht
/LayoutTests/imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-visibility-003.xht
Modified: trunk/Source/WebCore/ChangeLog (285566 => 285567)
--- trunk/Source/WebCore/ChangeLog 2021-11-10 08:20:30 UTC (rev 285566)
+++ trunk/Source/WebCore/ChangeLog 2021-11-10 08:38:18 UTC (rev 285567)
@@ -1,3 +1,32 @@
+2021-11-10 Manuel Rego Casasnovas <[email protected]>
+
+ Wavy decorations don't cover the whole line length
+ https://bugs.webkit.org/show_bug.cgi?id=232663
+
+ Reviewed by Myles C. Maxfield.
+
+ We have a problem with wavy decorations, because we are only painting
+ whole waves. Which means that, sometimes, the last part of the line
+ is not covered by the wavy decorations.
+
+ To fix this we're modifying strokeWavyTextDecoration() method.
+ We paint 2 extra waves before and after the line width,
+ and we clip the wavy text decoration to match the line's width.
+
+ This patch also removes adjustStepToDecorationLength() as the method
+ was wrong (e.g. passing 40px length and 10px step, it'd modify the step
+ to be 10.75px which makes no sense).
+ Apart from that, as we're now clipping the wave to the text line,
+ this adjustment is no longer needed.
+
+ Tests: imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-line-through-wavy-covers-whole-line-length-001.html
+ imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-overline-wavy-covers-whole-line-length-001.html
+ imported/w3c/web-platform-tests/css/css-text-decor/text-decoration-underline-wavy-covers-whole-line-length-001.html
+
+ * rendering/TextDecorationPainter.cpp:
+ (WebCore::strokeWavyTextDecoration):
+ (WebCore::adjustStepToDecorationLength): Deleted.
+
2021-11-10 Sihui Liu <[email protected]>
Perform FileSystemSyncAccessHandle operations in web process
Modified: trunk/Source/WebCore/rendering/TextDecorationPainter.cpp (285566 => 285567)
--- trunk/Source/WebCore/rendering/TextDecorationPainter.cpp 2021-11-10 08:20:30 UTC (rev 285566)
+++ trunk/Source/WebCore/rendering/TextDecorationPainter.cpp 2021-11-10 08:38:18 UTC (rev 285567)
@@ -37,24 +37,6 @@
namespace WebCore {
-static void adjustStepToDecorationLength(float& step, float& controlPointDistance, float length)
-{
- ASSERT(step > 0);
-
- if (length <= 0)
- return;
-
- unsigned stepCount = static_cast<unsigned>(length / step);
-
- // Each Bezier curve starts at the same pixel that the previous one
- // ended. We need to subtract (stepCount - 1) pixels when calculating the
- // length covered to account for that.
- float uncoveredLength = length - (stepCount * step - (stepCount - 1));
- float adjustment = uncoveredLength / stepCount;
- step += adjustment;
- controlPointDistance += adjustment;
-}
-
/*
* Draw one cubic Bezier curve and repeat the same pattern long the the decoration's axis.
* The start point (p1), controlPoint1, controlPoint2 and end point (p2) of the Bezier curve
@@ -84,15 +66,28 @@
*/
static void strokeWavyTextDecoration(GraphicsContext& context, const FloatRect& rect, float fontSize)
{
+ auto wavyStrokeParameters = getWavyStrokeParameters(fontSize);
+
FloatPoint p1 = rect.minXMinYCorner();
FloatPoint p2 = rect.maxXMinYCorner();
+
+ // Extent the wavy line before and after the text so it can cover the whole length.
+ p1.setX(p1.x() - 2 * wavyStrokeParameters.step);
+ p2.setX(p2.x() + 2 * wavyStrokeParameters.step);
+
+ auto bounds = rect;
+ // Offset the bounds and set extra height to ensure the whole wavy line is covered.
+ bounds.setY(bounds.y() - wavyStrokeParameters.controlPointDistance);
+ bounds.setHeight(bounds.height() + 2 * wavyStrokeParameters.controlPointDistance);
+ // Clip the extra wavy line added before
+ GraphicsContextStateSaver stateSaver(context);
+ context.clip(bounds);
+
context.adjustLineToPixelBoundaries(p1, p2, rect.height(), context.strokeStyle());
Path path;
path.moveTo(p1);
- auto wavyStrokeParameters = getWavyStrokeParameters(fontSize);
-
ASSERT(p1.y() == p2.y());
float yAxis = p1.y();
@@ -99,7 +94,6 @@
float x1 = std::min(p1.x(), p2.x());
float x2 = std::max(p1.x(), p2.x());
- adjustStepToDecorationLength(wavyStrokeParameters.step, wavyStrokeParameters.controlPointDistance, x2 - x1);
FloatPoint controlPoint1(0, yAxis + wavyStrokeParameters.controlPointDistance);
FloatPoint controlPoint2(0, yAxis - wavyStrokeParameters.controlPointDistance);
@@ -111,10 +105,8 @@
}
context.setShouldAntialias(true);
- auto strokeThickness = context.strokeThickness();
context.setStrokeThickness(rect.height());
context.strokePath(path);
- context.setStrokeThickness(strokeThickness);
}
static bool compareTuples(std::pair<float, float> l, std::pair<float, float> r)
