- Revision
- 238838
- Author
- [email protected]
- Date
- 2018-12-03 19:54:49 -0800 (Mon, 03 Dec 2018)
Log Message
Thick overlines and line-throughs grow in the wrong direction
https://bugs.webkit.org/show_bug.cgi?id=192264
Reviewed by Dean Jackson.
Source/WebCore:
Overlines should grow upward, and line-throughs should stay centered.
Test: fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html
* rendering/TextDecorationPainter.cpp:
(WebCore::TextDecorationPainter::paintTextDecoration):
* style/InlineTextBoxStyle.cpp:
(WebCore::visualOverflowForDecorations):
LayoutTests:
I can't figure out a way to test the line-through, so this just tests the overline.
* fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html: Added.
* fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (238837 => 238838)
--- trunk/LayoutTests/ChangeLog 2018-12-04 02:43:29 UTC (rev 238837)
+++ trunk/LayoutTests/ChangeLog 2018-12-04 03:54:49 UTC (rev 238838)
@@ -1,3 +1,15 @@
+2018-12-03 Myles C. Maxfield <[email protected]>
+
+ Thick overlines and line-throughs grow in the wrong direction
+ https://bugs.webkit.org/show_bug.cgi?id=192264
+
+ Reviewed by Dean Jackson.
+
+ I can't figure out a way to test the line-through, so this just tests the overline.
+
+ * fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html: Added.
+
2018-12-03 Ryan Haddad <[email protected]>
[css-grid] Crash on debug changing the style of a positioned element
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html (0 => 238838)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html 2018-12-04 03:54:49 UTC (rev 238838)
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure that overlines grow upward. The test passes if the overline on the text below has the default thickness.
+<div style="font-size: 48px; text-decoration: overline;">Hello</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html (0 => 238838)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html 2018-12-04 03:54:49 UTC (rev 238838)
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure that overlines grow upward. The test passes if the overline on the text below has the default thickness.
+<div style="font-size: 48px; text-decoration: overline; overflow: hidden; text-decoration-thickness: 10px;">Hello</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (238837 => 238838)
--- trunk/Source/WebCore/ChangeLog 2018-12-04 02:43:29 UTC (rev 238837)
+++ trunk/Source/WebCore/ChangeLog 2018-12-04 03:54:49 UTC (rev 238838)
@@ -1,3 +1,19 @@
+2018-12-03 Myles C. Maxfield <[email protected]>
+
+ Thick overlines and line-throughs grow in the wrong direction
+ https://bugs.webkit.org/show_bug.cgi?id=192264
+
+ Reviewed by Dean Jackson.
+
+ Overlines should grow upward, and line-throughs should stay centered.
+
+ Test: fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html
+
+ * rendering/TextDecorationPainter.cpp:
+ (WebCore::TextDecorationPainter::paintTextDecoration):
+ * style/InlineTextBoxStyle.cpp:
+ (WebCore::visualOverflowForDecorations):
+
2018-12-03 Simon Fraser <[email protected]>
Viewport-constrained renderers are always RenderLayerModelObjects
Modified: trunk/Source/WebCore/rendering/TextDecorationPainter.cpp (238837 => 238838)
--- trunk/Source/WebCore/rendering/TextDecorationPainter.cpp 2018-12-04 02:43:29 UTC (rev 238837)
+++ trunk/Source/WebCore/rendering/TextDecorationPainter.cpp 2018-12-04 03:54:49 UTC (rev 238838)
@@ -296,12 +296,15 @@
if (m_decorations.contains(TextDecoration::Overline)) {
float wavyOffset = m_styles.overlineStyle == TextDecorationStyle::Wavy ? m_wavyOffset : 0;
FloatRect rect(localOrigin, FloatSize(m_width, textDecorationThickness));
- rect.move(0, -wavyOffset);
+ float autoTextDecorationThickness = TextDecorationThickness::createWithAuto().resolve(m_lineStyle.computedFontSize(), fontMetrics);
+ rect.move(0, autoTextDecorationThickness - textDecorationThickness - wavyOffset);
paintDecoration(TextDecoration::Overline, m_styles.overlineStyle, m_styles.overlineColor, rect);
}
if (m_decorations.contains(TextDecoration::LineThrough)) {
FloatRect rect(localOrigin, FloatSize(m_width, textDecorationThickness));
- rect.move(0, 2 * fontMetrics.floatAscent() / 3);
+ float autoTextDecorationThickness = TextDecorationThickness::createWithAuto().resolve(m_lineStyle.computedFontSize(), fontMetrics);
+ auto center = 2 * fontMetrics.floatAscent() / 3 + autoTextDecorationThickness / 2;
+ rect.move(0, center - textDecorationThickness / 2);
paintDecoration(TextDecoration::LineThrough, m_styles.linethroughStyle, m_styles.linethroughColor, rect);
}
} while (shadow);
Modified: trunk/Source/WebCore/style/InlineTextBoxStyle.cpp (238837 => 238838)
--- trunk/Source/WebCore/style/InlineTextBoxStyle.cpp 2018-12-04 02:43:29 UTC (rev 238837)
+++ trunk/Source/WebCore/style/InlineTextBoxStyle.cpp 2018-12-04 03:54:49 UTC (rev 238838)
@@ -125,6 +125,7 @@
}
// These metrics must match where underlines get drawn.
+ // FIXME: Share the code in TextDecorationPainter::paintTextDecoration() so we can just query it for the painted geometry.
if (decoration & TextDecoration::Underline) {
// Compensate for the integral ceiling in GraphicsContext::computeLineBoundsAndAntialiasingModeForText()
int underlineOffset = 1;
@@ -140,23 +141,31 @@
}
}
if (decoration & TextDecoration::Overline) {
+ FloatRect rect(FloatPoint(), FloatSize(1, strokeThickness));
+ float autoTextDecorationThickness = TextDecorationThickness::createWithAuto().resolve(lineStyle.computedFontSize(), lineStyle.fontMetrics());
+ rect.move(0, autoTextDecorationThickness - strokeThickness - wavyOffset);
if (decorationStyle == TextDecorationStyle::Wavy) {
- extendIntToFloat(overflowResult.bottom, -wavyOffset + wavyStrokeParameters.controlPointDistance + strokeThickness - height);
- extendIntToFloat(overflowResult.top, wavyOffset + wavyStrokeParameters.controlPointDistance + strokeThickness);
- } else {
- extendIntToFloat(overflowResult.bottom, strokeThickness - height);
- // top is untouched
+ FloatBoxExtent wavyExpansion;
+ wavyExpansion.setTop(wavyStrokeParameters.controlPointDistance);
+ wavyExpansion.setBottom(wavyStrokeParameters.controlPointDistance);
+ rect.expand(wavyExpansion);
}
+ extendIntToFloat(overflowResult.top, -rect.y());
+ extendIntToFloat(overflowResult.bottom, rect.maxY() - height);
}
if (decoration & TextDecoration::LineThrough) {
- float baseline = lineStyle.fontMetrics().floatAscent();
+ FloatRect rect(FloatPoint(), FloatSize(1, strokeThickness));
+ float autoTextDecorationThickness = TextDecorationThickness::createWithAuto().resolve(lineStyle.computedFontSize(), lineStyle.fontMetrics());
+ auto center = 2 * lineStyle.fontMetrics().floatAscent() / 3 + autoTextDecorationThickness / 2;
+ rect.move(0, center - strokeThickness / 2);
if (decorationStyle == TextDecorationStyle::Wavy) {
- extendIntToFloat(overflowResult.bottom, 2 * baseline / 3 + wavyStrokeParameters.controlPointDistance + strokeThickness - height);
- extendIntToFloat(overflowResult.top, -(2 * baseline / 3 - wavyStrokeParameters.controlPointDistance - strokeThickness));
- } else {
- extendIntToFloat(overflowResult.bottom, 2 * baseline / 3 + strokeThickness - height);
- extendIntToFloat(overflowResult.top, -(2 * baseline / 3));
+ FloatBoxExtent wavyExpansion;
+ wavyExpansion.setTop(wavyStrokeParameters.controlPointDistance);
+ wavyExpansion.setBottom(wavyStrokeParameters.controlPointDistance);
+ rect.expand(wavyExpansion);
}
+ extendIntToFloat(overflowResult.top, -rect.y());
+ extendIntToFloat(overflowResult.bottom, rect.maxY() - height);
}
return overflowResult;
}
