573e416472fb68ee834641e38c144d2cbab41575
[WebKit.git] / LayoutTests / fast / html / nav-element.html
1 <!doctype HTML>
2 <html>
3 <head>
4 <title>Test of HTML5 nav element</title>
5
6 <script>
7 if (window.layoutTestController)
8     layoutTestController.dumpAsText();
9 </script>
10
11 <style>
12 nav { border: 1px solid green; padding: 2px; }
13 p > nav { border: 3px solid red; }
14 nav > p { border: 1px solid green; }
15 p { margin: 0px; }
16 </style>
17
18 </head>
19 <body>
20
21 <h4>Test content</h4>
22
23 <div id=testArea>
24 <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>
25 <br>
26 <nav><p>Test that <code>p</code> does not close <code>nav</code>. This paragraph should have a double green border.</nav>
27 <br>
28 <nav><nav>Test that <code>nav</code> can nest inside itself. This paragraph should have a double green border.</nav></nav>
29 <br>
30 <b><nav>Test of residual style. This text should be bold.</nav>This should be bold too.</b>
31
32 <p><br></p>
33
34 <div contentEditable=true id=editable>
35 Test of FormatBlock behavior. This text should have a green border.
36 </div>
37 </div>
38
39 <br>
40
41 <hr>
42
43 <h4>DOM for the above (so this test can dump as text)</h4>
44 <pre id=markupArea>
45 </pre>
46
47
48 <script>
49 var ed = document.getElementById("editable");
50 var selection = window.getSelection();
51 selection.selectAllChildren(ed);
52 document.execCommand("FormatBlock", false, "nav");
53 selection.collapse();
54 ed.blur();
55
56 var tests = document.getElementById("testArea");
57 var markup = document.getElementById("markupArea");
58 var textNode = document.createTextNode(testArea.innerHTML);
59 markup.appendChild(textNode);
60
61 </script>
62
63 </body>
64 </html>