| <!DOCTYPE HTML> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| table { |
| border-spacing: 0px; |
| } |
| |
| .width-test { |
| padding: 0px; |
| width: 256px; |
| height: 100px; |
| } |
| |
| .width-percent-test { |
| padding: 0; |
| height: 100px; |
| } |
| |
| .height-test { |
| padding: 0; |
| width: 100px; |
| height: 256px; |
| } |
| |
| .height-percent-test { |
| padding: 0; |
| width: 100px; |
| } |
| </style> |
| <div id="test"> |
| <table><tr><td class="width-test" style="width: 100px;">control width:100px</td></tr></table> |
| <table><tr><td class="width-test" style="width: calc(100px);">simple 100px</td></tr></table> |
| <table><tr><td class="width-test" style="width: calc(25px * 4);">25px * 4</td></tr></table> |
| <table><tr><td class="height-test" style="height: 100px;">control height:100px</td></tr></table> |
| <table><tr><td class="height-test" style="height: calc(100px);">simple 100px</td></tr></table> |
| <table><tr><td class="height-test" style="height: calc(25px * 4);">25px * 4</td></tr></table> |
| <div style="width:400px;"> |
| <table><tr><td class="width-percent-test" style="width: 25%;">control width:25%</td><td class="dummy"/></tr></table> |
| <table><tr><td class="width-percent-test" style="width: calc(25%);">simple calc(25%)</td><td class="dummy"/></tr></table> |
| <table><tr><td class="width-percent-test" style="width: calc(10% * 2 + 5%);">calc(10% * 2 + 5%)</td><td class="dummy"/></tr></table> |
| </div> |
| <div style="height: 400px"> |
| <table style="height: 25%"><tr><td class="height-percent-test">control height:25%</td></tr></table> |
| </div> |
| <div style="height: 400px"> |
| <table style="height: calc(25%);"><tr><td class="height-percent-test">simple calc(25%)</td></tr></table> |
| </div> |
| <div style="height: 400px"> |
| <table style="height: calc(10% * 2 + 5%);"><tr><td class="height-percent-test">calc(10% * 2 + 5%)</td></tr></table> |
| </div> |
| </div> |
| <script> |
| description("Tests that CSS3 calc() can be used in tables"); |
| |
| var cells = document.getElementById("test").getElementsByTagName("td"); |
| for (var i = 0; i < cells.length; ++i) { |
| var cell = cells[i]; |
| if (cell.className == 'dummy') |
| continue; |
| var width = cell.offsetWidth; |
| var height = cell.offsetHeight; |
| |
| shouldEvaluateTo("cell.offsetWidth", 100); |
| shouldEvaluateTo("cell.offsetHeight", 100); |
| |
| var error = []; |
| if (width != 100) |
| error.push("width was not 100"); |
| if (height != 100) |
| error.push("height was not 100"); |
| |
| if (error == "") { |
| cell.style.backgroundColor = "green"; |
| cell.innerHTML += " => PASS"; |
| } else { |
| cell.style.backgroundColor = "red"; |
| cell.innerHTML += " => FAIL: " + error.join(", "); |
| } |
| } |
| if (window.testRunner) |
| document.body.removeChild(document.getElementById("test")); |
| </script> |
