| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>WebKit Bug 14858: col width ignored when not tied to a single cell</title> |
| <link href="http://www.w3.org/TR/REC-CSS2/tables.html#q4" rel="help" /> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script type="text/javascript" charset="utf-8"> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function parsePixelValue(str) |
| { |
| if (typeof str != "string" || str.length < 3 || str.substr(str.length - 2) != "px") { |
| testFailed(str + " is unparsable."); |
| return -1; |
| } |
| return parseFloat(str); |
| } |
| |
| function runTest() |
| { |
| var testCell = document.getElementById('testCell'); |
| var testTable = document.getElementById('testTable'); |
| description("This tests <a href='http://webkit.org/b/14858'>Bug 14858: <col> width ignored when not tied to a single cell</a>."); |
| cellWidth = Math.round(parsePixelValue(window.getComputedStyle(testCell).width)) + "px"; |
| tableWidth = Math.round(parsePixelValue(window.getComputedStyle(testTable).width)) + "px"; |
| shouldBe("cellWidth", "'250px'"); |
| shouldBe("tableWidth", "'500px'"); |
| isSuccessfullyParsed(); |
| } |
| </script> |
| <style type="text/css"> |
| div#testDiv { |
| top: 10px; |
| position: relative |
| } |
| div#info { |
| position: relative |
| } |
| table {border-spacing: 0} |
| td { |
| padding: 0; |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <div id="info"> |
| Two rows of cells should look identical.<br> |
| </div> |
| <div id="testDiv"> |
| <table id="testTable"> |
| <col width="50" /> |
| <col width="100" /> |
| <col width="150" /> |
| <col width="200" /> |
| <tbody> |
| <tr> |
| <td style="background-color:red">left</td> |
| <td style="background-color:green" id="testCell" colspan="2">middle</td> |
| <td style="background-color:blue">right</td> |
| </tr> |
| </tbody> |
| </table> |
| <table id="baseTable"> |
| <col width="50" /> |
| <col width="100" /> |
| <col width="150" /> |
| <col width="200" /> |
| <tbody> |
| <tr> |
| <td style="background-color:red">left</td> |
| <td style="background-color:green">middle</td> |
| <td style="background-color:green"></td> |
| <td style="background-color:blue">right</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div id="description"></div> |
| <div id="console"></div> |
| </body> |
| </html> |
