| <!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> |
