diff options
Diffstat (limited to 'accessible/tests/mochitest/tree/test_table_2.html')
| -rw-r--r-- | accessible/tests/mochitest/tree/test_table_2.html | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/tree/test_table_2.html b/accessible/tests/mochitest/tree/test_table_2.html new file mode 100644 index 0000000000..5d0aedf2b7 --- /dev/null +++ b/accessible/tests/mochitest/tree/test_table_2.html @@ -0,0 +1,240 @@ +<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<link rel="stylesheet" type="text/css" + href="chrome://mochikit/content/tests/SimpleTest/test.css" /> + +<style> +.responsive-table { + width: 100%; + margin-bottom: 1.5em; +} +.responsive-table thead { + position: absolute; + clip: rect(1px 1px 1px 1px); + /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; +} +.responsive-table thead th { + background-color: #1d96b2; + border: 1px solid #1d96b2; + font-weight: normal; + text-align: center; + color: white; +} +.responsive-table thead th:first-of-type { + text-align: left; +} +.responsive-table tbody, +.responsive-table tr, +.responsive-table th, +.responsive-table td { + display: block; + padding: 0; + text-align: left; + white-space: normal; +} +.responsive-table th, +.responsive-table td { + padding: .5em; + vertical-align: middle; +} +.responsive-table caption { + margin-bottom: 1em; + font-size: 1em; + font-weight: bold; + text-align: center; +} +.responsive-table tfoot { + font-size: .8em; + font-style: italic; +} +.responsive-table tbody tr { + margin-bottom: 1em; + border: 2px solid #1d96b2; +} +.responsive-table tbody tr:last-of-type { + margin-bottom: 0; +} +.responsive-table tbody th[scope="row"] { + background-color: #1d96b2; + color: white; +} +.responsive-table tbody td[data-type=currency] { + text-align: right; +} +.responsive-table tbody td[data-title]:before { + content: attr(data-title); + float: left; + font-size: .8em; + color: rgba(94, 93, 82, 0.75); +} +.responsive-table tbody td { + text-align: right; + border-bottom: 1px solid #1d96b2; +} + +.responsive-table { + font-size: .9em; +} +.responsive-table thead { + position: relative; + clip: auto; + height: auto; + width: auto; + overflow: auto; +} +.responsive-table tr { + display: table-row; +} +.responsive-table th, +.responsive-table td { + display: table-cell; + padding: .5em; +} + +.responsive-table caption { + font-size: 1.5em; +} +.responsive-table tbody { + display: table-row-group; +} +.responsive-table tbody tr { + display: table-row; + border-width: 1px; +} +.responsive-table tbody tr:nth-of-type(even) { + background-color: rgba(94, 93, 82, 0.1); +} +.responsive-table tbody th[scope="row"] { + background-color: transparent; + color: #5e5d52; + text-align: left; +} +.responsive-table tbody td { + text-align: center; +} +.responsive-table tbody td[data-title]:before { + content: none; +} +</style> + +<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + +<script type="application/javascript" + src="../common.js"></script> +<script type="application/javascript" + src="../role.js"></script> + <script type="application/javascript" + src="../table.js"></script> + +<script type="application/javascript"> + +const COLHEADER = ROLE_COLUMNHEADER; +const ROWHEADER = ROLE_ROWHEADER; +const CELL = ROLE_CELL; +const TEXT_LEAF = ROLE_TEXT_LEAF; + +function doTest() { + let accTree = + { TABLE: [ + { CAPTION: [ + { + role: ROLE_TEXT_LEAF, + name: "Top 10 Grossing Animated Films of All Time", + }, + ] }, + { ROW: [ + { role: COLHEADER, name: "Film Title" }, + { role: COLHEADER, name: "Released" }, + { role: COLHEADER, name: "Studio" }, + { role: COLHEADER, name: "Worldwide Gross" }, + { role: COLHEADER, name: "Domestic Gross" }, + { role: COLHEADER, name: "Foreign Gross" }, + { role: COLHEADER, name: "Budget" }, + ] }, + { ROW: [ + { role: CELL }, + ] }, + { ROW: [ + { role: ROWHEADER, name: "Toy Story 3" }, + { CELL: [ { role: TEXT_LEAF, name: "2010" }] }, + { CELL: [ { role: TEXT_LEAF, name: "Disney Pixar" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$1,063,171,911" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$415,004,880" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$648,167,031" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$200,000,000" }] }, + ] }, + { ROW: [ + { role: ROWHEADER, name: "Shrek Forever After" }, + { CELL: [ { role: TEXT_LEAF, name: "2010" }] }, + { CELL: [ { role: TEXT_LEAF, name: "Dreamworks" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$752,600,867" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$238,736,787" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$513,864,080" }] }, + { CELL: [ { role: TEXT_LEAF, name: "$165,000,000" }] }, + ] }, + ] }; + + testAccessibleTree("table", accTree); + + SimpleTest.finish(); +} +SimpleTest.waitForExplicitFinish(); +addA11yLoadEvent(doTest); +</script> +</head> + +<body> + <p id="display"></p> + <div id="content" style="display: none"></div> + <pre id="test"> + </pre> + + <table class="responsive-table" id="table"> + <caption>Top 10 Grossing Animated Films of All Time</caption> + <thead> + <tr> + <th scope="col">Film Title</th> + <th scope="col">Released</th> + <th scope="col">Studio</th> + <th scope="col">Worldwide Gross</th> + <th scope="col">Domestic Gross</th> + <th scope="col">Foreign Gross</th> + <th scope="col">Budget</th> + </tr> + </thead> + <tfoot> + <tr> + <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> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row">Toy Story 3</th> + <td data-title="Released">2010</td> + <td data-title="Studio">Disney Pixar</td> + <td data-title="Worldwide Gross" data-type="currency">$1,063,171,911</td> + <td data-title="Domestic Gross" data-type="currency">$415,004,880</td> + <td data-title="Foreign Gross" data-type="currency">$648,167,031</td> + <td data-title="Budget" data-type="currency">$200,000,000</td> + </tr> + <tr> + <th scope="row">Shrek Forever After</th> + <td data-title="Released">2010</td> + <td data-title="Studio">Dreamworks</td> + <td data-title="Worldwide Gross" data-type="currency">$752,600,867</td> + <td data-title="Domestic Gross" data-type="currency">$238,736,787</td> + <td data-title="Foreign Gross" data-type="currency">$513,864,080</td> + <td data-title="Budget" data-type="currency">$165,000,000</td> + </tr> + </tbody> + </table> +</body> +</html> |