summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/CSS2/tables/fixed-table-layout-022.xht
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/tables/fixed-table-layout-022.xht')
-rw-r--r--testing/web-platform/tests/css/CSS2/tables/fixed-table-layout-022.xht201
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>