mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
201 lines
3.9 KiB
HTML
201 lines
3.9 KiB
HTML
<!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" />
|
|
|
|
<meta content="" name="flags" />
|
|
<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 serif;}
|
|
|
|
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">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>
|
|
|
|
</body>
|
|
</html>
|