Skip to content
This repository has been archived by the owner on Sep 24, 2019. It is now read-only.

Commit

Permalink
Added tablePositioningShouldNotChangeMeaning test for issue #74.
Browse files Browse the repository at this point in the history
  • Loading branch information
Kevin Miller committed Jun 16, 2014
1 parent 1e34ad1 commit fe7566d
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 0 deletions.
26 changes: 26 additions & 0 deletions src/js/custom/tablePositioningShouldNotChangeMeaning.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
quail.tablePositioningShouldNotChangeMeaning = function(quail, test, Case) {
test.get('$scope').find('table').each(function() {
var _case = test.add(Case({
element: this,
expected: (function (element) {
return quail.components.resolveExpectation(element);
}(this))
}));
$(this).find('th, td').each(function() {
if ($(this).css('position') !== 'relative' &&
$(this).css('position') !== 'static' || (
$(this).css('float') === 'right' ||
$(this).css('float') === 'left'
)) {
_case.set({
status : 'failed'
});
}
else {
_case.set({
status : 'passed'
});
}
});
});
};
26 changes: 26 additions & 0 deletions src/resources/tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4011,6 +4011,32 @@ tableNotUsedForLayout:
- "layout"
- "content"
callback: "tableNotUsedForLayout"
tablePositioningShouldNotChangeMeaning:
type: "custom"
testability: 0.5
title:
en: "Meaning in tables should not be created through positioning"
description:
en: "A table should not use CSS to change the positioning of cells."
guidelines:
wcag:
1.3.2:
techniques:
- "C6"
1.4.5:
techniques:
- "C6"
1.4.9:
techniques:
- "C6"
2.4.1:
techniques:
- "C6"
tags:
- "table"
- "content"
- "structure"
callback: "tablePositioningShouldNotChangeMeaning"
tableShouldUseHeaderIDs:
type: "custom"
testability: 0.5
Expand Down
106 changes: 106 additions & 0 deletions test/accessibility-tests/tablePositioningShouldNotChangeMeaning.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!doctype html>
<html>
<head>
<title>tablePositioningShouldNotChangeMeaning</title>
<style>

#fail-1 td {
position: absolute;
}

#fail-2 td {
float: right;
}

</style>
</head>
<body>
<div class="quail-test" data-expected="fail" id="fail-1" data-accessibility-test="tablePositioningShouldNotChangeMeaning">
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>One B</td>
<td>Two B</td>
</tr>
<tr>
<td>One C</td>
<td>Two C</td>
</tr>
<tr>
<td>One D</td>
<td>Two D</td>
</tr>
</tbody>
</table>
</div>

<div class="quail-test" data-expected="fail" id="fail-2" data-accessibility-test="tablePositioningShouldNotChangeMeaning">
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>One B</td>
<td>Two B</td>
</tr>
<tr>
<td>One C</td>
<td>Two C</td>
</tr>
<tr>
<td>One D</td>
<td>Two D</td>
</tr>
</tbody>
</table>
</div>

<div class="quail-test" data-expected="pass" data-accessibility-test="tablePositioningShouldNotChangeMeaning">
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>One B</td>
<td>Two B</td>
</tr>
<tr>
<td>One C</td>
<td>Two C</td>
</tr>
<tr>
<td>One D</td>
<td>Two D</td>
</tr>
</tbody>
</table>
</div>

<script src="../quail-testrunner.js"></script> </body>
</html>

0 comments on commit fe7566d

Please sign in to comment.