Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-30 01:28:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

Browse source
This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 • committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
Download patch file Download diff file Expand all files Collapse all files

168
tests/wpt/web-platform-tests/css/CSS2/tables/fixed-table-layout-021.xht Normal file
View file

@ -0,0 +1,168 @@
<!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</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-021-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 borders or cell spacing."
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
So,
533px : total table width
-
58px : total horizontal border 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: 22%;
/* 400px multiplied by 22% = 88px */
}
col#third
{
background-color: orange;
width: 31%;
/* 400px multiplied by 31% = 124px */
/*
100% - (13% + 22% + 31%) == 34% for last column
*/
}
td {padding: 1px 10px;}
td#first-cell {color: fuchsia;}
td#second-cell {color: olive;}
td#third-cell {color: orange;}
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 : 2nd border-spacing
=======
111px
*/
position: relative;
width: 88px;
}
div#reference3rd
{
background-color: orange;
bottom: 2.2em;
color: orange;
left: 214px;
/*
29px : border-left of table
+
15px : 1st border-spacing
+
52px : width of first column
+
15px : 2nd border-spacing
+
88px : width of second column
+
15px : 3rd border-spacing
=======
214px
*/
position: relative;
width: 124px;
}
]]></style>
</head>
<body>
<p>Test passes if the colored (fuchsia, olive and orange) 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></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>
</body>
</html>