Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / accessibility / table-detection.html
1 <!DOCTYPE html>
2 <html>
3 <script>
4     if (window.testRunner)
5         testRunner.dumpAsText();
6 </script>
7 <body id="body">
8
9     <h2 tabindex=0>
10         This should be a table because it has a thead.
11     </h2>
12     <table border=0>
13     <thead><tr><td>asdf</td><td>asdf</td></tr></thead>
14     <tr><td>asdf</td><td>asdf</td></tr>
15     </table>
16
17     <h2 tabindex=0>
18         This should be a table because cells have borders.
19     </h2>
20     <table border=1>
21     <tr><td >asdf</td><td>asdf</td></tr>
22     </table>
23
24     <h2 tabindex=0>
25         This should not be a table because its cells do not have borders.
26     </h2>
27     <table style='border: 1px solid black'>
28     <tr><td >asdf</td><td>asdf</td></tr>
29     </table>
30
31     <h2 tabindex=0>
32         This should be a table because a cell has a special attribute
33     </h2>
34     <table border=0 cellpadding=0>
35     <tr><td abbr="abbr tag">asdf</td><td>asdf</td></tr>
36     </table>
37
38     <h2 tabindex=0>
39         This should be a table because a cell has a special attribute.
40     </h2>
41     <table border=0 cellpadding=0>
42     <tr><td axis="abbr tag">asdf</td><td>asdf</td></tr>
43     </table>
44
45     <h2 tabindex=0>
46         This should be a table because a cell has a special attribute.
47     </h2>
48     <table border=0 cellpadding=0>
49     <tr><td id="test">asdf</td><td>asdf</td></tr>
50     <tr><td headers="test">asdf</td><td>asdf</td></tr>
51     </table>
52
53     <h2 tabindex=0>
54         This should be a table because cells have different colors.
55     </h2>
56     <table border=0 cellpadding=0>
57     <tr><td bgcolor="red">asdf</td><td bgcolor="blue">asdf</td></tr>
58     </table>
59
60     <h2 tabindex=0>
61         This should not be a table because cells have different but no spacing.
62     </h2>
63     <table border=0 cellpadding=0 cellspacing=0>
64     <tr><td style="background-color: red;">asdf</td><td style="background-color: blue;">asdf</td></tr>
65     </table>
66
67     <h2 tabindex=0>
68         This should not be a table because cells have the same colors even though there is spacing.
69     </h2>
70     <table border=0 cellpadding=0 bgcolor="green" cellspacing=3>
71     <tr><td style="background-color: green;">asdf</td><td style="background-color: green;">asdf</td></tr>
72     </table>
73
74     <h2 tabindex=0>
75         This should be a table because it has the "rules" attr.
76     </h2>
77     <table rules="cols" border=0 cellpadding=0>
78     <tr><td>asdf</td><td>asdf</td></tr>
79     </table>
80
81     <style type="text/css">
82     .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; }
83     </style>
84     <h2 tabindex=0>
85         This should not be a table because it only has one valid cell (need more than one).
86     </h2>
87     <table width=100% cellspacing=0 cellpadding=0>
88     <tr>
89     <td nowrap="1" class="labelPol_080915_Lehman_Contributions">
90     <td nowrap="1" class="hedPol_080915_Lehman_Contributions">Contributions</td>
91     </tr></table>
92
93     <style type="text/css">
94     .nmIS,.nmISH{padding-left:20px;padding-right:12px;cursor:pointer;}
95     .nmIP{padding-left:20px;padding-right:12px;font:60% Tahoma,sans-serif;color:#CC0000}
96     .nmIB,.nmIBH,.nmIBD,.nmIBDH,.nmIK,.nmIKH,.nmIKD,.nmIKDH{padding-left:12px;padding-right:12px;cursor:pointer;}
97     .nmIS,.nmISH,.nmIP{border-bottom:1px solid #CCCCCC}
98     .nmIS,.nmIBH,.nmIBDH,.nmIKH,.nmIP{background-color:#EEEEEE}
99     .nmIKD,.nmIKDH{background-color:#CC0000}
100     .nmISH,.nmIB,.nmIBD,.nmIK{background-color:white}
101     .nmLS,.nmLSH,.nmLB,.nmLBH,.nmLBD,.nmLBDH,.nmLK,.nmLKH,.nmLKD,.nmLKDH{font:70% Tahoma,sans-serif}
102     .nmLS,.nmLSH,.nmLBD,.nmLBDH,.nmLKD,.nmLKDH,.nmIP{font-weight:bold}
103     .nmLK,.nmLK:visited,.nmLKH,.nmLKH:visited{color:black;text-decoration:none}
104     .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}
105     .nmLB:hover,.nmLBH:hover,nmLK:hover,.nmLKH:hover{color:#CC0000;text-decoration:underline}
106     .nmLB:active,.nmLBH:active,.nmLK:active,.nmLKH:active{color:#CC0000;text-decoration:none}
107     .nmLKD,.nmLKD:visited,.nmLKD:hover,.nmLKD:active,.nmLKDH,.nmLKDH:visited,.nmLKDH:hover,.nmLKDH:active{color:white;text-decoration:none}
108     .nmLKD:visited:hover,.nmLKDH:visited:hover{text-decoration:underline;color:white;}
109     .nmTB{border-top:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC}
110     .nmTK{border-left:3px solid #CC0000;border-bottom:3px solid #CC0000}
111     .nmX{position:absolute;z-index: 100000000;left:0;top:0;height:0;line-height:0px}
112     .nmTB,.nmTK{margin-bottom:2px}
113     .nmTB,.nmTK,.nmTS{text-align:left;}
114     .nmTS {width: 130px;}
115     .nmTB {width: 130px; margin: 0px !important; border-left: 0px; border-top: 0px;}
116     .nmTB{margin-top:12px}
117     .nmCM{padding-top:2px;display:block;height:20px;}
118     .nmCM:visited:hover{text-decoration:none;color:#000000;}
119     </style>
120     <h2 tabindex=0>
121         This should not be a table because it does not have enough cell borders or background colors
122     </h2>
123     <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>
124
125     <h2 tabindex=0>
126       This should be a table because it's editable.
127     </h2>
128     <table style='border: 1px solid black' contenteditable>
129       <tr><td >asdf</td><td>asdf</td></tr>
130     </table>
131
132     <h2 tabindex=0>
133       This should be a table because most cells have a top border.
134     </h2>
135     <table>
136       <tr>
137         <td style="border-top: 1px solid black">asdf</td>
138         <td style="border-top: 1px solid black">asdf</td>
139       </tr>
140       <tr>
141         <td style="border-top: 1px solid black">asdf</td>
142         <td>asdf</td>
143       </tr>
144     </table>
145
146     <h2 tabindex=0>
147       This should not be a table because cells have different borders.
148     </h2>
149     <table border=0>
150       <tr>
151         <td style="xborder-top: 1px solid black">asdf</td>
152         <td style="xborder-left: 1px solid black">asdf</td>
153       </tr>
154       <tr>
155         <td style="xborder-bottom: 1px solid black">asdf</td>
156         <td style="xborder-right: 1px solid black">asdf</td>
157       </tr>
158     </table>
159
160     <h2 tabindex=0>
161       This should be a table because it sets empty-cells: hide on the table.
162     </h2>
163     <table style="empty-cells: hide">
164       <tr>
165         <td>asdf</td><td>asdf</td>
166       </tr>
167       <tr>
168         <td style="border: 1px solid black"></td>
169         <td style="border: 1px solid black">asdf</td>
170       </tr>
171       <tr>
172         <td>asdf</td><td>asdf</td>
173       </tr>
174     </table>
175
176     <h2 tabindex=0>
177       This should be a table because it sets empty-cells: hide on a cell.
178     </h2>
179     <table>
180       <tr>
181         <td>asdf</td><td>asdf</td>
182       </tr>
183       <tr>
184         <td style="border: 1px solid black; empty-cells: hide"></td>
185         <td style="border: 1px solid black">asdf</td>
186       </tr>
187       <tr>
188         <td>asdf</td><td>asdf</td>
189       </tr>
190     </table>
191
192     <h2 tabindex=0>
193         This should be a table because it has a col.
194     </h2>
195     <table border=0>
196     <colgroup>
197       <col span="2" style="background-color:#ccf">
198     </colgroup>
199     <tr><td>asdf</td><td>asdf</td></tr>
200     <tr><td>asdf</td><td>asdf</td></tr>
201     </table>
202
203     <h2 tabindex=0>
204         This should be a table because it has at least 20 rows
205     </h2>
206     <table border=0>
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     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
212     <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr> <tr><td>asdf</td></tr>
213     </table>
214
215     <h2 tabindex=0>
216         This should be a table even though it uses table-row-group for it's display type.
217     </h2>
218
219     <style>
220     @media all { 
221        .tableRowGroup {
222           display: table-row-group !important;
223        }
224     }
225     </style>
226
227     <table border=0 class="tableRowGroup">
228     <thead><tr><th>head</th><th>head2</th></tr></thead>
229     <tbody class="rowGroup">
230     <tr><td>asdf</td><td>asdf</td></tr>
231     </tbody>
232     </table>
233
234     <div id="result"></div>
235     
236     <script>
237         if (window.accessibilityController) {
238             function nextAxSibling(axElement) {
239                 var axParent = axElement.parentElement();
240                 for (var i = 0; i < axParent.childrenCount - 1; i++) {
241                     if (axParent.childAtIndex(i).isEqual(axElement))
242                         return axParent.childAtIndex(i + 1);
243                 }
244                 return null;
245             }
246
247             var tableHeadings = document.getElementsByTagName('h2');
248             for (var i = 0; i < tableHeadings.length; i++) {
249                 var tableHeading = tableHeadings[i];
250                 tableHeading.focus();
251                 var axTableHeading = accessibilityController.focusedElement;
252                 var axTable = nextAxSibling(axTableHeading);
253                 var output = axTable.allAttributes();
254
255                 var spacerElement = document.createElement('br');
256                 tableHeading.parentElement.insertBefore(spacerElement, tableHeading);
257
258                 var outputElement = document.createElement('pre');
259                 outputElement.innerText = output + '\n\n';
260                 tableHeading.parentElement.insertBefore(outputElement, tableHeading.nextSibling);
261             }
262         }
263     </script>
264 </body>
265 </html>