1 files changed, 201 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/tables/fixed-table-layout-022.xht b/testing/web-platform/tests/css/CSS2/tables/fixed-table-layout-022.xht
new file mode 100644
index 0000000000..ae9abb6dda
--- /dev/null
+++ b/testing/web-platform/tests/css/CSS2/tables/fixed-table-layout-022.xht
@@ -0,0 +1,201 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Test: table-layout fixed - columns with percentage width and absolute width</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <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-022-ref.xht" />
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+  <meta content="A column with a percentage width in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  table, div {font: 1.25em/1 Ahem;}
+
+  table
+  {
+  border: white solid;
+  border-width: 0px 29px; /* horizontal table border width is 58px total */
+  border-collapse: separate;
+  border-spacing: 15px 4px; /* horizontal border-spacing width is 75px total */
+  table-layout: fixed;
+  width: 533px;
+
+  /*
+  "With this (fast) algorithm, the horizontal layout of
+  the table does not depend on the contents of the cells;
+  it only depends on the table's width, the width of
+  the columns, and [table] borders or cell spacing."
+
+  So,
+
+    533px : total table width
+  -
+     58px : total horizontal border-spacing width
+  -
+     75px : total horizontal border-spacing width
+  ========
+    400px : total to split among the 4 columns
+  */
+
+  }
+
+  col#first
+  {
+  background-color: fuchsia;
+  width: 13%;
+  /* 400px multiplied by 13% = 52px */
+  }
+
+  col#second
+  {
+  background-color: olive;
+  width: 100px;
+  }
+
+  col#third
+  {
+  background-color: orange;
+  width: 31%;
+  /* 400px multiplied by 31% = 124px */
+
+  /*
+  300px - (52px + 124px) = 124px for last column
+  */
+  }
+
+  col#fourth {background-color: lime;}
+
+  td {padding: 1px 10px;}
+
+  td#first-cell {color: fuchsia;}
+
+  td#second-cell {color: olive;}
+
+  td#third-cell {color: orange;}
+
+  td#fourth-cell {color: lime;}
+
+  div {padding: 1px 0px;}
+
+  div#reference1st
+  {
+  background-color: fuchsia;
+  color: fuchsia;
+  left: 44px; /* 29px border-left of table + 15px border-spacing == 44px */
+  position: relative;
+  width: 52px;
+  }
+
+  div#reference2nd
+  {
+  background-color: olive;
+  bottom: 1.1em;
+  color: olive;
+  left: 111px;
+  /*
+    29px : border-left of table
+  +
+    15px : 1st border-spacing
+  +
+    52px : width of first column
+  +
+    15px border-spacing
+  ======
+   111px
+  */
+  position: relative;
+  width: 100px;
+  }
+
+  div#reference3rd
+  {
+  background-color: orange;
+  bottom: 2.2em;
+  color: orange;
+  left: 226px;
+  /*
+    29px : border-left of table
+  +
+    15px : 1st border-spacing
+  +
+    52px : width of first column
+  +
+    15px : 2nd border-spacing
+  +
+   100px : width of second column
+  +
+    15px : 3rd border-spacing
+  =======
+   226px
+  */
+  position: relative;
+  width: 124px;
+  }
+
+  div#reference4th
+  {
+  background-color: lime;
+  bottom: 3.3em;
+  color: lime;
+  left: 365px;
+  /*
+    29px : border-left of table
+  +
+    15px : 1st border-spacing
+  +
+    52px : width of first column
+  +
+    15px : 2nd border-spacing
+  +
+   100px : width of second column
+  +
+    15px : 3rd border-spacing
+  +
+   124px : width of third column
+  +
+    15px : 4th border-spacing
+  =======
+   365px
+  */
+  position: relative;
+  width: 124px;
+  }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same widths and the same horizontal positions.</p>
+
+  <table>
+
+    <col id="first"></col>
+    <col id="second"></col>
+    <col id="third"></col>
+    <col id="fourth"></col>
+
+    <tr>
+      <td id="first-cell">1</td>
+      <td id="second-cell">2</td>
+      <td id="third-cell">3</td>
+      <td id="fourth-cell">4</td>
+    </tr>
+
+  </table>
+
+  <div id="reference1st">r</div>
+
+  <div id="reference2nd">r</div>
+
+  <div id="reference3rd">r</div>
+
+  <div id="reference4th">r</div>
+
+ </body>
+</html>