| <style> |
| td { padding: 10px } |
| </style> |
| <div style="-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl"> |
| <table> |
| <tr id="tr1"> |
| <td id="td1a"><span id="s1a">1-A</span></td> |
| <td id="td1b"><span id="s1b">1-B</span></td> |
| </tr> |
| <tr id="tr2"> |
| <td id="td2a"><span id="s2a">2-A</span></td> |
| <td id="td2b"><span id="s2b">2-B</span></td> |
| </tr> |
| </table> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script> |
| function doesRectContainRect(parent, child) { |
| if (child.top < parent.top) { |
| return false; |
| } |
| if (child.bottom > parent.bottom) { |
| return false; |
| } |
| if (child.left < parent.left) { |
| return false; |
| } |
| if (child.right > parent.right) { |
| return false; |
| } |
| return true; |
| } |
| |
| function rectToString(rect) { |
| return "(" + rect.left + " " + rect.top + " - " + rect.right + " " + rect.bottom + ")" |
| } |
| |
| function assert_contains(parent, child, description) { |
| assert_true(doesRectContainRect(parent, child), |
| description + " " + rectToString(parent) + " should contain " + rectToString(child)); |
| } |
| |
| function checkRowColumn(row, column) { |
| var columnName = ["a", "b", "c", "d", "e"]; |
| var trId = "tr" + (row + 1); |
| var tr = document.getElementById(trId); |
| var trRect = tr.getBoundingClientRect(); |
| var name = (row + 1).toString() + "-" + columnName[column].toUpperCase(); |
| var spanId = "s" + (row + 1) + columnName[column]; |
| var span = document.getElementById(spanId); |
| var spanRect = span.getBoundingClientRect(); |
| assert_contains(trRect, spanRect, name); |
| } |
| |
| test(function() { |
| for (var row = 0; row < 2; row++) { |
| for (var column = 0; column < 2; column++) { |
| checkRowColumn(row, column); |
| } |
| } |
| }, "The child of td should be inside of tr in vertical table"); |
| </script> |
| </div> |