third_party/WebKit/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.testRunner)
   8     testRunner.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.removeAllRanges();
  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>