| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| table, td, th { border: 2px solid blue; } /* To make it easier to visually inspect the test case. */ |
| </style> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| var table; |
| var tableHorizontalBorderSpacing; |
| var tableVerticalBorderSpacing; |
| var borderCollapseMenu; |
| |
| window.onload = function() { |
| description("This test checks that offset{Left, Top, Width, Height} work for table columns and column groups."); |
| |
| table = document.querySelector("table"); |
| borderCollapseMenu = document.getElementById("borderCollapseMenu"); |
| borderCollapseMenu.onchange = didChangeBorderCollapse; |
| |
| runTests(); |
| } |
| |
| function didChangeBorderCollapse() |
| { |
| var newBorderCollapse = borderCollapseMenu.options[borderCollapseMenu.selectedIndex].value; |
| table.style.borderCollapse = borderCollapseMenu.options[borderCollapseMenu.selectedIndex].value; |
| tableHorizontalBorderSpacing = newBorderCollapse === "collapse" ? 0 : parseInt(table.getAttribute("cellspacing"), 10); |
| tableVerticalBorderSpacing = tableHorizontalBorderSpacing; |
| } |
| |
| function runTests() |
| { |
| var savedSelectedIndex; |
| if (!window.testRunner) |
| savedSelectedIndex = borderCollapseMenu.selectedIndex; |
| |
| for (var i = 0; i < borderCollapseMenu.options.length; ++i) { |
| borderCollapseMenu.options[i].selected = true; |
| didChangeBorderCollapse(); |
| |
| debug('<br>When borderCollapse == "' + borderCollapseMenu.options[i].value + '"'); |
| |
| debug("<br>Tests for offsetLeft:"); |
| testOffsetLeft(); |
| |
| debug("<br>Tests for offsetTop:"); |
| testOffsetTop(); |
| |
| debug("<br>Tests for offsetWidth:"); |
| testOffsetWidth(); |
| |
| debug("<br>Tests for offsetHeight:"); |
| testOffsetHeight(); |
| } |
| |
| if (window.testRunner) |
| document.body.removeChild(document.getElementById("test-container")); |
| else { |
| borderCollapseMenu.options[savedSelectedIndex].selected = true; |
| didChangeBorderCollapse(); |
| } |
| finishJSTest(); |
| } |
| |
| function testOffsetLeft() |
| { |
| shouldEvaluateTo('document.getElementById("productNo").parentNode.offsetLeft', 'document.getElementById("row1Cell1").offsetLeft'); |
| shouldBe('document.getElementById("productNo").offsetLeft', 'document.getElementById("row1Cell1").offsetLeft'); |
| shouldBe('document.getElementById("productName").offsetLeft', 'document.getElementById("row1Cell2").offsetLeft'); |
| shouldBe('document.getElementById("hasMAndHasNAndHasO").offsetLeft', 'document.getElementById("row1Cell3").offsetLeft'); |
| shouldBe('document.getElementById("hasMAndHasN").offsetLeft', 'document.getElementById("row1Cell3").offsetLeft'); |
| shouldBe('document.getElementById("hasO").offsetLeft', 'document.getElementById("row1Cell5").offsetLeft'); |
| shouldBe('document.getElementById("hasP").offsetLeft', 'document.getElementById("row1Cell6").offsetLeft'); |
| shouldEvaluateTo('document.getElementById("columnThatShouldNotBeRendered").offsetLeft', 0); |
| } |
| |
| function testOffsetTop() |
| { |
| var top = document.getElementById("productNoHeading").offsetTop; |
| shouldEvaluateTo('document.getElementById("productNo").parentNode.offsetTop', top); |
| shouldEvaluateTo('document.getElementById("productNo").offsetTop', top); |
| shouldEvaluateTo('document.getElementById("productName").offsetTop', top); |
| shouldEvaluateTo('document.getElementById("hasMAndHasNAndHasO").offsetTop', top); |
| shouldEvaluateTo('document.getElementById("hasMAndHasN").offsetTop', top); |
| shouldEvaluateTo('document.getElementById("hasO").offsetTop', top); |
| shouldEvaluateTo('document.getElementById("hasP").offsetTop', top); |
| shouldEvaluateTo('document.getElementById("columnThatShouldNotBeRendered").offsetTop', 0); |
| } |
| |
| function testOffsetWidth() |
| { |
| shouldEvaluateTo('document.getElementById("productNo").parentNode.offsetWidth', document.getElementById("row1Cell1").offsetWidth + tableHorizontalBorderSpacing + document.getElementById("row1Cell2").offsetWidth); |
| shouldEvaluateTo('document.getElementById("productNo").offsetWidth', document.getElementById("row1Cell1").offsetWidth); |
| shouldEvaluateTo('document.getElementById("productName").offsetWidth', document.getElementById("row1Cell2").offsetWidth); |
| shouldEvaluateTo('document.getElementById("hasMAndHasNAndHasO").offsetWidth', document.getElementById("row1Cell3").offsetWidth + tableHorizontalBorderSpacing + document.getElementById("row1Cell4").offsetWidth + tableHorizontalBorderSpacing + document.getElementById("row1Cell5").offsetWidth); |
| shouldEvaluateTo('document.getElementById("hasMAndHasN").offsetWidth', document.getElementById("row1Cell3").offsetWidth + tableHorizontalBorderSpacing + document.getElementById("row1Cell4").offsetWidth); |
| shouldEvaluateTo('document.getElementById("hasO").offsetWidth', document.getElementById("row1Cell5").offsetWidth); |
| shouldEvaluateTo('document.getElementById("hasP").offsetWidth', document.getElementById("row1Cell6").offsetWidth); |
| shouldEvaluateTo('document.getElementById("columnThatShouldNotBeRendered").offsetWidth', 0); |
| } |
| |
| function testOffsetHeight() |
| { |
| var height = tableContentHeight(); |
| shouldEvaluateTo('document.getElementById("productNo").parentNode.offsetHeight', height); |
| shouldEvaluateTo('document.getElementById("productNo").offsetHeight', height); |
| shouldEvaluateTo('document.getElementById("productName").offsetHeight', height); |
| shouldEvaluateTo('document.getElementById("hasMAndHasNAndHasO").offsetHeight', height); |
| shouldEvaluateTo('document.getElementById("hasMAndHasN").offsetHeight', height); |
| shouldEvaluateTo('document.getElementById("hasO").offsetHeight', height); |
| shouldEvaluateTo('document.getElementById("hasP").offsetHeight', height); |
| shouldEvaluateTo('document.getElementById("columnThatShouldNotBeRendered").offsetHeight', 0); |
| } |
| |
| function tableContentHeight() |
| { |
| var result = 0; |
| var rows = document.getElementsByTagName("tr"); |
| var numberOfRows = rows.length; |
| if (numberOfRows) |
| result += rows[0].offsetHeight; |
| for (var i = 1; i < numberOfRows; ++i) |
| result += tableVerticalBorderSpacing + rows[i].offsetHeight; |
| return result; |
| } |
| </script> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="test-container"> |
| <label for="borderCollapseMenu">border-collapse</label> |
| <select id="borderCollapseMenu"> |
| <option value="separate">separate</option> |
| <option value="collapse">collapse</option> |
| </select> |
| <table cellspacing="4"> |
| <caption>Product Table</caption> |
| <col id="productNo" style="background-color: lightblue"> |
| <col id="productName" style="background-color: lightgreen"> |
| <colgroup id="hasMAndHasNAndHasO" style="background-color: lightgray"> |
| <col id="hasMAndHasN" span="2"> |
| <col id="hasO"> |
| </colgroup> |
| <colgroup id="hasP" style="background-color: gray"> |
| <colgroup id="columnThatShouldNotBeRendered" style="background-color: red" span="2"> |
| <thead> |
| <tr><th id="productNoHeading">Product No.</th><th>Name</th><th>Has M</th><th>Has N</th><th>Has O</th><th>Has P</th></tr> |
| </thead> |
| <tbody> |
| <tr><td id="row1Cell1">1</td><td id="row1Cell2">Gizmo A</td><td id="row1Cell3">✓</td><td id="row1Cell4"></td><td id="row1Cell5">✓</td><td id="row1Cell6">✓</td></tr> |
| <tr><td>2</td><td>Gizmo A Pro</td><td>✓</td><td>✓</td><td>✓</td><td>✓</td></tr> |
| <tr><td>3</td><td>Gizmo B</td><td><td><td colspan="2" style="text-align: center">✓</td></tr> |
| </tbody> |
| </table> |
| </div> |
| <div id="console"></div> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
