| <!doctype HTML> |
| <html> |
| <head> |
| <title>Test of HTML5 nav element</title> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| </script> |
| |
| <style> |
| nav { border: 1px solid green; padding: 2px; } |
| p > nav { border: 3px solid red; } |
| nav > p { border: 1px solid green; } |
| p { margin: 0px; } |
| </style> |
| |
| </head> |
| <body> |
| |
| <h4>Test content</h4> |
| |
| <div id=testArea> |
| <p><nav>Test that <code>nav</code> closes <code>p</code>. This paragraph should be surrounded by a thin green border, instead of a thick red one. Also tests that nav lays out as a block. There should be only a single border box with width of the content area (minus margins).</nav> |
| <br> |
| <nav><p>Test that <code>p</code> does not close <code>nav</code>. This paragraph should have a double green border.</nav> |
| <br> |
| <nav><nav>Test that <code>nav</code> can nest inside itself. This paragraph should have a double green border.</nav></nav> |
| <br> |
| <b><nav>Test of residual style. This text should be bold.</nav>This should be bold too.</b> |
| |
| <p><br></p> |
| |
| <div contentEditable=true id=editable> |
| Test of FormatBlock behavior. This text should have a green border. |
| </div> |
| </div> |
| |
| <br> |
| |
| <hr> |
| |
| <h4>DOM for the above (so this test can dump as text)</h4> |
| <pre id=markupArea> |
| </pre> |
| |
| |
| <script> |
| var ed = document.getElementById("editable"); |
| var selection = window.getSelection(); |
| selection.selectAllChildren(ed); |
| document.execCommand("FormatBlock", false, "nav"); |
| selection.collapse(null); |
| ed.blur(); |
| |
| var tests = document.getElementById("testArea"); |
| var markup = document.getElementById("markupArea"); |
| var textNode = document.createTextNode(testArea.innerHTML); |
| markup.appendChild(textNode); |
| |
| </script> |
| |
| </body> |
| </html> |
