Skip to content

Commit

Permalink
Import WPT fraction tests from WebKit (#15301)
Browse files Browse the repository at this point in the history
See https://bugs.webkit.org/show_bug.cgi?id=194436
Tests have been reformatted and rewritten. The following are excluded:
- Tests have equivalent (and more reliable testing) in WPT.
- Tests that verify crashes/asserts, hangs or invalid markup.
  • Loading branch information
fred-wang authored and Ms2ger committed Feb 20, 2019
1 parent a51d2e7 commit b7cddec
Show file tree
Hide file tree
Showing 12 changed files with 404 additions and 0 deletions.
16 changes: 16 additions & 0 deletions mathml/presentation-markup/fractions/frac-color-001-notref.html
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fraction bar color</title>
</head>
<body style="font-size: 20pt;">
<p>This test passes if you see a fraction with a blue fraction bar.</p>
<math>
<mfrac>
<mspace width="200px" height="20px" style="background: black"></mspace>
<mspace width="200px" height="20px" style="background: black"></mspace>
</mfrac>
</math>
</body>
</html>
19 changes: 19 additions & 0 deletions mathml/presentation-markup/fractions/frac-color-001.html
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fraction bar color</title>
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
<meta name="assert" content="The CSS color property has an effect on the fraction bar.">
<link rel="mismatch" href="frac-color-001-notref.html">
</head>
<body style="font-size: 20pt;">
<p>This test passes if you see a fraction with a blue fraction bar.</p>
<math>
<mfrac style="color: blue;">
<mspace width="200px" height="20px" style="background: black"></mspace>
<mspace width="200px" height="20px" style="background: black"></mspace>
</mfrac>
</math>
</body>
</html>
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fractions linethickness</title>
<style type="text/css">
@font-face {
font-family: TestFont;
src: url("/fonts/math/fraction-rulethickness10000.woff");
}
math {
/* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
font-family: "TestFont";
font-size: 1px;
}
</style>
</head>
<body>
<p>This test passes if you see fractions with line thickness equal to the height of their blue numerator and cyan denominator.</p>
<math>
<mfrac linethickness="5px">
<mspace width="20px" height="5px" style="background: blue"></mspace>
<mspace width="20px" height="5px" style="background: cyan"></mspace>
</mfrac>
<mfrac linethickness="10px">
<mspace width="20px" height="10px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
<mfrac linethickness="20px">
<mspace width="20px" height="20px" style="background: blue"></mspace>
<mspace width="20px" height="20px" style="background: cyan"></mspace>
</mfrac>
<mfrac linethickness="50px">
<mspace width="20px" height="50px" style="background: blue"></mspace>
<mspace width="20px" height="50px" style="background: cyan"></mspace>
</mfrac>
</math>
</body>
</html>
42 changes: 42 additions & 0 deletions mathml/presentation-markup/fractions/frac-linethickness-001.html
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fractions linethickness</title>
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
<meta name="assert" content="Verifies 'thin', 'medium', 'thick' and unitless values for the linethickness attribute of the mfrac element">
<link rel="match" href="frac-linethickness-001-ref.html">
<style type="text/css">
@font-face {
font-family: TestFont;
src: url("/fonts/math/fraction-rulethickness10000.woff");
}
math {
/* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
font-family: "TestFont";
font-size: 1px;
}
</style>
</head>
<body>
<p>This test passes if you see fractions with line thickness equal to the height of their blue numerator and cyan denominator.</p>
<math>
<mfrac linethickness="thin">
<mspace width="20px" height="5px" style="background: blue"></mspace>
<mspace width="20px" height="5px" style="background: cyan"></mspace>
</mfrac>
<mfrac linethickness="medium">
<mspace width="20px" height="10px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
<mfrac linethickness="thick">
<mspace width="20px" height="20px" style="background: blue"></mspace>
<mspace width="20px" height="20px" style="background: cyan"></mspace>
</mfrac>
<mfrac linethickness="5">
<mspace width="20px" height="50px" style="background: blue"></mspace>
<mspace width="20px" height="50px" style="background: cyan"></mspace>
</mfrac>
</math>
</body>
</html>
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fractions linethickness</title>
<style type="text/css">
@font-face {
font-family: TestFont;
src: url("/fonts/math/fraction-rulethickness10000.woff");
}
math {
/* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
font-family: "TestFont";
font-size: 1px;
}
</style>
</head>
<body>
<p>This test passes if you see fraction with a cyan denominator and
a blue numerator as tall as its black bar.</p>
<math>
<mfrac linethickness="0px">
<mspace width="20px" height="0px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
</math>
<math>
<mfrac linethickness="50px">
<mspace width="20px" height="50px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
</math>
<math style="font-size: 180px">
<mfrac linethickness="0.3888888888888889em">
<mspace width="20px" height="70px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
</math>
</body>
</html>
43 changes: 43 additions & 0 deletions mathml/presentation-markup/fractions/frac-linethickness-002.html
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fractions linethickness</title>
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
<meta name="assert" content="Verifies fraction with negative, percent and named space linethickness values.">
<link rel="match" href="frac-linethickness-002-ref.html">
<style type="text/css">
@font-face {
font-family: TestFont;
src: url("/fonts/math/fraction-rulethickness10000.woff");
}
math {
/* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */
font-family: "TestFont";
font-size: 1px;
}
</style>
</head>
<body>
<p>This test passes if you see fraction with a cyan denominator and
a blue numerator as tall as its black bar.</p>
<math>
<mfrac linethickness="-1.23em">
<mspace width="20px" height="0px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
</math>
<math>
<mfrac linethickness="500%">
<mspace width="20px" height="50px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
</math>
<math style="font-size: 180px">
<mfrac linethickness="veryverythickmathspace">
<mspace width="20px" height="70px" style="background: blue"></mspace>
<mspace width="20px" height="10px" style="background: cyan"></mspace>
</mfrac>
</math>
</body>
</html>
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fractions linethickness</title>
</head>
<body>
<p>This test passes if you see a fraction without fraction bar.</p>
<math>
<mfrac>
<mspace width="20px" height="5px" style="background: blue"></mspace>
<mspace width="20px" height="5px" style="background: cyan"></mspace>
</mfrac>
</math>
</body>
</html>
19 changes: 19 additions & 0 deletions mathml/presentation-markup/fractions/frac-linethickness-003.html
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fractions linethickness</title>
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
<meta name="assert" content="Verifies fraction with 0px bar.">
<link rel="mismatch" href="frac-linethickness-003-notref.html">
</head>
<body>
<p>This test passes if you see a fraction without fraction bar.</p>
<math>
<mfrac linethickness="0px">
<mspace width="20px" height="5px" style="background: blue"></mspace>
<mspace width="20px" height="5px" style="background: cyan"></mspace>
</mfrac>
</math>
</body>
</html>
16 changes: 16 additions & 0 deletions mathml/presentation-markup/fractions/frac-mrow-001-ref.html
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fraction mrow</title>
</head>
<body style="font-size: 20pt;">
<p>This test passes if you see a fraction with a blue square as numerator and a cyan square as denominator.</p>
<math>
<mfrac>
<mspace width="60px" height="60px" style="background: blue"></mspace>
<mspace width="60px" height="60px" style="background: cyan"></mspace>
</mfrac>
</math>
</body>
</html>
25 changes: 25 additions & 0 deletions mathml/presentation-markup/fractions/frac-mrow-001.html
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fraction mrow</title>
<link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#SS3.SSS2">
<meta name="assert" content="This test that <mrow> elements can be used as numerator and denominator of fractions.">
<link rel="match" href="frac-mrow-001-ref.html">
</head>
<body style="font-size: 20pt;">
<p>This test passes if you see a fraction with a blue square as numerator and a cyan square as denominator.</p>
<math>
<mfrac>
<mrow>
<mspace width="30px" height="60px" style="background: blue"></mspace>
<mspace width="30px" height="60px" style="background: blue "></mspace>
</mrow>
<mrow>
<mspace width="30px" height="60px" style="background: cyan"></mspace>
<mspace width="30px" height="60px" style="background: cyan "></mspace>
</mrow>
</mfrac>
</math>
</body>
</html>
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fraction numalign denomalign</title>
</head>
<body>
<p>This test passes if you see 3 fractions with a numerator respectively
aligned left/center/right with respect to the denominator ;
followed by 3 fractions with a denominator respectively aligned
left/center/right with respect to the numerator.</p>
<p>
<math>
<mfrac>
<mrow>
<mspace width="10px" height="20px" style="background: blue;"></mspace>
<mspace width="20px" height="20px"></mspace>
</mrow>
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
</mfrac>
</math>
<math>
<mfrac>
<mrow>
<mspace width="10px" height="20px"></mspace>
<mspace width="10px" height="20px" style="background: blue;"></mspace>
<mspace width="10px" height="20px"></mspace>
</mrow>
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
</mfrac>
</math>
<math>
<mfrac>
<mrow>
<mspace width="20px" height="20px"></mspace>
<mspace width="10px" height="20px" style="background: blue;"></mspace>
</mrow>
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
</mfrac>
</math>
</p>
<p>
<math>
<mfrac>
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
<mrow>
<mspace width="10px" height="20px" style="background: blue;"></mspace>
<mspace width="20px" height="20px"></mspace>
</mrow>
</mfrac>
</math>
<math>
<mfrac>
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
<mrow>
<mspace width="10px" height="20px"></mspace>
<mspace width="10px" height="20px" style="background: blue;"></mspace>
<mspace width="10px" height="20px"></mspace>
</mrow>
</mfrac>
</math>
<math>
<mfrac>
<mspace width="30px" height="20px" style="background: cyan;"></mspace>
<mrow>
<mspace width="20px" height="20px"></mspace>
<mspace width="10px" height="20px" style="background: blue;"></mspace>
</mrow>
</mfrac>
</math>
</p>
</body>
</html>

0 comments on commit b7cddec

Please sign in to comment.