Thick overlines and line-throughs grow in the wrong direction
authormmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 4 Dec 2018 03:54:49 +0000 (03:54 +0000)
committermmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 4 Dec 2018 03:54:49 +0000 (03:54 +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@238838 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 4b867b8..55e8205 100644 (file)
@@ -1,3 +1,15 @@
+2018-12-03  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-03  Ryan Haddad  <ryanhaddad@apple.com>
 
         [css-grid] Crash on debug changing the style of a positioned element
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..5001c71
--- /dev/null
@@ -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>
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..c10f09b
--- /dev/null
@@ -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>
index 5eaeee0..df09864 100644 (file)
@@ -1,3 +1,19 @@
+2018-12-03  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-03  Simon Fraser  <simon.fraser@apple.com>
 
         Viewport-constrained renderers are always RenderLayerModelObjects
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;
 }