Skip to content

Commit

Permalink
Support padding/border/margin on RenderMathMLToken
Browse files Browse the repository at this point in the history
https://bugs.webkit.org/show_bug.cgi?id=276317

Reviewed by Rob Buis.

This patch imports the WPT reftest from [1] and implements
padding/border/margin for RenderMathMLToken when a mathVariantGlyph is
used. That improves the rendering of the test but is not enough to
make it pass [2].

[1] web-platform-tests/wpt@8d6df04
[2] https://bugs.webkit.org/show_bug.cgi?id=276413

Canonical link: https://commits.webkit.org/280851@main
  • Loading branch information
fred-wang committed Jul 11, 2024
1 parent 2e66761 commit 7099dcb
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 6 deletions.
1 change: 1 addition & 0 deletions LayoutTests/TestExpectations
Original file line number Diff line number Diff line change
Expand Up @@ -1828,6 +1828,7 @@ imported/w3c/web-platform-tests/mathml/relations/css-styling/floats/floating-ins
imported/w3c/web-platform-tests/mathml/relations/css-styling/mathvariant-basic-transforms-with-default-font.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/mathml/relations/css-styling/mathvariant-double-struck-font-style-font-weight.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/mathml/relations/css-styling/mi-fontstyle-fontweight.html [ ImageOnlyFailure ]
webkit.org/b/276413 imported/w3c/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-004.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-002.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/mathml/relations/css-styling/width-height-003.html [ ImageOnlyFailure ]

Expand Down
1 change: 1 addition & 0 deletions LayoutTests/imported/w3c/resources/resource-files.json
Original file line number Diff line number Diff line change
Expand Up @@ -8056,6 +8056,7 @@
"web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-001-ref.html",
"web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-002-ref.html",
"web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html",
"web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-004-ref.html",
"web-platform-tests/mathml/relations/css-styling/presentational-hints-001-ref.html",
"web-platform-tests/mathml/relations/css-styling/presentational-hints-002-ref.html",
"web-platform-tests/mathml/relations/css-styling/transform-ref.html",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Padding/border/margin on an mi with italic mathvariant (reference)</title>
<style>
@font-face {
font-family: TestFont;
src: url("/fonts/math/mathvariant-italic.woff");
}
math {
font-family: TestFont;
font-size: 300px;
}
</style>
<body>
<p>This test passes if you see the text <code>1d434</code> in cyan on a blue
background, surrounded by a 10px padding, surrounded by a 10px
yellow dashed border, itself surrounded by a 10px pink margin.</p>
<div style="background: pink; position: absolute; left: 10px; top: 4em;">
<math>
<mtext style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">&#x1D434;</mtext>
</math>
</div>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Padding/border/margin on an mi with italic mathvariant (reference)</title>
<style>
@font-face {
font-family: TestFont;
src: url("/fonts/math/mathvariant-italic.woff");
}
math {
font-family: TestFont;
font-size: 300px;
}
</style>
<body>
<p>This test passes if you see the text <code>1d434</code> in cyan on a blue
background, surrounded by a 10px padding, surrounded by a 10px
yellow dashed border, itself surrounded by a 10px pink margin.</p>
<div style="background: pink; position: absolute; left: 10px; top: 4em;">
<math>
<mtext style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">&#x1D434;</mtext>
</math>
</div>
</body>
</html>
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Padding/border/margin on an mi with italic mathvariant</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms">
<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
<link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute">
<link rel="help" href="https://w3c.github.io/mathml-core/#new-text-transform-values">
<link rel="help" href="https://w3c.github.io/mathml-core/#italic-mappings">
<link rel="match" href="padding-border-margin-004-ref.html"/>
<meta name="assert" content="Verify visual rendering of padding/border/margin on an mi with italic mathvariant.">
<style>
@font-face {
font-family: TestFont;
src: url("/fonts/math/mathvariant-italic.woff");
}
math {
font-family: TestFont;
font-size: 300px;
}
</style>
<body>
<p>This test passes if you see the text <code>1d434</code> in cyan on a blue
background, surrounded by a 10px padding, surrounded by a 10px
yellow dashed border, itself surrounded by a 10px pink margin.</p>
<div style="background: pink; position: absolute; left: 10px; top: 4em;">
<math>
<mi style="background: blue; border: 10px dashed yellow; padding: 10px; margin: 10px; color: cyan;">&#x41;</mi>
</math>
</div>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,6 @@ List of files:
/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-expected.html
/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003-ref.html
/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-003.html
/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-004-expected.html
/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-004-ref.html
/LayoutTests/imported/w3c/web-platform-tests/mathml/relations/css-styling/padding-border-margin/padding-border-margin-004.html
12 changes: 6 additions & 6 deletions Source/WebCore/rendering/mathml/RenderMathMLToken.cpp
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@ void RenderMathMLToken::computePreferredLogicalWidths()
if (m_mathVariantCodePoint) {
auto mathVariantGlyph = style().fontCascade().glyphDataForCharacter(m_mathVariantCodePoint.value(), m_mathVariantIsMirrored);
if (mathVariantGlyph.font) {
m_maxPreferredLogicalWidth = m_minPreferredLogicalWidth = mathVariantGlyph.font->widthForGlyph(mathVariantGlyph.glyph);
m_maxPreferredLogicalWidth = m_minPreferredLogicalWidth = mathVariantGlyph.font->widthForGlyph(mathVariantGlyph.glyph) + borderAndPaddingLogicalWidth();
setPreferredLogicalWidthsDirty(false);
return;
}
Expand Down Expand Up @@ -564,7 +564,7 @@ std::optional<LayoutUnit> RenderMathMLToken::firstLineBaseline() const
if (m_mathVariantCodePoint) {
auto mathVariantGlyph = style().fontCascade().glyphDataForCharacter(m_mathVariantCodePoint.value(), m_mathVariantIsMirrored);
if (mathVariantGlyph.font)
return LayoutUnit { static_cast<int>(lroundf(-mathVariantGlyph.font->boundsForGlyph(mathVariantGlyph.glyph).y())) };
return LayoutUnit { static_cast<int>(lroundf(-mathVariantGlyph.font->boundsForGlyph(mathVariantGlyph.glyph).y())) } + borderAndPaddingBefore();
}
return RenderMathMLBlock::firstLineBaseline();
}
Expand All @@ -590,11 +590,11 @@ void RenderMathMLToken::layoutBlock(bool relayoutChildren, LayoutUnit pageLogica
return;
}

recomputeLogicalWidth();
for (auto* child = firstChildBox(); child; child = child->nextSiblingBox())
child->layoutIfNeeded();

setLogicalWidth(LayoutUnit(mathVariantGlyph.font->widthForGlyph(mathVariantGlyph.glyph)));
setLogicalHeight(LayoutUnit(mathVariantGlyph.font->boundsForGlyph(mathVariantGlyph.glyph).height()));
setLogicalWidth(LayoutUnit(mathVariantGlyph.font->widthForGlyph(mathVariantGlyph.glyph)) + borderAndPaddingLogicalWidth());
setLogicalHeight(LayoutUnit(mathVariantGlyph.font->boundsForGlyph(mathVariantGlyph.glyph).height()) + borderAndPaddingLogicalHeight());

layoutPositionedObjects(relayoutChildren);

Expand All @@ -621,7 +621,7 @@ void RenderMathMLToken::paint(PaintInfo& info, const LayoutPoint& paintOffset)
LayoutUnit glyphAscent = static_cast<int>(lroundf(-mathVariantGlyph.font->boundsForGlyph(mathVariantGlyph.glyph).y()));
// FIXME: If we're just drawing a single glyph, why do we need to compute an advance?
auto advance = makeGlyphBufferAdvance(mathVariantGlyph.font->widthForGlyph(mathVariantGlyph.glyph));
info.context().drawGlyphs(*mathVariantGlyph.font, &mathVariantGlyph.glyph, &advance, 1, paintOffset + location() + LayoutPoint(0_lu, glyphAscent), style().fontCascade().fontDescription().usedFontSmoothing());
info.context().drawGlyphs(*mathVariantGlyph.font, &mathVariantGlyph.glyph, &advance, 1, paintOffset + location() + LayoutPoint(borderLeft() + paddingLeft(), glyphAscent + borderAndPaddingBefore()), style().fontCascade().fontDescription().usedFontSmoothing());
}

void RenderMathMLToken::paintChildren(PaintInfo& paintInfo, const LayoutPoint& paintOffset, PaintInfo& paintInfoForChild, bool usePrintRect)
Expand Down

0 comments on commit 7099dcb

Please sign in to comment.