1 files changed, 140 insertions, 0 deletions
diff --git a/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html
new file mode 100644
index 000000000..e929c92b2
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/fixed-table-layout-021-vlr.html
@@ -0,0 +1,140 @@
+<!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</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-021-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; }
+  table
+  {
+   border: white solid;
+   border-width: 29px 0px; /* vertical table border height is 58px total */
+   border-collapse: separate;
+   border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */
+   table-layout: fixed;
+   height: 533px;
+  /*
+  "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 borders or cell spacing."
+  http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
+  So,
+    533px : total table height
+  -
+     58px : total vertical border height
+  -
+     75px : 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: 22%;
+  /* 400px multiplied by 22% = 88px */
+  }
+  col#third
+  {
+   background-color: orange;
+   height: 31%;
+  /* 400px multiplied by 31% = 124px */
+  /*
+  100% - (13% + 22% + 31%) == 34% for last column
+  */
+  }
+  td {padding: 10px 0px; width: 24px; }
+  td#first-cell {color: fuchsia;}
+  td#second-cell {color: olive;}
+  td#third-cell {color: orange;}
+  div {padding: 0px;}
+  div#reference1st
+  {
+   background-color: fuchsia;
+   color: fuchsia;
+   top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */
+   position: relative;
+   height: 52px;
+   width: 24px;
+  }
+  div#reference2nd
+  {
+   background-color: olive;
+   color: olive;
+   right: 24px;
+   top: 111px;
+  /*
+    29px : border-top of table
+  +
+    15px : 1st border-spacing
+  +
+    52px : height of first column
+  +
+    15px : 2nd border-spacing
+  =======
+   111px
+  */
+   position: relative;
+   height: 88px;
+   width: 24px;
+  }
+  div#reference3rd
+  {
+   background-color: orange;
+   right: 48px;
+   color: orange;
+   top: 214px;
+  /*
+    29px : border-top of table
+  +
+    15px : 1st border-spacing
+  +
+    52px : height of first column
+  +
+    15px : 2nd border-spacing
+  +
+    88px : height of second column
+  +
+    15px : 3rd border-spacing
+  =======
+   214px
+  */
+   position: relative;
+   height: 124px;
+   width: 24px;
+  }
+  </style>
+ </head>
+ <body>
+   <p>Test passes if the colored (fuchsia, olive and orange) 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>
+       <tr>
+	 <td id="first-cell">1st</td>
+	 <td id="second-cell">2nd</td>
+	 <td id="third-cell">3rd</td>
+	 <td></td>
+       </tr>
+     </table>
+     <div id="reference1st">ref</div>
+     <div id="reference2nd">ref</div>
+     <div id="reference3rd">ref</div>
+   </div>
+ </body>
+</html>