101 lines
3.1 KiB
HTML
101 lines
3.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Token elements - dynamic changes</title>
|
|
<meta charset="utf-8"/>
|
|
<style type="text/css">
|
|
#styled > mo { color: red; }
|
|
#styled > mi { color: green; }
|
|
#styled > mi ~ * { color: blue; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
function newText(t)
|
|
{
|
|
return document.createTextNode(t);
|
|
}
|
|
|
|
function test()
|
|
{
|
|
var mi = document.getElementsByTagName("mi");
|
|
var mo = document.getElementsByTagName("mo");
|
|
|
|
// Test 1
|
|
mi[0].textContent = "sin";
|
|
mi[1].textContent = "x";
|
|
mi[2].appendChild(newText("cos"));
|
|
mi[3].appendChild(newText("y"));
|
|
mi[4].textContent = "a";
|
|
mi[4].insertBefore(newText("t"), mi[4].firstChild);
|
|
mi[4].appendChild(newText("n"));
|
|
mi[5].appendChild(newText("oo"));
|
|
mi[5].insertBefore(newText("z"), mi[5].firstChild);
|
|
mi[5].removeChild(mi[5].lastChild);
|
|
|
|
// Test 2
|
|
mo[0].textContent = "+";
|
|
mo[1].appendChild(newText("-"));
|
|
mo[2].textContent = "(";
|
|
mo[3].appendChild(newText("]"));
|
|
mo[4].appendChild(newText("-"));
|
|
mo[4].insertBefore(newText("+"), mo[4].firstChild);
|
|
mo[4].removeChild(mo[4].lastChild);
|
|
mo[5].appendChild(newText("|"));
|
|
mo[5].appendChild(newText("{"));
|
|
mo[5].removeChild(mo[5].firstChild);
|
|
|
|
// Test 3
|
|
mi[6].setAttribute("mathvariant", "bold");
|
|
mi[7].setAttribute("mathvariant", "italic");
|
|
mi[8].removeAttribute("mathvariant");
|
|
mi[9].removeAttribute("mathvariant");
|
|
|
|
// Test 4
|
|
mo[6].setAttribute("stretchy", "false");
|
|
mo[7].removeAttribute("stretchy");
|
|
|
|
// Test 5
|
|
document.getElementById("unstyled").setAttribute("id", "styled");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="test()">
|
|
|
|
<!-- These tests perform dynamic changes on mi and mo token elements. They should render the same as the static reference. -->
|
|
|
|
<!-- Test 1 -->
|
|
<!-- FIXME: single-char <mi> should be italic. -->
|
|
<p style="display: none;">
|
|
<math><mi></mi><mi></mi></math>
|
|
<math><mi></mi><mi></mi></math>
|
|
<math><mi></mi><mi></mi></math>
|
|
</p>
|
|
|
|
<!-- Test 2 -->
|
|
<p>
|
|
<math><mn>1</mn><mo></mo><mn>2</mn><mo></mo><mn>3</mn></math>
|
|
<math><mo></mo><msqrt><mfrac><mn>4</mn><mn>5</mn></mfrac></msqrt><mo></mo></math>
|
|
<math><mo></mo><mo></mo><mfrac><mfrac><mn>6</mn><mn>7</mn></mfrac><mfrac><mn>8</mn><mn>9</mn></mfrac></mfrac></math>
|
|
</p>
|
|
|
|
<!-- Test 3 -->
|
|
<p>
|
|
<math><mi>x</mi></math>
|
|
<math><mi>sin</mi></math>
|
|
<math><mi mathvariant="bold">x</mi></math>
|
|
<math><mi mathvariant="italic">sin</mi></math>
|
|
</p>
|
|
|
|
<!-- Test 4 -->
|
|
<p>
|
|
<math><mo>{</mo><mfrac><mfrac><mn>6</mn><mn>7</mn></mfrac><mfrac><mn>8</mn><mn>9</mn></mfrac></mfrac></math>
|
|
<math><mo stretchy="false">{</mo><mfrac><mfrac><mn>6</mn><mn>7</mn></mfrac><mfrac><mn>8</mn><mn>9</mn></mfrac></mfrac></math>
|
|
</p>
|
|
|
|
<!-- Test 5 -->
|
|
<p>
|
|
<math id="unstyled"><mo>-</mo><mi>sin</mi><mi>x</mi></math>
|
|
</p>
|
|
|
|
</body>
|
|
</html>
|