Skip to content

Commit 306f08d

Browse files
dpvcdpvc
committed
Add test pages for nested tables with many of the possible combinations of labels, sizes, positioning, etc.
1 parent 9610124 commit 306f08d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+2822
-0
lines changed

‎samples/tables/lib/dual-tables.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
mjx-samples {
2+
position: relative;
3+
display: block;
4+
margin-bottom: 1em;
5+
}
6+
mjx-description {
7+
display: block;
8+
position: absolute;
9+
right: 0; top: 0; bottom: 0;
10+
width: 24%;
11+
border: 1px solid black;
12+
padding: .5em;
13+
}
14+
mjx-tables {
15+
display: block;
16+
width: 72%;
17+
border: 1px solid black;
18+
font-size: 150%;
19+
}
20+
mjx-tempalte {
21+
white-space: pre;
22+
padding: 5em;
23+
border: 2px solid black;
24+
}
25+
#navigation {
26+
position: fixed;
27+
top: 1em;
28+
right: 1em;
29+
background-color: white;
30+
padding: .5em;
31+
border: 1px solid black;
32+
}
33+
#navigation a {
34+
text-decoration: none;
35+
font-family: 'Times New Roman';
36+
}
37+
#navigation a[disabled] {
38+
pointer-events: none;
39+
color: #CCC;
40+
}

‎samples/tables/lib/dual-tables.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import {MathML} from "../../../mathjax3/input/mathml.js";
2+
import {CHTML} from "../../../mathjax3/output/chtml.js";
3+
import {SVG} from "../../../mathjax3/output/svg.js";
4+
import {HTMLMathItem} from "../../../mathjax3/handlers/html/HTMLMathItem.js";
5+
import {HTMLDocument} from "../../../mathjax3/handlers/html/HTMLDocument.js";
6+
import {handleRetriesFor} from "../../../mathjax3/util/Retries.js";
7+
import {browserAdaptor} from "../../../mathjax3/adaptors/browserAdaptor.js";
8+
9+
let mml = new MathML({forceReparse: true});
10+
let chtml = new CHTML({fontURL: '../../mathjax2/css/'});
11+
let svg = new SVG();
12+
13+
let docs = {
14+
CHTML: new HTMLDocument(document, browserAdaptor(), {InputJax: mml, OutputJax: chtml}),
15+
SVG: new HTMLDocument(document, browserAdaptor(), {InputJax: mml, OutputJax: svg})
16+
};
17+
18+
const samples = [
19+
'<mjx-samples>',
20+
'<mjx-description>',
21+
'',
22+
'</mjx-description>',
23+
'<mjx-tables>',
24+
'<mjx-chtml-table>',
25+
'',
26+
'</mjx-chtml-table>',
27+
'<mjx-svg-table>',
28+
'',
29+
'</mjx-svg-table>',
30+
'</mjx-tables>',
31+
'</mjx-samples>'
32+
];
33+
34+
const div = document.createElement('div');
35+
const template = document.getElementsByTagName('mjx-template')[0];
36+
37+
function CreateMathML() {
38+
const mathml = template.innerHTML;
39+
template.innerHTML = mathml.replace(/\&/g, '&amp;')
40+
.replace(/</g, '&lt;')
41+
.replace(/>/g, '&gt;')
42+
.replace(/\n/g, '<br/>')
43+
.replace(/\s/g, '\u00A0');
44+
Substitute(mathml, window.variables, '');
45+
}
46+
47+
function Substitute(mml, data, descr) {
48+
if (data.length === 0) {
49+
addMathML(mml, descr);
50+
} else {
51+
const n = data.length - 1;
52+
const [name, values] = data[n];
53+
const rest = data.slice(0, n);
54+
const re = new RegExp('\\{'+name+'\\}', 'g');
55+
for (const value of values) {
56+
Substitute(mml.replace(re, value), rest, name + ': <b>' + value + '</b><br/>' + descr);
57+
}
58+
}
59+
}
60+
61+
function addMathML(mml, descr) {
62+
samples[2] = descr;
63+
samples[6] = samples[9] = mml;
64+
div.innerHTML = samples.join('\n');
65+
template.parentNode.insertBefore(div.firstChild, template);
66+
}
67+
68+
CreateMathML();
69+
70+
function linkTables(n, m, arrow) {
71+
let N = String(n);
72+
if (N.length == 1) {
73+
N = '0' + N;
74+
}
75+
return '<a href="tables-' + N + '.html"' + (n === m ? ' disabled="true"' : '') + '>&#x' + arrow + ';</a>';
76+
}
77+
78+
const testNo = parseInt(this.location.pathname.match(/-(\d+)\.html$/)[1]);
79+
const maxTest = 60;
80+
81+
const nav = document.body.appendChild(document.createElement('div'));
82+
nav.id = "navigation";
83+
nav.innerHTML = [
84+
linkTables(testNo - 1, 0, '25C4'),
85+
linkTables(testNo + 1, maxTest + 1, '25BA')
86+
].join(' ');
87+
88+
89+
docs.CHTML
90+
.findMath({elements: ['mjx-chtml-table']})
91+
.compile()
92+
.getMetrics()
93+
.typeset()
94+
.updateDocument();
95+
docs.SVG
96+
.findMath({elements: ['mjx-svg-table']})
97+
.compile()
98+
.getMetrics()
99+
.typeset()
100+
.updateDocument();

‎samples/tables/tables-01.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>MathJax v3 Tables Sample 01</title>
5+
<link rel="stylesheet" type="text/css" href="lib/dual-tables.css">
6+
<script src="../../lib/traceur.min.js"></script>
7+
<script src="../../lib/system.js"></script>
8+
</head>
9+
<body>
10+
11+
<h1>MathJax v3 Tables Sample 01</h1>
12+
13+
<mjx-template>
14+
<math display="block" indentalign="{indentalign}">
15+
<mtable width="{width}" mathbackground="yellow">
16+
<mtr>
17+
<mtd mathbackground="green"><mi>a</mi></mtd>
18+
<mtd mathbackground="red"><mi>bbb</mi></mtd>
19+
</mtr>
20+
</mtable>
21+
</math>
22+
</mjx-template>
23+
24+
<script>
25+
var variables = [
26+
['indentalign', ['left', 'center', 'right']],
27+
['width', ['auto', '50%', '10em']]
28+
];
29+
</script>
30+
31+
<script>
32+
System.import('./lib/dual-tables.js').catch(function (error) {console.log(error.message)});
33+
</script>
34+
</body>
35+
</html>
36+
37+

‎samples/tables/tables-02.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>MathJax v3 Tables Sample 02</title>
5+
<link rel="stylesheet" type="text/css" href="lib/dual-tables.css">
6+
<script src="../../lib/traceur.min.js"></script>
7+
<script src="../../lib/system.js"></script>
8+
</head>
9+
<body>
10+
11+
<h1>MathJax v3 Tables Sample 02</h1>
12+
13+
<mjx-template>
14+
<math display="block" indentalign="{indentalign}">
15+
<mtable width="{width}" mathbackground="yellow" side="{side}">
16+
<mlabeledtr>
17+
<mtd><mtext>(1)</mtext></mtd>
18+
<mtd mathbackground="green"><mi>a</mi></mtd>
19+
<mtd mathbackground="red"><mi>bbb</mi></mtd>
20+
</mlabeledtr>
21+
</mtable>
22+
</math>
23+
</mjx-template>
24+
25+
<script>
26+
var variables = [
27+
['indentalign', ['left', 'center', 'right']],
28+
['width', ['auto', '50%', '10em']],
29+
['side', ['left', 'right']]
30+
];
31+
</script>
32+
33+
<script>
34+
System.import('./lib/dual-tables.js').catch(function (error) {console.log(error.message)});
35+
</script>
36+
</body>
37+
</html>
38+
39+

‎samples/tables/tables-03.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>MathJax v3 Tables Sample 03</title>
5+
<link rel="stylesheet" type="text/css" href="lib/dual-tables.css">
6+
<script src="../../lib/traceur.min.js"></script>
7+
<script src="../../lib/system.js"></script>
8+
</head>
9+
<body>
10+
11+
<h1>MathJax v3 Tables Sample 03</h1>
12+
13+
<mjx-template>
14+
<math display="block" indentalign="{indentalign}">
15+
<mtable width="{width}" mathbackground="yellow" equalcolumns="true">
16+
<mtr>
17+
<mtd mathbackground="green"><mi>a</mi></mtd>
18+
<mtd mathbackground="red"><mi>bbb</mi></mtd>
19+
</mtr>
20+
</mtable>
21+
</math>
22+
</mjx-template>
23+
24+
<script>
25+
var variables = [
26+
['indentalign', ['left', 'center', 'right']],
27+
['width', ['auto', '50%', '10em']]
28+
];
29+
</script>
30+
31+
<script>
32+
System.import('./lib/dual-tables.js').catch(function (error) {console.log(error.message)});
33+
</script>
34+
</body>
35+
</html>
36+
37+

‎samples/tables/tables-04.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>MathJax v3 Tables Sample 04</title>
5+
<link rel="stylesheet" type="text/css" href="lib/dual-tables.css">
6+
<script src="../../lib/traceur.min.js"></script>
7+
<script src="../../lib/system.js"></script>
8+
</head>
9+
<body>
10+
11+
<h1>MathJax v3 Tables Sample 04</h1>
12+
13+
<mjx-template>
14+
<math display="block" indentalign="{indentalign}">
15+
<mtable width="{width}" mathbackground="yellow" side="{side}" equalcolumns="true">
16+
<mlabeledtr>
17+
<mtd><mtext>(1)</mtext></mtd>
18+
<mtd mathbackground="green"><mi>a</mi></mtd>
19+
<mtd mathbackground="red"><mi>bbb</mi></mtd>
20+
</mlabeledtr>
21+
</mtable>
22+
</math>
23+
</mjx-template>
24+
25+
<script>
26+
var variables = [
27+
['indentalign', ['left', 'center', 'right']],
28+
['width', ['auto', '50%', '10em']],
29+
['side', ['left', 'right']]
30+
];
31+
</script>
32+
33+
<script>
34+
System.import('./lib/dual-tables.js').catch(function (error) {console.log(error.message)});
35+
</script>
36+
</body>
37+
</html>
38+
39+

‎samples/tables/tables-05.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>MathJax v3 Tables Sample 05</title>
5+
<link rel="stylesheet" type="text/css" href="lib/dual-tables.css">
6+
<script src="../../lib/traceur.min.js"></script>
7+
<script src="../../lib/system.js"></script>
8+
<style>
9+
mjx-tables {
10+
width: 50%;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
16+
<h1>MathJax v3 Tables Sample 05</h1>
17+
18+
<mjx-template>
19+
<math display="block" indentalign="{indentalign}">
20+
<mtable width="{width}" mathbackground="yellow" side="{side}"
21+
minlabelspacing="{minlabelspacing}">
22+
<mlabeledtr>
23+
<mtd><mtext>(1)</mtext></mtd>
24+
<mtd mathbackground="green"><mi>a</mi></mtd>
25+
<mtd mathbackground="red"><mi>bbb</mi></mtd>
26+
</mlabeledtr>
27+
</mtable>
28+
</math>
29+
</mjx-template>
30+
31+
<script>
32+
var variables = [
33+
['indentalign', ['left', 'center', 'right']],
34+
['side', ['left', 'right']],
35+
['minlabelspacing', ['1em', '0']],
36+
['width', ['100%', '25em']]
37+
];
38+
</script>
39+
40+
<script>
41+
System.import('./lib/dual-tables.js').catch(function (error) {console.log(error.message)});
42+
</script>
43+
</body>
44+
</html>
45+
46+

‎samples/tables/tables-06.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>MathJax v3 Tables Sample 06</title>
5+
<link rel="stylesheet" type="text/css" href="lib/dual-tables.css">
6+
<script src="../../lib/traceur.min.js"></script>
7+
<script src="../../lib/system.js"></script>
8+
<style>
9+
mjx-tables {
10+
width: 50%;
11+
margin-left: 2em;
12+
}
13+
svg {
14+
overflow: visible;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
20+
<h1>MathJax v3 Tables Sample 06</h1>
21+
22+
<mjx-template>
23+
<math display="block" indentalign="{indentalign}" indentshift="{indentshift}">
24+
<mtable mathbackground="yellow">
25+
<mtr>
26+
<mtd mathbackground="green"><mi>a</mi></mtd>
27+
<mtd mathbackground="red"><mi>bbb</mi></mtd>
28+
</mtr>
29+
</mtable>
30+
</math>
31+
</mjx-template>
32+
33+
<script>
34+
var variables = [
35+
['indentalign', ['left', 'center', 'right']],
36+
['indentshift', ['0em', '1em', '3em', '-1em', '-3em']]
37+
];
38+
</script>
39+
40+
<script>
41+
System.import('./lib/dual-tables.js').catch(function (error) {console.log(error.message)});
42+
</script>
43+
</body>
44+
</html>
45+
46+

0 commit comments

Comments
 (0)