| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| description("This test checks that the width style is applied correctly to CSS tables with respect to table paddings and borders."); |
| |
| function computeCSSTableOffsetWidth(extraTableStyle) |
| { |
| return computeCSSTableProperty('offsetWidth', extraTableStyle) |
| } |
| |
| function computeCSSTableOffsetHeight(extraTableStyle) |
| { |
| return computeCSSTableProperty('offsetHeight', extraTableStyle) |
| } |
| |
| function computeCSSTableProperty(propertyName, extraTableStyle) |
| { |
| var table = document.createElement("div"); |
| table.setAttribute("style", "display: table; " + extraTableStyle); |
| |
| var rowGroup = document.createElement("div"); |
| rowGroup.setAttribute("style", "display: table-row-group;"); |
| |
| var row = document.createElement("div"); |
| row.setAttribute("style", "display: table-row;"); |
| |
| var cell = document.createElement("div"); |
| cell.setAttribute("style", "display: table-cell;"); |
| |
| var cellContent = document.createElement("div"); |
| cellContent.setAttribute("style", "width: 100px; height: 50px; background-color: #090;"); |
| |
| document.body.appendChild(table); |
| table.appendChild(rowGroup); |
| rowGroup.appendChild(row); |
| row.appendChild(cell); |
| cell.appendChild(cellContent); |
| |
| var propertyValue = table[propertyName]; |
| |
| document.body.removeChild(table); |
| |
| return propertyValue; |
| } |
| |
| // separated borders |
| |
| shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px;')", 200+2+4+6+8); |
| shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; direction: rtl;')", 200+2+4+6+8); |
| |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;')", 150+10+30+50+70); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl;')", 150+10+30+50+70); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70); |
| |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;')", 150+10+30+50+70); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl;')", 150+10+30+50+70); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70); |
| |
| // collapsed borders |
| |
| shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse;')", 200+(2+4)/2); |
| shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; direction: rtl;')", 200+(2+4)/2); |
| |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;')", 150+(10+30)/2); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl;')", 150+(10+30)/2); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2); |
| |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;')", 150+(10+30)/2); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl;')", 150+(10+30)/2); |
| shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
