зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1561220 [wpt PR 17486] - Add more tests for fraction gaps., a=testonly
Automatic update from web-platform-tests Add more tests for fraction gaps. (#17486) These tests check the gap parameters from https://mathml-refresh.github.io/mathml-core/#fractions-mfrac The existing frac-parameters-1 and frac-parameters-2 tests use mspace elements as numerator/denominator so the box returned by getBoundingClientRect() perfectly encloses the visual rendering of these elements. These versions rely on reftests to check when mtext elements are used as numerator/denominator with a font typo ascent/descent different from the actual glyph's bounding box ascent/descent. In each case, three glyphs are tested (centered, above or below the baseline). These tests pass on gecko/webkit but currently fail with the chromium-mathml build for glyphs that are not centered on the baseline. -- wpt-commits: ecc43f56d11b2485f17bf57c0db2031778d3eca9 wpt-pr: 17486
This commit is contained in:
Frédéric Wang
James Graham
Родитель
64e5271b73
Коммит
3963c0214d
Двоичный файл не отображается.
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters</title>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 20px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatordisplaystylegapmin5000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
|
||||
<mspace height="2em" depth="20em"/>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="1em" height="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="1em" depth="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters (display gap between bar and denominator)</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
|
||||
<link rel="match" href="frac-parameters-gap-001-ref.html"/>
|
||||
<meta name="assert" content="Element mfrac correctly uses the FractionDenomDisplayStyleGapMin parameter from the MATH table when denominator contains text.">
|
||||
<style>
|
||||
math, mspace, mtext {
|
||||
font-size: 20px;
|
||||
}
|
||||
mtext {
|
||||
font-family: math-text;
|
||||
color: blue;
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatordisplaystylegapmin5000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
/*
|
||||
math-text has the following properties:
|
||||
- typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
|
||||
- glyph A: .5em ascent and .5em descent.
|
||||
- glyph B: 1em ascent and 0em descent.
|
||||
- glyph C: 0em ascent and 1em descent.
|
||||
*/
|
||||
font-family: math-text;
|
||||
src: url("/fonts/math/math-text.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math display="block" style="font-family: denominatordisplaystylegapmin5000-rulethickness1000;">
|
||||
<!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
|
||||
<mspace height="2em" depth="20em"/>
|
||||
<!--
|
||||
All the fraction bars must be aligned.
|
||||
The gap between the denominators and bar must be FractionDenomDisplayStyleGapMin.
|
||||
The gap should be calculated using the exact bounding box of the glyphs.
|
||||
Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
|
||||
-->
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mtext>A</mtext>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mtext>B</mtext>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mtext>C</mtext>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters</title>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 20px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatorgapmin4000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math style="font-family: denominatorgapmin4000-rulethickness1000;">
|
||||
<mspace height="2em" depth="20em"/>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="1em" height="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace width="1em" depth="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters (inline gap between bar and denominator)</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
|
||||
<link rel="match" href="frac-parameters-gap-002-ref.html"/>
|
||||
<meta name="assert" content="Element mfrac correctly uses the FractionDenominatorGapMin parameter from the MATH table when denominator contains text.">
|
||||
<style>
|
||||
math, mspace, mtext {
|
||||
font-size: 20px;
|
||||
}
|
||||
mtext {
|
||||
font-family: math-text;
|
||||
color: blue;
|
||||
}
|
||||
@font-face {
|
||||
font-family: denominatorgapmin4000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-denominatorgapmin4000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
/*
|
||||
math-text has the following properties:
|
||||
- typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
|
||||
- glyph A: .5em ascent and .5em descent.
|
||||
- glyph B: 1em ascent and 0em descent.
|
||||
- glyph C: 0em ascent and 1em descent.
|
||||
*/
|
||||
font-family: math-text;
|
||||
src: url("/fonts/math/math-text.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math style="font-family: denominatorgapmin4000-rulethickness1000;">
|
||||
<!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
|
||||
<mspace height="2em" depth="20em"/>
|
||||
<!--
|
||||
All the fraction bars must be aligned.
|
||||
The gap between the denominators and bar must be FractionDenominatorGapMin.
|
||||
The gap should be calculated using the exact bounding box of the glyphs.
|
||||
Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
|
||||
-->
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mtext>A</mtext>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mtext>B</mtext>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="3em"/>
|
||||
<mtext>C</mtext>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters</title>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 20px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratordisplaystylegapmin8000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
|
||||
<mspace height="20em" depth="2em"/>
|
||||
<mfrac>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="1em" depth=".5em" height=".5em" style="background: blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="1em" height="1em" style="background: blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="1em" depth="1em" style="background: blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters (display gap between bar and numerator)</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
|
||||
<link rel="match" href="frac-parameters-gap-003-ref.html"/>
|
||||
<meta name="assert" content="Element mfrac correctly uses the FractionNumDisplayStyleGapMin parameter from the MATH table when numerator contains text.">
|
||||
<style>
|
||||
math, mspace, mtext {
|
||||
font-size: 20px;
|
||||
}
|
||||
mtext {
|
||||
font-family: math-text;
|
||||
color: blue;
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratordisplaystylegapmin8000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
/*
|
||||
math-text has the following properties:
|
||||
- typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
|
||||
- glyph A: .5em ascent and .5em descent.
|
||||
- glyph B: 1em ascent and 0em descent.
|
||||
- glyph C: 0em ascent and 1em descent.
|
||||
*/
|
||||
font-family: math-text;
|
||||
src: url("/fonts/math/math-text.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;">
|
||||
<!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
|
||||
<mspace height="20em" depth="2em"/>
|
||||
<!--
|
||||
All the fraction bars must be aligned.
|
||||
The gap between the numerators and bar must be FractionNumDisplayStyleGapMin.
|
||||
The gap should be calculated using the exact bounding box of the glyphs.
|
||||
Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
|
||||
-->
|
||||
<mfrac>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mtext>A</mtext>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mtext>B</mtext>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mtext>C</mtext>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters</title>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 20px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratorgapmin9000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math style="font-family: numeratorgapmin9000-rulethickness1000;">
|
||||
<mspace height="20em" depth="2em"/>
|
||||
<mfrac>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="1em" height="1em" style="background: blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mspace width="1em" depth="1em" style="background: blue"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters (inline gap between bar and numerator)</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
|
||||
<link rel="match" href="frac-parameters-gap-004-ref.html"/>
|
||||
<meta name="assert" content="Element mfrac correctly uses the FractionNumeratorGapMin parameter from the MATH table when numerator contains text.">
|
||||
<style>
|
||||
math, mspace, mtext {
|
||||
font-size: 20px;
|
||||
}
|
||||
mtext {
|
||||
font-family: math-text;
|
||||
color: blue;
|
||||
}
|
||||
@font-face {
|
||||
font-family: numeratorgapmin9000-rulethickness1000;
|
||||
src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff");
|
||||
}
|
||||
@font-face {
|
||||
/*
|
||||
math-text has the following properties:
|
||||
- typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
|
||||
- glyph A: .5em ascent and .5em descent.
|
||||
- glyph B: 1em ascent and 0em descent.
|
||||
- glyph C: 0em ascent and 1em descent.
|
||||
*/
|
||||
font-family: math-text;
|
||||
src: url("/fonts/math/math-text.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math style="font-family: numeratorgapmin9000-rulethickness1000;">
|
||||
<!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
|
||||
<mspace height="20em" depth="2em"/>
|
||||
<!--
|
||||
All the fraction bars must be aligned.
|
||||
The gap between the numerators and bar must be FractionNumeratorGapMin.
|
||||
The gap should be calculated using the exact bounding box of the glyphs.
|
||||
Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
|
||||
-->
|
||||
<mfrac>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mtext>A</mtext>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mtext>B</mtext>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
<mfrac>
|
||||
<mtext>C</mtext>
|
||||
<mspace width="3em"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters</title>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 20px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: displaystylegapmin4000;
|
||||
src: url("/fonts/math/stack-displaystylegapmin4000.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math display="block" style="font-family: displaystylegapmin4000">
|
||||
<mspace height="10em" depth="10em"/>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1.5em"/>
|
||||
<mspace width="1em" height="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth=".5em"/>
|
||||
<mspace width="1em" depth="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Stack parameters (display gap between numerator and denominator)</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
|
||||
<link rel="match" href="frac-parameters-gap-005-ref.html"/>
|
||||
<meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackDisplayStyleGapMin parameter from the MATH table when denominator contains text.">
|
||||
<style>
|
||||
math, mspace, mtext {
|
||||
font-size: 20px;
|
||||
}
|
||||
mtext {
|
||||
font-family: math-text;
|
||||
color: blue;
|
||||
}
|
||||
@font-face {
|
||||
font-family: displaystylegapmin4000;
|
||||
src: url("/fonts/math/stack-displaystylegapmin4000.woff");
|
||||
}
|
||||
@font-face {
|
||||
/*
|
||||
math-text has the following properties:
|
||||
- typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
|
||||
- glyph A: .5em ascent and .5em descent.
|
||||
- glyph B: 1em ascent and 0em descent.
|
||||
- glyph C: 0em ascent and 1em descent.
|
||||
*/
|
||||
font-family: math-text;
|
||||
src: url("/fonts/math/math-text.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math display="block" style="font-family: displaystylegapmin4000">
|
||||
<!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
|
||||
<mspace height="10em" depth="10em"/>
|
||||
<!--
|
||||
The gap between the numerators/denominators and the math axis must StackDisplayStyleGapMin / 2.
|
||||
The gap should be calculated using the exact bounding box of the glyphs.
|
||||
The numerator descent is .5em + the denominator ascent.
|
||||
Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
|
||||
-->
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mtext>A</mtext>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1.5em"/>
|
||||
<mtext>B</mtext>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth=".5em"/>
|
||||
<mtext>C</mtext>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Fraction parameters</title>
|
||||
<style>
|
||||
math, mspace {
|
||||
font-size: 20px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: gapmin8000;
|
||||
src: url("/fonts/math/stack-gapmin8000.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math style="font-family: gapmin8000">
|
||||
<mspace height="10em" depth="10em"/>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mspace width="1em" height=".5em" depth=".5em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1.5em"/>
|
||||
<mspace width="1em" height="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth=".5em"/>
|
||||
<mspace width="1em" depth="1em" style="background: blue"/>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Stack parameters (display gap between numerator and denominator)</title>
|
||||
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
|
||||
<link rel="match" href="frac-parameters-gap-006-ref.html"/>
|
||||
<meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackGapMin parameter from the MATH table when denominator contains text.">
|
||||
<style>
|
||||
math, mspace, mtext {
|
||||
font-size: 20px;
|
||||
}
|
||||
mtext {
|
||||
font-family: math-text;
|
||||
color: blue;
|
||||
}
|
||||
@font-face {
|
||||
font-family: gapmin8000;
|
||||
src: url("/fonts/math/stack-gapmin8000.woff");
|
||||
}
|
||||
@font-face {
|
||||
/*
|
||||
math-text has the following properties:
|
||||
- typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
|
||||
- glyph A: .5em ascent and .5em descent.
|
||||
- glyph B: 1em ascent and 0em descent.
|
||||
- glyph C: 0em ascent and 1em descent.
|
||||
*/
|
||||
font-family: math-text;
|
||||
src: url("/fonts/math/math-text.woff");
|
||||
}
|
||||
#reference {
|
||||
background: green;
|
||||
}
|
||||
#frame {
|
||||
position: absolute;
|
||||
border-top: 4px solid black;
|
||||
border-bottom: 4px solid black;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function runTests() {
|
||||
var div = document.getElementById("frame");
|
||||
var refBox = document.getElementById("reference").getBoundingClientRect();
|
||||
div.style.top = `${refBox.top-2}px`;
|
||||
div.style.height = `${refBox.height-4}px`;
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
}
|
||||
window.addEventListener("load", function() {
|
||||
// Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
|
||||
requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This test passes if the blue squares are aligned:
|
||||
</p>
|
||||
<p>
|
||||
<math style="font-family: gapmin8000">
|
||||
<!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
|
||||
<mspace height="10em" depth="10em"/>
|
||||
<!--
|
||||
The gap between the numerators/denominators and the math axis must StackGapMin / 2.
|
||||
The gap should be calculated using the exact bounding box of the glyphs.
|
||||
The numerator descent is .5em + the denominator ascent.
|
||||
Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
|
||||
-->
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mspace id="reference" width="3em" height=".5em" depth=".5em"/>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1em"/>
|
||||
<mtext>A</mtext>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth="1.5em"/>
|
||||
<mtext>B</mtext>
|
||||
</mfrac>
|
||||
<mfrac linethickness="0px">
|
||||
<mspace width="3em" depth=".5em"/>
|
||||
<mtext>C</mtext>
|
||||
</mfrac>
|
||||
</math>
|
||||
</p>
|
||||
<div id="frame"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
#!/usr/bin/python
|
||||
|
||||
from __future__ import print_function
|
||||
import fontforge
|
||||
|
||||
font = fontforge.font()
|
||||
font.em = 1000
|
||||
lineHeight = 5000
|
||||
name = "math-text"
|
||||
font.fontname = name
|
||||
font.familyname = name
|
||||
font.fullname = name
|
||||
font.copyright = "Copyright (c) 2019 Igalia"
|
||||
|
||||
glyph = font.createChar(ord(" "), "space")
|
||||
glyph.width = 1000
|
||||
glyph = font.createChar(ord("A"))
|
||||
pen = glyph.glyphPen()
|
||||
pen.moveTo(0, -500)
|
||||
pen.lineTo(0, 500)
|
||||
pen.lineTo(1000, 500)
|
||||
pen.lineTo(1000, -500)
|
||||
pen.closePath();
|
||||
|
||||
glyph = font.createChar(ord("B"))
|
||||
pen = glyph.glyphPen()
|
||||
pen.moveTo(0, 0)
|
||||
pen.lineTo(0, 1000)
|
||||
pen.lineTo(1000, 1000)
|
||||
pen.lineTo(1000, 0)
|
||||
pen.closePath();
|
||||
|
||||
glyph = font.createChar(ord("C"))
|
||||
pen = glyph.glyphPen()
|
||||
pen.moveTo(0, -1000)
|
||||
pen.lineTo(0, 0)
|
||||
pen.lineTo(1000, 0)
|
||||
pen.lineTo(1000, -1000)
|
||||
pen.closePath();
|
||||
|
||||
font.os2_typoascent_add = False
|
||||
font.os2_typoascent = lineHeight / 2
|
||||
font.os2_typodescent_add = False
|
||||
font.os2_typodescent = -lineHeight / 2
|
||||
font.os2_typolinegap = 0
|
||||
font.hhea_ascent = lineHeight / 2
|
||||
font.hhea_ascent_add = False
|
||||
font.hhea_descent = -lineHeight / 2
|
||||
font.hhea_descent_add = False
|
||||
font.hhea_linegap = 0
|
||||
font.os2_winascent = lineHeight / 2
|
||||
font.os2_winascent_add = False
|
||||
font.os2_windescent = lineHeight / 2
|
||||
font.os2_windescent_add = False
|
||||
|
||||
font.os2_use_typo_metrics = True
|
||||
|
||||
path = "../../fonts/math/math-text.woff"
|
||||
print("Generating %s..." % path, end="")
|
||||
font.generate(path)
|
||||
if font.validate() == 0:
|
||||
print(" done.")
|
||||
else:
|
||||
print(" validation error!")
|
||||
exit(1)
|
||||
Загрузка…
Ссылка в новой задаче