Diff
Modified: trunk/LayoutTests/ChangeLog (109679 => 109680)
--- trunk/LayoutTests/ChangeLog 2012-03-04 19:07:52 UTC (rev 109679)
+++ trunk/LayoutTests/ChangeLog 2012-03-04 20:43:42 UTC (rev 109680)
@@ -1,3 +1,17 @@
+2012-03-04 Mike Lawther <[email protected]>
+
+ table tests for CSS3 calc
+ https://bugs.webkit.org/show_bug.cgi?id=75898
+
+ Reviewed by Julien Chaffraix.
+
+ Tests CSS3 calc() (see http://webkit.org/b/16662) on some simple examples with tables.
+
+ * css3/calc/table-calcs-expected.txt: Added.
+ * css3/calc/table-calcs.html: Added.
+ * css3/calc/table-empty-cells-expected.html: Added.
+ * css3/calc/table-empty-cells.html: Added.
+
2012-03-04 Nikolas Zimmermann <[email protected]>
Introduce SMIL overrideStyle, to make SVG stop mutating CSS styles directly
Added: trunk/LayoutTests/css3/calc/table-calcs-expected.txt (0 => 109680)
--- trunk/LayoutTests/css3/calc/table-calcs-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/calc/table-calcs-expected.txt 2012-03-04 20:43:42 UTC (rev 109680)
@@ -0,0 +1,33 @@
+Tests that CSS3 calc() can be used in tables
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS cell.offsetWidth is 100
+PASS cell.offsetHeight is 100
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/css3/calc/table-calcs.html (0 => 109680)
--- trunk/LayoutTests/css3/calc/table-calcs.html (rev 0)
+++ trunk/LayoutTests/css3/calc/table-calcs.html 2012-03-04 20:43:42 UTC (rev 109680)
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<script src=""
+<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: -webkit-calc(100px);">simple 100px</td></tr></table>
+ <table><tr><td class="width-test" style="width: -webkit-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: -webkit-calc(100px);">simple 100px</td></tr></table>
+ <table><tr><td class="height-test" style="height: -webkit-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: -webkit-calc(25%);">-webkit-calc(25%)</td><td class="dummy"/></tr></table>
+ <table><tr><td class="width-percent-test" style="width: -webkit-calc(10% * 2 + 5%);">-webkit-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: -webkit-calc(25%);"><tr><td class="height-percent-test">simple 25%</td></tr></table>
+ </div>
+ <div style="height: 400px">
+ <table style="height: -webkit-calc(10% * 2 + 5%);"><tr><td class="height-percent-test">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.layoutTestController)
+ document.body.removeChild(document.getElementById("test"));
+</script>
+<script src=""
\ No newline at end of file
Added: trunk/LayoutTests/css3/calc/table-empty-cells-expected.html (0 => 109680)
--- trunk/LayoutTests/css3/calc/table-empty-cells-expected.html (rev 0)
+++ trunk/LayoutTests/css3/calc/table-empty-cells-expected.html 2012-03-04 20:43:42 UTC (rev 109680)
@@ -0,0 +1,239 @@
+<!DOCTYPE HTML>
+<style>
+ table {
+ border-spacing: 0px;
+ width: 100%;
+ }
+ .percent { width:50%; }
+ .fixed { width:400px; }
+ .cell1 { height:25px; background-color: aqua }
+ .border { border: 2px solid green }
+ .padding { padding: 2px }
+ .margin { margin: 2px }
+ .pre { white-space: pre }
+ table { border: 2px solid black }
+</style>
+<body leftmargin="0" topmargin="0">
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1">First cell empty, second auto width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First cell empty, second percent width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 fixed">First cell empty, second fixed width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td class="pre"> </td>
+ <td class="cell1 percent">First cell empty (with space) and has white-space:pre</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td class="pre"></td>
+ <td class="cell1 percent">First cell empty (no space) and has white-space:pre</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c width="100%">
+ <tbody>
+ <tr>
+ <td class="border"> </td>
+ <td class="cell1 percent">First cell empty but has border</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c width="100%">
+ <tbody>
+ <tr>
+ <td class="padding"> </td>
+ <td class="cell1 percent">First cell empty but has padding</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c cellpadding="1" width="100%">
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First cell empty, table has cellpadding</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c cellspacing="1" width="100%">
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First cell empty, table has cellspacing</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c width="100%">
+ <tbody>
+ <tr>
+ <td class="margin"> </td>
+ <td class="cell1 percent">First cell empty but has margin</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=e width="100%">
+ <tbody>
+ <tr>
+ <td class="bgcolor"> </td>
+ <td class="cell1 percent">First cell empty but has background color</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First row, first cell empty</td>
+ </tr>
+ <tr>
+ <td> text </td>
+ <td class="cell1 percent">Second row, first cell not empty</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First row, first cell empty</td>
+ </tr>
+ <tr>
+ <td/>
+ <td class="cell1 percent">Second row, first cell empty</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1 percent">First cell empty, has colspan</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1"> text </td>
+ <td class="cell1 percent">First row, first cell empty, second cell non-empty</td>
+ </tr>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1">Second row, first cell empty with colspan=2</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td class="cell1"> text </td>
+ <td/>
+ <td class="cell1 percent">First row, first cell non-empty, second cell empty</td>
+ </tr>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1">Second row, first cell empty with colspan=2</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ <td class="cell1 percent">First row, first and second cell empty</td>
+ </tr>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1 percent">Second row, first cell empty, has colspan=2</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ <td class="cell1 percent">First row, first and second cell empty</td>
+ </tr>
+ <tr>
+ <td class="percent" colspan="2"> </td>
+ <td class="cell1 percent">Second row, first cell empty, has colspan=2 and percent width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ <td class="cell1 percent">First row, first and second cell empty</td>
+ </tr>
+ <tr>
+ <td class="fixed" colspan="2"> </td>
+ <td class="cell1 percent">Second row, first cell empty, has colspan=2 and fixed width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ One empty cell:
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ </tr>
+ </tbody>
+ </table>
+
+ Two empty cells:
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ </tr>
+ </tbody>
+ </table>
+</body>
Added: trunk/LayoutTests/css3/calc/table-empty-cells.html (0 => 109680)
--- trunk/LayoutTests/css3/calc/table-empty-cells.html (rev 0)
+++ trunk/LayoutTests/css3/calc/table-empty-cells.html 2012-03-04 20:43:42 UTC (rev 109680)
@@ -0,0 +1,239 @@
+<!DOCTYPE HTML>
+<style>
+ table {
+ border-spacing: 0px;
+ width: 100%;
+ }
+ .percent { width:-webkit-calc(50%); }
+ .fixed { width:-webkit-calc(400px); }
+ .cell1 { height:-webkit-calc(25px); background-color: aqua }
+ .border { border: -webkit-calc(2px) solid green }
+ .padding { padding: -webkit-calc(2px) }
+ .margin { margin: -webkit-calc(2px) }
+ .pre { white-space: pre }
+ table { border: -webkit-calc(2px) solid black }
+</style>
+<body leftmargin="0" topmargin="0">
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1">First cell empty, second auto width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First cell empty, second percent width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 fixed">First cell empty, second fixed width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td class="pre"> </td>
+ <td class="cell1 percent">First cell empty (with space) and has white-space:pre</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td class="pre"></td>
+ <td class="cell1 percent">First cell empty (no space) and has white-space:pre</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c width="100%">
+ <tbody>
+ <tr>
+ <td class="border"> </td>
+ <td class="cell1 percent">First cell empty but has border</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c width="100%">
+ <tbody>
+ <tr>
+ <td class="padding"> </td>
+ <td class="cell1 percent">First cell empty but has padding</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c cellpadding="1" width="100%">
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First cell empty, table has cellpadding</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c cellspacing="1" width="100%">
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First cell empty, table has cellspacing</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=c width="100%">
+ <tbody>
+ <tr>
+ <td class="margin"> </td>
+ <td class="cell1 percent">First cell empty but has margin</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table id=e width="100%">
+ <tbody>
+ <tr>
+ <td class="bgcolor"> </td>
+ <td class="cell1 percent">First cell empty but has background color</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First row, first cell empty</td>
+ </tr>
+ <tr>
+ <td> text </td>
+ <td class="cell1 percent">Second row, first cell not empty</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1 percent">First row, first cell empty</td>
+ </tr>
+ <tr>
+ <td/>
+ <td class="cell1 percent">Second row, first cell empty</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1 percent">First cell empty, has colspan</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td class="cell1"> text </td>
+ <td class="cell1 percent">First row, first cell empty, second cell non-empty</td>
+ </tr>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1">Second row, first cell empty with colspan=2</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td class="cell1"> text </td>
+ <td/>
+ <td class="cell1 percent">First row, first cell non-empty, second cell empty</td>
+ </tr>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1">Second row, first cell empty with colspan=2</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ <td class="cell1 percent">First row, first and second cell empty</td>
+ </tr>
+ <tr>
+ <td colspan="2"> </td>
+ <td class="cell1 percent">Second row, first cell empty, has colspan=2</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ <td class="cell1 percent">First row, first and second cell empty</td>
+ </tr>
+ <tr>
+ <td class="percent" colspan="2"> </td>
+ <td class="cell1 percent">Second row, first cell empty, has colspan=2 and percent width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ <td class="cell1 percent">First row, first and second cell empty</td>
+ </tr>
+ <tr>
+ <td class="fixed" colspan="2"> </td>
+ <td class="cell1 percent">Second row, first cell empty, has colspan=2 and fixed width</td>
+ </tr>
+ </tbody>
+ </table>
+
+ One empty cell:
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ </tr>
+ </tbody>
+ </table>
+
+ Two empty cells:
+ <table>
+ <tbody>
+ <tr>
+ <td/>
+ <td/>
+ </tr>
+ </tbody>
+ </table>
+</body>
