summaryrefslogtreecommitdiffstats
path: root/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html175
1 files changed, 175 insertions, 0 deletions
diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.html
new file mode 100644
index 0000000000..3f6b042d8b
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/fixed-table-layout-023-vrl.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-rl; }
+ 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 */
+ right: 72px;
+ position: relative;
+ height: 52px;
+ width: 24px;
+ }
+ div#reference2nd
+ {
+ background-color: olive;
+ right: 48px;
+ 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: 24px;
+ 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;
+ 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">
+ <div id="reference1st">ref</div>
+ <div id="reference2nd">ref</div>
+ <div id="reference3rd">ref</div>
+ <div id="reference4th">ref</div>
+ <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>
+ </body>
+</html>