<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=414190 --> <head> <title>Test for Bug 414190</title> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=414190">Mozilla Bug 414190</a> <p id="display"></p> <table id="table" border="0" cellspacing="0" cellpadding="0" style="width:100px; border:10px solid silver;"> <tr><td id="cell" style="height:100px;"></td></tr> <caption id="caption" style="caption-side:bottom; width:50px; height:70px; background:yellow;"></caption> </table> <div id="content" style="display: none"> </div> <pre id="test"> <script class="testbody" type="text/javascript"> function isEqualRect(r1, r2, r1border, s) { is(r1.left + r1border, r2.left, s + " (left)"); is(r1.right - r1border, r2.right, s + " (right)"); is(r1.top + r1border, r2.top, s + " (top)"); is(r1.bottom - r1border, r2.bottom, s + " (bottom)"); } var table = document.getElementById("table"); var cell = document.getElementById("cell"); var caption = document.getElementById("caption"); var tableRects = table.getClientRects(); var tableBoundingRect = table.getBoundingClientRect(); var cellBoundingRect = cell.getBoundingClientRect(); var captionBoundingRect = caption.getBoundingClientRect(); is(tableRects.length, 2, "Table should have rects for body and caption"); isEqualRect(tableRects[0], cellBoundingRect, 10, "Table first rect should be cell rect"); isEqualRect(tableRects[1], captionBoundingRect, 0, "Table second rect should be caption rect"); is(cellBoundingRect.right - cellBoundingRect.left, 80, "Cell incorrect width"); is(cellBoundingRect.bottom - cellBoundingRect.top, 100, "Cell incorrect height"); is(captionBoundingRect.right - captionBoundingRect.left, 50, "Caption incorrect width"); is(captionBoundingRect.bottom - captionBoundingRect.top, 70, "Caption incorrect height"); is(captionBoundingRect.top, cellBoundingRect.bottom + 10, "Discontiguous vertical geometry"); is(tableBoundingRect.top, cellBoundingRect.top - 10, "Table top error"); is(tableBoundingRect.left, cellBoundingRect.left - 10, "Table left error"); is(tableBoundingRect.bottom, captionBoundingRect.bottom, "Table bottom error"); is(tableBoundingRect.right, cellBoundingRect.right + 10, "Table right error"); caption.style.captionSide = "left"; tableRects = table.getClientRects(); tableBoundingRect = table.getBoundingClientRect(); cellBoundingRect = cell.getBoundingClientRect(); captionBoundingRect = caption.getBoundingClientRect(); is(tableRects.length, 2, "Table should have rects for body and caption"); isEqualRect(tableRects[0], cellBoundingRect, 10, "Table first rect should be cell rect plus border"); isEqualRect(tableRects[1], captionBoundingRect, 0, "Table second rect should be caption rect"); is(cellBoundingRect.right - cellBoundingRect.left, 80, "Cell incorrect width"); is(cellBoundingRect.bottom - cellBoundingRect.top, 100, "Cell incorrect height"); is(captionBoundingRect.right - captionBoundingRect.left, 50, "Caption incorrect width"); is(captionBoundingRect.bottom - captionBoundingRect.top, 70, "Caption incorrect height"); is(captionBoundingRect.right + 10, cellBoundingRect.left, "Discontiguous horizontal geometry"); is(tableBoundingRect.top, cellBoundingRect.top - 10, "Table top error"); is(tableBoundingRect.left, captionBoundingRect.left, "Table left error"); is(tableBoundingRect.bottom, cellBoundingRect.bottom + 10, "Table bottom error"); is(tableBoundingRect.right, cellBoundingRect.right + 10, "Table right error"); </script> </pre> </body> </html>