<!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.removeAllRanges();
ed.blur();
var tests = document.getElementById("testArea");
var markup = document.getElementById("markupArea");
var textNode = document.createTextNode(testArea.innerHTML);
markup.appendChild(textNode);
</script>
</body>
</html>
Codebase Browser
chromium