Attachment #274414 for bug #133567

View Details Raw Unified Return to Bug 133567

| Differences between



2016-03-18  Frederic Wang  <fwang@igalia.com>

        Use OpenType MATH constant AxisHeight.
        https://bugs.webkit.org/show_bug.cgi?id=133567

        Reviewed by NOBODY (OOPS!).

        We add a simple reftest to verify that the AxisHeight parameter is used to align the middle of <mtable> elements.

        * mathml/opentype/axisheight7000.woff: Added.
        * mathml/opentype/table-align-axis-expected.html: Added.
        * mathml/opentype/table-align-axis.html: Added.

2016-03-17  Frederic Wang  <fwang@igalia.com>

        Add support for mathvariants that cannot be emulated via CSS.



<html>
  <head>
    <title>table align axis</title>
    <meta charset="utf-8">
    <style type="text/css">
      /* For Latin Modern Math
         AxisHeight = 7000 * 5 / 1000 = 35px;
       */
      @font-face {
        font-family: axisheight;
        src: url("axisheight7000.woff");
      }
      math {
        font-family: axisheight;
        font-size: 5px;
      }
    </style>
  </head>
  <body>

    <div style="position: absolute; left: 0px; top: -35px;">
      <math>
        <mspace height="100px" depth="100px" width="1px" mathbackground="black"/>
        <mspace width="100px" height="2px" depth="2px" mathbackground="green"/>
      </math>
    </div>

  </body>
</html>



<html>
  <head>
    <title>table align axis</title>
    <meta charset="utf-8">
    <style type="text/css">
      /* For Latin Modern Math
         AxisHeight = 7000 * 5 / 1000 = 35px;
       */
      @font-face {
        font-family: axisheight;
        src: url("axisheight7000.woff");
      }
      math {
        font-family: axisheight;
        font-size: 5px;
      }
    </style>
  </head>
  <body>

    <!-- This test passes if the red bar is hidden by the green bar -->
    <div style="position: absolute; left: 0px; top: 0px;">
      <math>
        <mspace height="100px" depth="100px" width="1px"/>
        <mtable>
          <mtr><mtd><mspace width="50px"/></mtd></mtr>
          <mtr><mtd><mspace mathbackground="red" width="50px" height="1px" depth="1px"/></mtd></mtr>
          <mtr><mtd><mspace width="50px"/></mtd></mtr>
        </mfrac>
      </math>
    </div>

    <!-- This green bar is moved up by AxisHeight and is a bit thicker than the red bar to tolerate rounding errors. -->
    <div style="position: absolute; left: 0px; top: -35px;">
      <math>
        <mspace height="100px" depth="100px" width="1px" mathbackground="black"/>
        <mspace width="100px" height="2px" depth="2px" mathbackground="green"/>
      </math>
    </div>

  </body>
</html>



2016-03-18  Frederic Wang  <fwang@igalia.com>

        Use OpenType MATH constant AxisHeight.
        https://bugs.webkit.org/show_bug.cgi?id=133567

        Reviewed by NOBODY (OOPS!).

        Test: mathml/opentype/table-align-axis.html

        We make RenderMathMLTable use the OpenType MATH constant AxisHeight.
        This is the only remaining case to handle since RenderMathMLFraction and RenderMathMLOperator already use that constant.

        * rendering/mathml/RenderMathMLBlock.cpp: Make RenderMathMLTable use the math axis for its vertical alignment and update a bit the comments.
        (WebCore::axisHeight): Move the code in a static function that can be called by RenderMathMLBlock and RenderMathMLTable.
        (WebCore::RenderMathMLBlock::getMathAxisHeight): Use axisHeight.
        (WebCore::RenderMathMLTable::firstLineBaseline): Ditto.

2016-03-17  Frederic Wang  <fwang@igalia.com>

        Add support for mathvariants that cannot be emulated via CSS.



    return is<Element>(child.node());
}

static LayoutUnit axisHeight(const RenderStyle& style)
{
    // If we have a MATH table we just return the AxisHeight constant.
    const auto& primaryFont = style.fontCascade().primaryFont();
    if (auto* mathData = primaryFont.mathData())
        return mathData->getMathConstant(primaryFont, OpenTypeMathData::AxisHeight);

    // Otherwise, the idea is to try and use the middle of operators as the math axis which we thus approximate by "half of the x-height".
    // Note that Gecko has a slower but more accurate version that measures half of the height of U+2212 MINUS SIGN.
    return style.fontMetrics().xHeight() / 2;
}

LayoutUnit RenderMathMLBlock::getMathAxisHeight() const
{
    return axisHeight(style());
}

LayoutUnit RenderMathMLBlock::mirrorIfNeeded(LayoutUnit horizontalOffset, LayoutUnit boxWidth) const


Optional<int> RenderMathMLTable::firstLineBaseline() const
{
    // By default the vertical center of <mtable> is aligned on the math axis.
    // This is different than RenderTable::firstLineBoxBaseline, which returns the baseline of the first row of a <table>.
    return Optional<int>(logicalHeight() / 2 + axisHeight(style()));
    return (logicalHeight() + style().fontMetrics().xHeight()) / 2;
}

void RenderMathMLBlock::layoutItems(bool relayoutChildren)

Return to Bug 133567

Lines 67-79 bool RenderMathMLBlock::isChildAllowed(const RenderObject& child, const RenderSt a/Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp_sec1
- a/Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp -7 / +14 lines
67	return is<Element>(child.node());	67	return is<Element>(child.node());
68	}	68	}
69		69
70	LayoutUnit RenderMathMLBlock::getMathAxisHeight() const	70	static LayoutUnit axisHeight(const RenderStyle& style)
71	{	71	{
72	const auto& primaryFont = style().fontCascade().primaryFont();	72	// If we have a MATH table we just return the AxisHeight constant.
		73	const auto& primaryFont = style.fontCascade().primaryFont();
73	if (auto* mathData = primaryFont.mathData())	74	if (auto* mathData = primaryFont.mathData())
74	return mathData->getMathConstant(primaryFont, OpenTypeMathData::AxisHeight);	75	return mathData->getMathConstant(primaryFont, OpenTypeMathData::AxisHeight);
75		76
76	return style().fontMetrics().xHeight() / 2;	77	// Otherwise, the idea is to try and use the middle of operators as the math axis which we thus approximate by "half of the x-height".
		78	// Note that Gecko has a slower but more accurate version that measures half of the height of U+2212 MINUS SIGN.
		79	return style.fontMetrics().xHeight() / 2;
		80	}
		81
		82	LayoutUnit RenderMathMLBlock::getMathAxisHeight() const
		83	{
		84	return axisHeight(style());
77	}	85	}
78		86
79	LayoutUnit RenderMathMLBlock::mirrorIfNeeded(LayoutUnit horizontalOffset, LayoutUnit boxWidth) const	87	LayoutUnit RenderMathMLBlock::mirrorIfNeeded(LayoutUnit horizontalOffset, LayoutUnit boxWidth) const
Lines 304-313 bool parseMathMLNamedSpace(const String& string, LayoutUnit& lengthValue, const a/Source/WebCore/rendering/mathml/RenderMathMLBlock.cpp_sec2
304		312
305	Optional<int> RenderMathMLTable::firstLineBaseline() const	313	Optional<int> RenderMathMLTable::firstLineBaseline() const
306	{	314	{
307	// In legal MathML, we'll have a MathML parent. That RenderFlexibleBox parent will use our firstLineBaseline() for baseline alignment, per	315	// By default the vertical center of <mtable> is aligned on the math axis.
308	// http://dev.w3.org/csswg/css3-flexbox/#flex-baselines. We want to vertically center an <mtable>, such as a matrix. Essentially the whole <mtable> element fits on a	316	// This is different than RenderTable::firstLineBoxBaseline, which returns the baseline of the first row of a <table>.
309	// single line, whose baseline gives this centering. This is different than RenderTable::firstLineBoxBaseline, which returns the baseline of the first row of a <table>.	317	return Optional<int>(logicalHeight() / 2 + axisHeight(style()));
310	return (logicalHeight() + style().fontMetrics().xHeight()) / 2;
311	}	318	}
312		319
313	void RenderMathMLBlock::layoutItems(bool relayoutChildren)	320	void RenderMathMLBlock::layoutItems(bool relayoutChildren)

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +13 lines
		1	2016-03-18 Frederic Wang <fwang@igalia.com>
		2
		3	Use OpenType MATH constant AxisHeight.
		4	https://bugs.webkit.org/show_bug.cgi?id=133567
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	We add a simple reftest to verify that the AxisHeight parameter is used to align the middle of <mtable> elements.
		9
		10	* mathml/opentype/axisheight7000.woff: Added.
		11	* mathml/opentype/table-align-axis-expected.html: Added.
		12	* mathml/opentype/table-align-axis.html: Added.
		13
1	2016-03-17 Frederic Wang <fwang@igalia.com>	14	2016-03-17 Frederic Wang <fwang@igalia.com>
2		15
3	Add support for mathvariants that cannot be emulated via CSS.	16	Add support for mathvariants that cannot be emulated via CSS.

Line 0 a/LayoutTests/mathml/opentype/table-align-axis-expected.html_sec1
- a/LayoutTests/mathml/opentype/table-align-axis-expected.html +29 lines
	1	<html>
	2	<head>
	3	<title>table align axis</title>
	4	<meta charset="utf-8">
	5	<style type="text/css">
	6	/* For Latin Modern Math
	7	AxisHeight = 7000 * 5 / 1000 = 35px;
	8	*/
	9	@font-face {
	10	font-family: axisheight;
	11	src: url("axisheight7000.woff");
	12	}
	13	math {
	14	font-family: axisheight;
	15	font-size: 5px;
	16	}
	17	</style>
	18	</head>
	19	<body>
	20
	21	<div style="position: absolute; left: 0px; top: -35px;">
	22	<math>
	23	<mspace height="100px" depth="100px" width="1px" mathbackground="black"/>
	24	<mspace width="100px" height="2px" depth="2px" mathbackground="green"/>
	25	</math>
	26	</div>
	27
	28	</body>
	29	</html>

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +17 lines
		1	2016-03-18 Frederic Wang <fwang@igalia.com>
		2
		3	Use OpenType MATH constant AxisHeight.
		4	https://bugs.webkit.org/show_bug.cgi?id=133567
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	Test: mathml/opentype/table-align-axis.html
		9
		10	We make RenderMathMLTable use the OpenType MATH constant AxisHeight.
		11	This is the only remaining case to handle since RenderMathMLFraction and RenderMathMLOperator already use that constant.
		12
		13	* rendering/mathml/RenderMathMLBlock.cpp: Make RenderMathMLTable use the math axis for its vertical alignment and update a bit the comments.
		14	(WebCore::axisHeight): Move the code in a static function that can be called by RenderMathMLBlock and RenderMathMLTable.
		15	(WebCore::RenderMathMLBlock::getMathAxisHeight): Use axisHeight.
		16	(WebCore::RenderMathMLTable::firstLineBaseline): Ditto.
		17
1	2016-03-17 Frederic Wang <fwang@igalia.com>	18	2016-03-17 Frederic Wang <fwang@igalia.com>
2		19
3	Add support for mathvariants that cannot be emulated via CSS.	20	Add support for mathvariants that cannot be emulated via CSS.