test_table_3.html (7080B)
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: #1d96b2; 77 font-weight: bold; 78 } 79 .responsive-table tbody td { 80 text-align: right; 81 border-bottom: 1px solid #1d96b2; 82 } 83 84 /* float everything */ 85 .responsive-table tbody tr { 86 float: left; 87 width: 48%; 88 margin-left: 2%; 89 } 90 </style> 91 92 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 93 94 <script type="application/javascript" 95 src="../common.js"></script> 96 <script type="application/javascript" 97 src="../role.js"></script> 98 <script type="application/javascript" 99 src="../table.js"></script> 100 101 <script type="application/javascript"> 102 103 const COLHEADER = ROLE_COLUMNHEADER; 104 const ROWHEADER = ROLE_ROWHEADER; 105 const CELL = ROLE_CELL; 106 const STATICTEXT = ROLE_STATICTEXT; 107 const TEXT_LEAF = ROLE_TEXT_LEAF; 108 const GROUPING = ROLE_GROUPING; 109 110 function doTest() { 111 let accTree = 112 { TABLE: [ 113 { CAPTION: [ 114 { 115 role: ROLE_TEXT_LEAF, 116 name: "Top 10 Grossing Animated Films of All Time", 117 }, 118 ] }, 119 { TEXT_CONTAINER: [ 120 { ROW: [ 121 { COLUMNHEADER: [ { role: TEXT_LEAF, name: "Film Title" } ] }, 122 { COLUMNHEADER: [ { role: TEXT_LEAF, name: "Released" } ] }, 123 { COLUMNHEADER: [ { role: TEXT_LEAF, name: "Studio" } ] }, 124 { COLUMNHEADER: [ { role: TEXT_LEAF, name: "Worldwide Gross" } ] }, 125 { COLUMNHEADER: [ { role: TEXT_LEAF, name: "Domestic Gross" } ] }, 126 { COLUMNHEADER: [ { role: TEXT_LEAF, name: "Foreign Gross" } ] }, 127 { COLUMNHEADER: [ { role: TEXT_LEAF, name: "Budget" } ] }, 128 ] }, 129 ] }, 130 { ROW: [ 131 { role: CELL }, 132 ] }, 133 { ROW: [ 134 { ROWHEADER: [ { role: TEXT_LEAF, name: "Toy Story 3" } ] }, 135 { CELL: [ 136 { role: STATICTEXT, name: "Released" }, 137 { role: TEXT_LEAF, name: "2010" }, 138 ] }, 139 { CELL: [ 140 { role: STATICTEXT, name: "Studio" }, 141 { role: TEXT_LEAF, name: "Disney Pixar" }, 142 ] }, 143 { CELL: [ 144 { role: STATICTEXT, name: "Worldwide Gross" }, 145 { role: TEXT_LEAF, name: "$1,063,171,911" }, 146 ] }, 147 { CELL: [ 148 { role: STATICTEXT, name: "Domestic Gross" }, 149 { role: TEXT_LEAF, name: "$415,004,880" }, 150 ] }, 151 { CELL: [ 152 { role: STATICTEXT, name: "Foreign Gross" }, 153 { role: TEXT_LEAF, name: "$648,167,031" }, 154 ] }, 155 { CELL: [ 156 { role: STATICTEXT, name: "Budget" }, 157 { role: TEXT_LEAF, name: "$200,000,000" }, 158 ]}, 159 ] }, 160 { ROW: [ 161 { ROWHEADER: [ { role: TEXT_LEAF, name: "Shrek Forever After" } ] }, 162 { CELL: [ 163 { role: STATICTEXT, name: "Released" }, 164 { role: TEXT_LEAF, name: "2010" }, 165 ] }, 166 { CELL: [ 167 { role: STATICTEXT, name: "Studio" }, 168 { role: TEXT_LEAF, name: "Dreamworks" }, 169 ] }, 170 { CELL: [ 171 { role: STATICTEXT, name: "Worldwide Gross" }, 172 { role: TEXT_LEAF, name: "$752,600,867" }, 173 ] }, 174 { CELL: [ 175 { role: STATICTEXT, name: "Domestic Gross" }, 176 { role: TEXT_LEAF, name: "$238,736,787" }, 177 ] }, 178 { CELL: [ 179 { role: STATICTEXT, name: "Foreign Gross" }, 180 { role: TEXT_LEAF, name: "$513,864,080" }, 181 ] }, 182 { CELL: [ 183 { role: STATICTEXT, name: "Budget" }, 184 { role: TEXT_LEAF, name: "$165,000,000" }, 185 ] }, 186 ] }, 187 ] }; 188 189 testAccessibleTree("table", accTree); 190 191 SimpleTest.finish(); 192 } 193 SimpleTest.waitForExplicitFinish(); 194 addA11yLoadEvent(doTest); 195 </script> 196 </head> 197 198 <body> 199 <p id="display"></p> 200 <div id="content" style="display: none"></div> 201 <pre id="test"> 202 </pre> 203 204 <table class="responsive-table" id="table"> 205 <caption>Top 10 Grossing Animated Films of All Time</caption> 206 <thead> 207 <tr> 208 <th scope="col">Film Title</th> 209 <th scope="col">Released</th> 210 <th scope="col">Studio</th> 211 <th scope="col">Worldwide Gross</th> 212 <th scope="col">Domestic Gross</th> 213 <th scope="col">Foreign Gross</th> 214 <th scope="col">Budget</th> 215 </tr> 216 </thead> 217 <tfoot> 218 <tr> 219 <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> 220 </tr> 221 </tfoot> 222 <tbody> 223 <tr> 224 <th scope="row">Toy Story 3</th> 225 <td data-title="Released">2010</td> 226 <td data-title="Studio">Disney Pixar</td> 227 <td data-title="Worldwide Gross" data-type="currency">$1,063,171,911</td> 228 <td data-title="Domestic Gross" data-type="currency">$415,004,880</td> 229 <td data-title="Foreign Gross" data-type="currency">$648,167,031</td> 230 <td data-title="Budget" data-type="currency">$200,000,000</td> 231 </tr> 232 <tr> 233 <th scope="row">Shrek Forever After</th> 234 <td data-title="Released">2010</td> 235 <td data-title="Studio">Dreamworks</td> 236 <td data-title="Worldwide Gross" data-type="currency">$752,600,867</td> 237 <td data-title="Domestic Gross" data-type="currency">$238,736,787</td> 238 <td data-title="Foreign Gross" data-type="currency">$513,864,080</td> 239 <td data-title="Budget" data-type="currency">$165,000,000</td> 240 </tr> 241 </tbody> 242 </table> 243 </body> 244 </html>