summaryrefslogtreecommitdiffstats
path: root/accessible/tests/mochitest/tree/test_table_2.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 17:32:43 +0000
commit6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
treea68f146d7fa01f0134297619fbe7e33db084e0aa /accessible/tests/mochitest/tree/test_table_2.html
parentInitial commit. (diff)
downloadthunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'accessible/tests/mochitest/tree/test_table_2.html')
-rw-r--r--accessible/tests/mochitest/tree/test_table_2.html242
1 files changed, 242 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..c0faece7e5
--- /dev/null
+++ b/accessible/tests/mochitest/tree/test_table_2.html
@@ -0,0 +1,242 @@
+<!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",
+ },
+ ] },
+ { TEXT_CONTAINER: [
+ { 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> &amp; <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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 20:39:09 +0000