test_table_2.html (6567B)
1 <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <style> 9 .responsive-table { 10 width: 100%; 11 margin-bottom: 1.5em; 12 } 13 .responsive-table thead { 14 position: absolute; 15 clip: rect(1px 1px 1px 1px); 16 /* IE6, IE7 */ 17 clip: rect(1px, 1px, 1px, 1px); 18 padding: 0; 19 border: 0; 20 height: 1px; 21 width: 1px; 22 overflow: hidden; 23 } 24 .responsive-table thead th { 25 background-color: #1d96b2; 26 border: 1px solid #1d96b2; 27 font-weight: normal; 28 text-align: center; 29 color: white; 30 } 31 .responsive-table thead th:first-of-type { 32 text-align: left; 33 } 34 .responsive-table tbody, 35 .responsive-table tr, 36 .responsive-table th, 37 .responsive-table td { 38 display: block; 39 padding: 0; 40 text-align: left; 41 white-space: normal; 42 } 43 .responsive-table th, 44 .responsive-table td { 45 padding: .5em; 46 vertical-align: middle; 47 } 48 .responsive-table caption { 49 margin-bottom: 1em; 50 font-size: 1em; 51 font-weight: bold; 52 text-align: center; 53 } 54 .responsive-table tfoot { 55 font-size: .8em; 56 font-style: italic; 57 } 58 .responsive-table tbody tr { 59 margin-bottom: 1em; 60 border: 2px solid #1d96b2; 61 } 62 .responsive-table tbody tr:last-of-type { 63 margin-bottom: 0; 64 } 65 .responsive-table tbody th[scope="row"] { 66 background-color: #1d96b2; 67 color: white; 68 } 69 .responsive-table tbody td[data-type=currency] { 70 text-align: right; 71 } 72 .responsive-table tbody td[data-title]:before { 73 content: attr(data-title); 74 float: left; 75 font-size: .8em; 76 color: rgba(94, 93, 82, 0.75); 77 } 78 .responsive-table tbody td { 79 text-align: right; 80 border-bottom: 1px solid #1d96b2; 81 } 82 83 .responsive-table { 84 font-size: .9em; 85 } 86 .responsive-table thead { 87 position: relative; 88 clip: auto; 89 height: auto; 90 width: auto; 91 overflow: auto; 92 } 93 .responsive-table tr { 94 display: table-row; 95 } 96 .responsive-table th, 97 .responsive-table td { 98 display: table-cell; 99 padding: .5em; 100 } 101 102 .responsive-table caption { 103 font-size: 1.5em; 104 } 105 .responsive-table tbody { 106 display: table-row-group; 107 } 108 .responsive-table tbody tr { 109 display: table-row; 110 border-width: 1px; 111 } 112 .responsive-table tbody tr:nth-of-type(even) { 113 background-color: rgba(94, 93, 82, 0.1); 114 } 115 .responsive-table tbody th[scope="row"] { 116 background-color: transparent; 117 color: #5e5d52; 118 text-align: left; 119 } 120 .responsive-table tbody td { 121 text-align: center; 122 } 123 .responsive-table tbody td[data-title]:before { 124 content: none; 125 } 126 </style> 127 128 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 129 130 <script type="application/javascript" 131 src="../common.js"></script> 132 <script type="application/javascript" 133 src="../role.js"></script> 134 <script type="application/javascript" 135 src="../table.js"></script> 136 137 <script type="application/javascript"> 138 139 const COLHEADER = ROLE_COLUMNHEADER; 140 const ROWHEADER = ROLE_ROWHEADER; 141 const CELL = ROLE_CELL; 142 const TEXT_LEAF = ROLE_TEXT_LEAF; 143 144 function doTest() { 145 let accTree = 146 { TABLE: [ 147 { CAPTION: [ 148 { 149 role: ROLE_TEXT_LEAF, 150 name: "Top 10 Grossing Animated Films of All Time", 151 }, 152 ] }, 153 { TEXT_CONTAINER: [ 154 { ROW: [ 155 { role: COLHEADER, name: "Film Title" }, 156 { role: COLHEADER, name: "Released" }, 157 { role: COLHEADER, name: "Studio" }, 158 { role: COLHEADER, name: "Worldwide Gross" }, 159 { role: COLHEADER, name: "Domestic Gross" }, 160 { role: COLHEADER, name: "Foreign Gross" }, 161 { role: COLHEADER, name: "Budget" }, 162 ] }, 163 ] }, 164 { ROW: [ 165 { role: CELL }, 166 ] }, 167 { ROW: [ 168 { role: ROWHEADER, name: "Toy Story 3" }, 169 { CELL: [ { role: TEXT_LEAF, name: "2010" }] }, 170 { CELL: [ { role: TEXT_LEAF, name: "Disney Pixar" }] }, 171 { CELL: [ { role: TEXT_LEAF, name: "$1,063,171,911" }] }, 172 { CELL: [ { role: TEXT_LEAF, name: "$415,004,880" }] }, 173 { CELL: [ { role: TEXT_LEAF, name: "$648,167,031" }] }, 174 { CELL: [ { role: TEXT_LEAF, name: "$200,000,000" }] }, 175 ] }, 176 { ROW: [ 177 { role: ROWHEADER, name: "Shrek Forever After" }, 178 { CELL: [ { role: TEXT_LEAF, name: "2010" }] }, 179 { CELL: [ { role: TEXT_LEAF, name: "Dreamworks" }] }, 180 { CELL: [ { role: TEXT_LEAF, name: "$752,600,867" }] }, 181 { CELL: [ { role: TEXT_LEAF, name: "$238,736,787" }] }, 182 { CELL: [ { role: TEXT_LEAF, name: "$513,864,080" }] }, 183 { CELL: [ { role: TEXT_LEAF, name: "$165,000,000" }] }, 184 ] }, 185 ] }; 186 187 testAccessibleTree("table", accTree); 188 189 SimpleTest.finish(); 190 } 191 SimpleTest.waitForExplicitFinish(); 192 addA11yLoadEvent(doTest); 193 </script> 194 </head> 195 196 <body> 197 <p id="display"></p> 198 <div id="content" style="display: none"></div> 199 <pre id="test"> 200 </pre> 201 202 <table class="responsive-table" id="table"> 203 <caption>Top 10 Grossing Animated Films of All Time</caption> 204 <thead> 205 <tr> 206 <th scope="col">Film Title</th> 207 <th scope="col">Released</th> 208 <th scope="col">Studio</th> 209 <th scope="col">Worldwide Gross</th> 210 <th scope="col">Domestic Gross</th> 211 <th scope="col">Foreign Gross</th> 212 <th scope="col">Budget</th> 213 </tr> 214 </thead> 215 <tfoot> 216 <tr> 217 <td colspan="7">Sources: <a href="http://en.wikipedia.org/wiki/List_of_highest-grossing_animated_films" rel="external">Wikipedia</a> & <a href="http://www.boxofficemojo.com/genres/chart/?id=animation.htm" rel="external">Box Office Mojo</a>. Data is current as of March 12, 2014</td> 218 </tr> 219 </tfoot> 220 <tbody> 221 <tr> 222 <th scope="row">Toy Story 3</th> 223 <td data-title="Released">2010</td> 224 <td data-title="Studio">Disney Pixar</td> 225 <td data-title="Worldwide Gross" data-type="currency">$1,063,171,911</td> 226 <td data-title="Domestic Gross" data-type="currency">$415,004,880</td> 227 <td data-title="Foreign Gross" data-type="currency">$648,167,031</td> 228 <td data-title="Budget" data-type="currency">$200,000,000</td> 229 </tr> 230 <tr> 231 <th scope="row">Shrek Forever After</th> 232 <td data-title="Released">2010</td> 233 <td data-title="Studio">Dreamworks</td> 234 <td data-title="Worldwide Gross" data-type="currency">$752,600,867</td> 235 <td data-title="Domestic Gross" data-type="currency">$238,736,787</td> 236 <td data-title="Foreign Gross" data-type="currency">$513,864,080</td> 237 <td data-title="Budget" data-type="currency">$165,000,000</td> 238 </tr> 239 </tbody> 240 </table> 241 </body> 242 </html>