third_party/WebKit/LayoutTests/accessibility/table-detection.html

   1 <html>
   2 <script>
   3     if (window.testRunner)
   4         testRunner.dumpAsText();
   5 </script>
   6 <body id="body">
   7
   8     <h2 tabindex=0>
   9         This should be a table because it has a thead.
  10     </h2>
  11     <table border=0>
  12     <thead><tr><td>asdf</td><td>asdf</td></tr></thead>
  13     <tr><td>asdf</td><td>asdf</td></tr>
  14     </table>
  15
  16     <h2 tabindex=0>
  17         This should be a table because cells have borders.
  18     </h2>
  19     <table border=1>
  20     <tr><td >asdf</td><td>asdf</td></tr>
  21     </table>
  22
  23     <h2 tabindex=0>
  24         This should not be a table because its cells do not have borders.
  25     </h2>
  26     <table style='border: 1px solid black'>
  27     <tr><td >asdf</td><td>asdf</td></tr>
  28     </table>
  29
  30     <h2 tabindex=0>
  31         This should be a table because a cell has a special attribute
  32     </h2>
  33     <table border=0 cellpadding=0>
  34     <tr><td abbr="abbr tag">asdf</td><td>asdf</td></tr>
  35     </table>
  36
  37     <h2 tabindex=0>
  38         This should be a table because a cell has a special attribute.
  39     </h2>
  40     <table border=0 cellpadding=0>
  41     <tr><td axis="abbr tag">asdf</td><td>asdf</td></tr>
  42     </table>
  43
  44     <h2 tabindex=0>
  45         This should be a table because a cell has a special attribute.
  46     </h2>
  47     <table border=0 cellpadding=0>
  48     <tr><td id="test">asdf</td><td>asdf</td></tr>
  49     <tr><td headers="test">asdf</td><td>asdf</td></tr>
  50     </table>
  51
  52     <h2 tabindex=0>
  53         This should be a table because cells have different colors.
  54     </h2>
  55     <table border=0 cellpadding=0>
  56     <tr><td bgcolor="red">asdf</td><td bgcolor="blue">asdf</td></tr>
  57     </table>
  58
  59     <h2 tabindex=0>
  60         This should not be a table because cells have different but no spacing.
  61     </h2>
  62     <table border=0 cellpadding=0 cellspacing=0>
  63     <tr><td style="background-color: red;">asdf</td><td style="background-color: blue;">asdf</td></tr>
  64     </table>
  65
  66     <h2 tabindex=0>
  67         This should not be a table because cells have the same colors even though there is spacing.
  68     </h2>
  69     <table border=0 cellpadding=0 bgcolor="green" cellspacing=3>
  70     <tr><td style="background-color: green;">asdf</td><td style="background-color: green;">asdf</td></tr>
  71     </table>
  72
  73     <h2 tabindex=0>
  74         This should be a table because it has the "rules" attr.
  75     </h2>
  76     <table rules="cols" border=0 cellpadding=0>
  77     <tr><td>asdf</td><td>asdf</td></tr>
  78     </table>
  79
  80     <style type="text/css">
  81     .appPol_080915_Lehman_Contributions {  } .labelPol_080915_Lehman_Contributions { undefined } .hedPol_080915_Lehman_Contributions { font-size: 19px; font-family:arial; font-weight:bold;color:#26386b;border-top:1px solid #a4abc1;border-left:1px solid #a4abc1;border-right:1px solid #a4abc1;font-family: Arial, Helvetica, sans-serif; font-size: 100%;font-weight:bold;padding-left:4px;width:90%;height:25px; } .deckPol_080915_Lehman_Contributions { color:#666;font-weight:bold; font-family:verdana; font-size:11px;padding:5px 9px; } .subhedPol_080915_Lehman_Contributions { font-weight:bold;text-decoration:none;text-transform:uppercase;padding:3px 3px; } .colhdrPol_080915_Lehman_Contributions { color:ffffff; font-size:10px;font-weight:bold;background-color:999999; } .font1Pol_080915_Lehman_Contributions { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; line-height: 140%; } .boxB_Pol_080915_Lehman_Contributions { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; line-height: 140%;;border-left:1px #a4abc1 solid;border-bottom:1px #a4abc1 solid;border-right:1px #a4abc1 solid;  ;width:100%; } .headlinePol_080915_Lehman_Contributions { font-weight:bold; } .headlinePol_080915_Lehman_Contributions:hover { } .headlinePol_080915_Lehman_Contributions:visited { font-weight:bold;} .captionPol_080915_Lehman_Contributions { undefined} #NoBg { background-color:transparent; } .navlinkPol_080915_Lehman_Contributions {  color:000000;font-size: 10px;font-family:verdana;line-height: 130%;text-decoration:none; } .navlinkPol_080915_Lehman_Contributions:hover { color:cc3333; } .navlinkPol_080915_Lehman_Contributions:active { color:#cc0000; } .navCellPol_080915_Lehman_Contributions { width:20px;text-align:center;background-color:#EEEEEE;border-left:1px #CCCCCC solid;border-top:1px #CCCCCC solid;padding:2px;cursor:hand;width:100%; } .bulletPol_080915_Lehman_Contributions { color:CC0000;font-family:verdana;font-size:11px;font-weight:bold;color:cc3333; }
  82     </style>
  83     <h2 tabindex=0>
  84         This should not be a table because it only has one valid cell (need more than one).
  85     </h2>
  86     <table width=100% cellspacing=0 cellpadding=0>
  87     <tr>
  88     <td nowrap="1" class="hedPol_080915_Lehman_Contributions">Contributions</td>
  89     </tr></table>
  90
  91     <style type="text/css">
  92     .nmIS,.nmISH{padding-left:20px;padding-right:12px;cursor:pointer;}
  93     .nmIP{padding-left:20px;padding-right:12px;font:60% Tahoma,sans-serif;color:#CC0000}
  94     .nmIB,.nmIBH,.nmIBD,.nmIBDH,.nmIK,.nmIKH,.nmIKD,.nmIKDH{padding-left:12px;padding-right:12px;cursor:pointer;}
  95     .nmIS,.nmISH,.nmIP{border-bottom:1px solid #CCCCCC}
  96     .nmIS,.nmIBH,.nmIBDH,.nmIKH,.nmIP{background-color:#EEEEEE}
  97     .nmIKD,.nmIKDH{background-color:#CC0000}
  98     .nmISH,.nmIB,.nmIBD,.nmIK{background-color:white}
  99     .nmLS,.nmLSH,.nmLB,.nmLBH,.nmLBD,.nmLBDH,.nmLK,.nmLKH,.nmLKD,.nmLKDH{font:70% Tahoma,sans-serif}
 100     .nmLS,.nmLSH,.nmLBD,.nmLBDH,.nmLKD,.nmLKDH,.nmIP{font-weight:bold}
 101     .nmLK,.nmLK:visited,.nmLKH,.nmLKH:visited{color:black;text-decoration:none}
 102     .nmLS,.nmLS:visited,.nmLS:hover,.nmLS:active,.nmLSH,.nmLSH:visited,.nmLSH:hover,.nmLSH:active,.nmLB,.nmLB:visited,.nmLBH,.nmLBH:visited,.nmLBD,.nmLBD:visited,.nmLBD:hover,.nmLBD:active,.nmLBDH,.nmLBDH:visited,.nmLBDH:hover,.nmLBDH:active{color:black !important;text-decoration:none}
 103     .nmLB:hover,.nmLBH:hover,nmLK:hover,.nmLKH:hover{color:#CC0000;text-decoration:underline}
 104     .nmLB:active,.nmLBH:active,.nmLK:active,.nmLKH:active{color:#CC0000;text-decoration:none}
 105     .nmLKD,.nmLKD:visited,.nmLKD:hover,.nmLKD:active,.nmLKDH,.nmLKDH:visited,.nmLKDH:hover,.nmLKDH:active{color:white;text-decoration:none}
 106     .nmLKD:visited:hover,.nmLKDH:visited:hover{text-decoration:underline;color:white;}
 107     .nmTB{border-top:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC}
 108     .nmTK{border-left:3px solid #CC0000;border-bottom:3px solid #CC0000}
 109     .nmX{position:absolute;z-index: 100000000;left:0;top:0;height:0;line-height:0px}
 110     .nmTB,.nmTK{margin-bottom:2px}
 111     .nmTB,.nmTK,.nmTS{text-align:left;}
 112     .nmTS {width: 130px;}
 113     .nmTB {width: 130px; margin: 0px !important; border-left: 0px; border-top: 0px;}
 114     .nmTB{margin-top:12px}
 115     .nmCM{padding-top:2px;display:block;height:20px;}
 116     .nmCM:visited:hover{text-decoration:none;color:#000000;}
 117     </style>
 118     <h2 tabindex=0>
 119         This should not be a table because it does not have enough cell borders or background colors
 120     </h2>
 121     <table class="nmTB" cellpadding="0" cellspacing="0"><tr><td class="nmIBD" id="nmb" name="nmb" nm_sn="3032552" nm_suf="" CM_sf="Ex" CM="NewsMenuL1" pn="newsmenu" ct="nm0" cn="Politics"><a class="nmLBD" href="/id/3032553">Politics</a></td></tr><tr><td class="nmIB" id="nmb" name="nmb" nm_sn="18970411" nm_suf="" CM_sf="Ex" CM="NewsMenuL1" pn="newsmenu" ct="nxf" cn="Decision '08"><a class="nmLB" href="/id/18970417">Decision '08</a></td></tr><tr><td class="nmIB" id="nmb" name="nmb" nm_sn="18296896" nm_suf="" CM_sf="Ex" CM="NewsMenuL1" pn="newsmenu" ct="nxf" cn="The debates"><a class="nmLB" href="/id/18296908">The debates</a></td></tr><tr><td class="nmIB" id="nmb" name="nmb" nm_sn="21491043" nm_suf="" CM_sf="Ex" CM="NewsMenuL1" pn="newsmenu" ct="nxf" cn="The White House"><a class="nmLB" href="/id/21672863">The White House</a></td></tr><tr><td class="nmIB" id="nmb" name="nmb" nm_sn="21491571" nm_suf="" CM_sf="Ex" CM="NewsMenuL1" pn="newsmenu" ct="nxf" cn="Capitol Hill"><a class="nmLB" href="/id/21672985">Capitol Hill</a></td></tr><tr><td class="nmIB" id="nmb" name="nmb" nm_sn="14016004" nm_suf="" CM_sf="Ex" CM="NewsMenuL1" pn="newsmenu" ct="nxf" cn="National Journal"><a class="nmLB" href="/id/14016001">National Journal</a></td></tr><tr><td class="nmIB" id="nmb" name="nmb" nm_sn="19748467" nm_suf="" CM_sf="Ex" CM="NewsMenuL1" pn="newsmenu" ct="nxf" cn="New York Times"><a class="nmLB" href="/id/19747577">New York Times</a></td></tr></table>
 122
 123     <h2 tabindex=0>
 124       This should be a table because it's editable.
 125     </h2>
 126     <table style='border: 1px solid black' contenteditable>
 127       <tr><td >asdf</td><td>asdf</td></tr>
 128     </table>
 129
 130     <h2 tabindex=0>
 131       This should be a table because most cells have a top border.
 132     </h2>
 133     <table>
 134       <tr>
 135         <td style="border-top: 1px solid black">asdf</td>
 136         <td style="border-top: 1px solid black">asdf</td>
 137       </tr>
 138       <tr>
 139         <td style="border-top: 1px solid black">asdf</td>
 140         <td>asdf</td>
 141       </tr>
 142     </table>
 143
 144     <h2 tabindex=0>
 145       This should not be a table because cells have different borders.
 146     </h2>
 147     <table border=0>
 148       <tr>
 149         <td style="xborder-top: 1px solid black">asdf</td>
 150         <td style="xborder-left: 1px solid black">asdf</td>
 151       </tr>
 152       <tr>
 153         <td style="xborder-bottom: 1px solid black">asdf</td>
 154         <td style="xborder-right: 1px solid black">asdf</td>
 155       </tr>
 156     </table>
 157
 158     <h2 tabindex=0>
 159       This should be a table because it sets empty-cells: hide on the table.
 160     </h2>
 161     <table style="empty-cells: hide">
 162       <tr>
 163         <td>asdf</td><td>asdf</td>
 164       </tr>
 165       <tr>
 166         <td style="border: 1px solid black"></td>
 167         <td style="border: 1px solid black">asdf</td>
 168       </tr>
 169       <tr>
 170         <td>asdf</td><td>asdf</td>
 171       </tr>
 172     </table>
 173
 174     <h2 tabindex=0>
 175       This should be a table because it sets empty-cells: hide on a cell.
 176     </h2>
 177     <table>
 178       <tr>
 179         <td>asdf</td><td>asdf</td>
 180       </tr>
 181       <tr>
 182         <td style="border: 1px solid black; empty-cells: hide"></td>
 183         <td style="border: 1px solid black">asdf</td>
 184       </tr>
 185       <tr>
 186         <td>asdf</td><td>asdf</td>
 187       </tr>
 188     </table>
 189
 190     <h2 tabindex=0>
 191         This should be a table because it has a col.
 192     </h2>
 193     <table border=0>
 194     <colgroup>
 195       <col span="2" style="background-color:#ccf">
 196     </colgroup>
 197     <tr><td>asdf</td><td>asdf</td></tr>
 198     <tr><td>asdf</td><td>asdf</td></tr>
 199     </table>
 200
 201     <h2 tabindex=0>
 202         This should be a table because it has at least 20 rows
 203     </h2>
 204     <table border=0>
 205     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
 206     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
 207     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
 208     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
 209     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
 210     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
 211     </table>
 212
 213     <div id="result"></div>
 214
 215     <script>
 216         if (window.accessibilityController) {
 217             function nextAxSibling(axElement) {
 218                 var axParent = axElement.parentElement();
 219                 for (var i = 0; i < axParent.childrenCount - 1; i++) {
 220                     if (axParent.childAtIndex(i).isEqual(axElement))
 221                         return axParent.childAtIndex(i + 1);
 222                 }
 223                 return null;
 224             }
 225
 226             var tableHeadings = document.getElementsByTagName('h2');
 227             for (var i = 0; i < tableHeadings.length; i++) {
 228                 var tableHeading = tableHeadings[i];
 229                 tableHeading.focus();
 230                 var axTableHeading = accessibilityController.focusedElement;
 231                 var axTable = nextAxSibling(axTableHeading);
 232                 var output = axTable.allAttributes();
 233
 234                 var spacerElement = document.createElement('br');
 235                 tableHeading.parentElement.insertBefore(spacerElement, tableHeading);
 236
 237                 var outputElement = document.createElement('pre');
 238                 outputElement.innerText = output + '\n\n';
 239                 tableHeading.parentElement.insertBefore(outputElement, tableHeading.nextSibling);
 240             }
 241         }
 242     </script>
 243 </body>
 244 </html>