diff options
Diffstat (limited to '')
| -rw-r--r-- | layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html new file mode 100644 index 0000000000..57eed6640d --- /dev/null +++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vlr.html @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Test: table-layout fixed - columns with percentage height and absolute height</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> + <link rel="match" href="fixed-table-layout-023-ref.htm"> + <meta content="" name="flags"> + <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert"> + <style type="text/css"> + div.test { writing-mode: vertical-lr; } + body + { + margin: 8px; + height: 640px; + } + table + { + border: white solid; + border-width: 11px 0px; /* vertical table border height is 22px total */ + border-collapse: separate; + border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */ + table-layout: fixed; + height: 80%; /* 640px mult by 80% == 512px */ + /* + "With this (fast) algorithm, the vertical layout of + the table does not depend on the contents of the cells; + it only depends on the table's height, the height of + the columns, and [table] borders or cell spacing." + So, + 512px : total table height + - + 90px : total vertical border-spacing height + - + 22px : total vertical border-spacing height + ======== + 400px : total to split among the 4 columns + */ + } + col#first + { + background-color: fuchsia; + height: 13%; + /* 400px multiplied by 13% = 52px */ + } + col#second + { + background-color: olive; + height: 100px; + } + col#third + { + background-color: orange; + height: 31%; + /* 400px multiplied by 31% = 124px */ + /* + 400px - (52px + 100px + 124px) = 124px for last column + */ + } + col#fourth {background-color: lime;} + td {padding: 10px 0px; width: 24px; } + td#first-cell {color: fuchsia;} + td#second-cell {color: olive;} + td#third-cell {color: orange;} + td#fourth-cell {color: lime;} + div {padding: 0px;} + div#reference1st + { + background-color: fuchsia; + color: fuchsia; + top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */ + position: relative; + height: 52px; + width: 24px; + } + div#reference2nd + { + background-color: olive; + right: 24px; + color: olive; + top: 99px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + ======= + 99px + */ + position: relative; + height: 100px; + width: 24px; + } + div#reference3rd + { + background-color: orange; + right: 48px; + color: orange; + top: 217px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + ======= + 217px + */ + position: relative; + height: 124px; + width: 24px; + } + div#reference4th + { + background-color: lime; + right: 72px; + color: lime; + top: 359px; + /* + 11px : border-top of table + + + 18px : 1st border-spacing + + + 52px : height of first column + + + 18px : 2nd border-spacing + + + 100px : height of second column + + + 18px : 3rd border-spacing + + + 124px : height of third column + + + 18px : 4th border-spacing + ======= + 359px + */ + position: relative; + height: 124px; + width: 24px; + } + </style> + </head> + <body> + <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> + <div class="test"> + <table> + <col id="first"> + <col id="second"> + <col id="third"> + <col id="fourth"> + <tr> + <td id="first-cell">1st</td> + <td id="second-cell">2nd</td> + <td id="third-cell">3rd</td> + <td id="fourth-cell">4th</td> + </tr> + </table> + <div id="reference1st">ref</div> + <div id="reference2nd">ref</div> + <div id="reference3rd">ref</div> + <div id="reference4th">ref</div> + </div> + </body> +</html> |