third_party/WebKit/LayoutTests/fast/table/rowindex.html

   1 <head>
   2
   3 <style>
   4
   5 body, table { font-family: "Lucida Grande"; font-size: 10px }
   6
   7 </style>
   8
   9 <script>
  10
  11 if (window.testRunner)
  12     testRunner.dumpAsText();
  13
  14 function labelRows()
  15 {
  16     rows = document.getElementsByTagName("tr");
  17     for (i = 0; i < rows.length; ++i)
  18         rows[i].innerHTML += "<td>" + rows[i].id + "</td><td>rowIndex = " + rows[i].rowIndex + "</td>"
  19 }
  20
  21 </script>
  22
  23 </head>
  24
  25 <body onload="labelRows()">
  26
  27 <p>This tests rowIndex, in particular in cases where the table sections are in different orders.</p>
  28
  29 <p>A: This table has the header and footer before the body ("normal" order).</p>
  30
  31 <table border=1>
  32     <thead><tr id="table A, header"></tr></thead>
  33     <tfoot><tr id="table A, footer"></tr></tfoot>
  34     <tbody><tr id="table A, body"></tr></tbody>
  35 </table>
  36
  37 <p>B: This table has the footer before the body and both before the header.</p>
  38
  39 <table border=1>
  40     <tfoot><tr id="table B, footer"></tr></tfoot>
  41     <tbody><tr id="table B, body"></tr></tbody>
  42     <thead><tr id="table B, header"></tr></thead>
  43 </table>
  44
  45 <p>C: This table has two footers before two bodies before two heads.</p>
  46
  47 <table border=1>
  48     <tfoot><tr id="table C, footer A row A"></tr><tr id="table C, footer A row B"></tr></tfoot>
  49     <tfoot><tr id="table C, footer B row A"></tr><tr id="table C, footer B row B"></tr></tfoot>
  50     <tbody><tr id="table C, body A row A"></tr><tr id="table C, body A row B"></tr></tfoot>
  51     <tbody><tr id="table C, body B row A"></tr><tr id="table C, body B row B"></tr></tfoot>
  52     <thead><tr id="table C, header A row A"></tr><tr id="table C, header A row B"></tr></tfoot>
  53     <thead><tr id="table C, header B row A"></tr><tr id="table C, header B row B"></tr></tfoot>
  54 </table>
  55
  56 <p>D: This table has a head, foot, body, direct row children, and an extra foot.</p>
  57
  58 <table border=1>
  59     <tfoot><tr id="table D, footer row A"></tr><tr id="table D, footer row B"></tr></tfoot>
  60     <tbody><tr id="table D, body row A"></tr><tr id="table D, body row B"></tr></tfoot>
  61     <tr id="table D, direct row A"></tr>
  62     <thead><tr id="table D, header A row A"></tr><tr id="table D, header A row B"></tr></tfoot>
  63     <tfoot><tr id="table D, footer B row A"></tr><tr id="table D, footer B row B"></tr></tfoot>
  64 </table>
  65
  66 <script>
  67 var tr = document.createElement("tr");
  68 tr.id = "table D, direct row B";
  69 document.currentScript.previousElementSibling.appendChild(tr);
  70 </script>
  71
  72 <p>E: This table only has a direct row child, added dynamically.</p>
  73
  74 <table border=1>
  75 </table>
  76
  77 <script>
  78 var tr = document.createElement("tr");
  79 tr.id = "table E, direct row A";
  80 document.currentScript.previousElementSibling.appendChild(tr);
  81 </script>
  82
  83 </body>