Thick overlines and line-throughs grow in the wrong direction
authormmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 18 Dec 2018 23:38:54 +0000 (23:38 +0000)
committermmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 18 Dec 2018 23:38:54 +0000 (23:38 +0000)
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.

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

LayoutTests/ChangeLog
LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html [new file with mode: 0644]
LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/TextDecorationPainter.cpp
Source/WebCore/style/InlineTextBoxStyle.cpp

index 9130b17..a5ec06a 100644 (file)
@@ -1,3 +1,15 @@
+2018-12-18  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        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-18  Justin Fan  <justin_fan@apple.com>
 
         [WebGPU] BindGroupLayout and Device::createBindGroupLayout
diff --git a/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html b/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction-expected.html
new file mode 100644 (file)
index 0000000..680c6dd
--- /dev/null
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+This test makes sure that overlines grow upward. The test passes if the top line below has the default thickness.
+<div style="font: 48px 'Ahem'; text-decoration: overline;">pppp</div>
+</body>
+</html>
diff --git a/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html b/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thicknes-overline-grow-direction.html
new file mode 100644 (file)
index 0000000..ea3997f
--- /dev/null
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+This test makes sure that overlines grow upward. The test passes if the top line below has the default thickness.
+<div style="font: 48px 'Ahem'; text-decoration: overline; overflow: hidden; text-decoration-thickness: 10px;">pppp</div>
+</body>
+</html>
index fefaecd..779c262 100644 (file)
@@ -1,3 +1,19 @@
+2018-12-18  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        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-18  Ryosuke Niwa  <rniwa@webkit.org>
 
         Some iOS app crash in FrameLoader::checkCompleted
index 729cdef..7691cd0 100644 (file)
@@ -296,12 +296,15 @@ void TextDecorationPainter::paintTextDecoration(const TextRun& textRun, const Fl
         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);
index 8b8174a..bed2843 100644 (file)
@@ -125,6 +125,7 @@ GlyphOverflow visualOverflowForDecorations(const RenderStyle& lineStyle, const I
     }
 
     // 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 @@ GlyphOverflow visualOverflowForDecorations(const RenderStyle& lineStyle, const I
         }
     }
     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;
 }