mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Tests for bug 1173958. r=jfkthame
This commit is contained in:
Simon Montagu
parent
81f7a8e890
commit
a75d832136
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-lr; }
|
||||
div.stripe
|
||||
{
|
||||
width: 24px;
|
||||
height: 100px;
|
||||
}
|
||||
div.blue {background-color: blue;}
|
||||
div.black {background-color: black;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<div class="black stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Value other than 'auto' for column height sets height of cells in the column</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column element with a value other than 'auto' for the 'height' property sets the height for the column of cells it contains.">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-lr; }
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
#col
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: black;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
width: 24px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col id="col">
|
||||
<col>
|
||||
<tr>
|
||||
<td id="cell">X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Value other than 'auto' for column height sets height of cells in the column</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column element with a value other than 'auto' for the 'height' property sets the height for the column of cells it contains.">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-rl; }
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
#col
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: blue;
|
||||
color: blue;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
width: 24px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col id="col">
|
||||
<col>
|
||||
<tr>
|
||||
<td id="cell">X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Cell in the first row with specified height sets the height for the column</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with specified non-auto 'height' sets the height for its column in the absence of a column element with specified non-auto height.">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-lr; }
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: black;
|
||||
height: 100px;
|
||||
width: 24px;
|
||||
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
width: 24px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="cell">X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Cell in the first row with specified height sets the height for the column</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with specified non-auto 'height' sets the height for its column in the absence of a column element with specified non-auto height.">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-rl; }
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: blue;
|
||||
height: 100px;
|
||||
width: 24px;
|
||||
color: blue;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
width: 24px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="cell">X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-lr; }
|
||||
div.stripe
|
||||
{
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
div#blue-stripe {background-color: blue;}
|
||||
div#reference {background-color: black;}
|
||||
div.middle { width: 20px; height: 50px; }
|
||||
div.bottom { background-color: orange; float: right; }
|
||||
div.top { background-color: silver; float: left; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the blue and black bars are the same height
|
||||
and the gray and orange boxes are half of that height.</p>
|
||||
<div class="test">
|
||||
<div class="stripe" id="reference"></div>
|
||||
<div class="stripe">
|
||||
<div class="middle top"></div>
|
||||
<div class="middle bottom"></div>
|
||||
</div>
|
||||
<div class="stripe" id="blue-stripe"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The height of a column-spanning cell (which determines column heights in fixed table layout) is divided over the columns it spans.">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-lr; }
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
#cell1
|
||||
{
|
||||
background: black;
|
||||
height: 98px;
|
||||
}
|
||||
td
|
||||
{
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
#cell2
|
||||
{
|
||||
background: silver;
|
||||
}
|
||||
#cell3
|
||||
{
|
||||
background: orange;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the blue and black bars are the same height
|
||||
and the gray and orange boxes are half of that height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="cell1" colspan="2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="cell2"></td>
|
||||
<td id="cell3"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</test>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="The height of a column-spanning cell (which determines column heights in fixed table layout) is divided over the columns it spans.">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-rl; }
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
#cell1
|
||||
{
|
||||
background: blue;
|
||||
height: 98px;
|
||||
}
|
||||
td
|
||||
{
|
||||
width: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
#cell2
|
||||
{
|
||||
background: silver;
|
||||
}
|
||||
#cell3
|
||||
{
|
||||
background: orange;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the blue and black bars are the same height
|
||||
and the gray and orange boxes are half of that height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="cell1" colspan="2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="cell2"></td>
|
||||
<td id="cell3"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</test>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights.">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-lr; }
|
||||
#div1
|
||||
{
|
||||
width: 100px;
|
||||
height: 300px;
|
||||
}
|
||||
#div1 > div
|
||||
{
|
||||
float: left;
|
||||
}
|
||||
.px50
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#px100
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<div id="div1">
|
||||
<div class="px50">1</div>
|
||||
<div class="px50">2</div>
|
||||
<div id="px100">3</div>
|
||||
<div class="px50">4</div>
|
||||
<div class="px50">5</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights.">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-lr; }
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
height: 300px;
|
||||
}
|
||||
#col1
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
}
|
||||
#cell1
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#cell2
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col id="col1">
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td id="cell1">2</td>
|
||||
<td id="cell2" colspan="2">3</td>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Leftover table height is divided evenly among auto-sized columns</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Any remaining vertical table space is divided evenly among columns which do not have specified heights.">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-rl; }
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
height: 300px;
|
||||
}
|
||||
#col1
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
}
|
||||
#cell1
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#cell2
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col id="col1">
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td id="cell1">2</td>
|
||||
<td id="cell2" colspan="2">3</td>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
div.stripe
|
||||
{
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
div.blue {background-color: blue;}
|
||||
div.orange {background-color: orange;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if all of the blue lines below appear to have the same height.</p>
|
||||
<div class="blue stripe"></div>
|
||||
<div class="orange stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
<div class="orange stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
<div class="orange stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
<div class="orange stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
<div class="orange stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
<div class="orange stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Remaining table height is divided evenly among non auto-sized columns (minus borders and cell spacing)</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Any remaining horizontal table space is divided evenly among columns which do not have specified heights (minus borders and cell spacing).">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
background: blue;
|
||||
border-collapse: separate;
|
||||
border-spacing: 10px 0;
|
||||
table-layout: fixed;
|
||||
height: 130px;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: blue;
|
||||
border-top: 10px solid orange;
|
||||
border-bottom: 10px solid orange;
|
||||
width: 100px;
|
||||
padding: 0;
|
||||
}
|
||||
#specified
|
||||
{
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if all of the blue lines below appear to have the same height.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="specified"></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Remaining table height is divided evenly among non auto-sized columns (minus borders and cell spacing)</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Any remaining horizontal table space is divided evenly among columns which do not have specified heights (minus borders and cell spacing).">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
background: blue;
|
||||
border-collapse: separate;
|
||||
border-spacing: 10px 0;
|
||||
table-layout: fixed;
|
||||
height: 130px;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: blue;
|
||||
border-top: 10px solid orange;
|
||||
border-bottom: 10px solid orange;
|
||||
width: 100px;
|
||||
padding: 0;
|
||||
}
|
||||
#specified
|
||||
{
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if all of the blue lines below appear to have the same height.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="specified"></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-lr; }
|
||||
div.stripe
|
||||
{
|
||||
width: 24px;
|
||||
height: 200px;
|
||||
}
|
||||
div.blue {background-color: blue;}
|
||||
div.black {background-color: black;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<div class="black stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (table height wins)</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A fixed layout table's height will be its specified height if that height is greater than the sum of its columns' heights.">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-lr; }
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: black;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
width: 24px;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
width: 24px;
|
||||
}
|
||||
#div1, table
|
||||
{
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td>X</td>
|
||||
<td>X</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (table height wins)</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A fixed layout table's height will be its specified height if that height is greater than the sum of its columns' heights.">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-rl; }
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: blue;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
width: 24px;
|
||||
color: blue;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
width: 24px;
|
||||
}
|
||||
#div1, table
|
||||
{
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td>X</td>
|
||||
<td>X</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Cell that overflows a fixed-height table</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content.">
|
||||
<style type="text/css">
|
||||
div.test {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.prose {
|
||||
writing-mode: horizontal-tb;
|
||||
width: 180px;
|
||||
padding: 1em;
|
||||
}
|
||||
div.textContainer
|
||||
{
|
||||
height: 100px;
|
||||
border: 1px solid blue;
|
||||
margin: 2px;
|
||||
}
|
||||
#hidden
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<div class="textContainer">FillerTextFillerTextFillerTextFiller</div>
|
||||
<div class="prose">Test passes if the text in the blue rectangle to the left
|
||||
of this line spills outside of its bottom border and the text
|
||||
in the blue rectangle to the right of this line is contained
|
||||
within the rectangle's border (and appears to be cut off on
|
||||
its bottom edge).</div>
|
||||
<div class="textContainer" id="hidden">FillerTextFillerTextFillerTextFiller</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Cell that overflows a fixed-height table</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content.">
|
||||
<style type="text/css">
|
||||
div.test {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
div.prose {
|
||||
writing-mode: horizontal-tb;
|
||||
width: 180px;
|
||||
margin: 1em;
|
||||
}
|
||||
table
|
||||
{
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td
|
||||
{
|
||||
border: 1px solid blue;
|
||||
height: 100px;
|
||||
padding: 0px;
|
||||
}
|
||||
#hidden
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<table><tr><td>FillerTextFillerTextFillerTextFiller</td></tr></table>
|
||||
<div class="prose">Test passes if the text in the blue rectangle to the left
|
||||
of this line spills outside of its bottom border and the text
|
||||
in the blue rectangle to the right of this line is contained
|
||||
within the rectangle's border (and appears to be cut off on
|
||||
its bottom edge).</div>
|
||||
<table><tr><td id="hidden">FillerTextFillerTextFillerTextFiller</td></tr></table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Cell that overflows a fixed-height table</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell that overflows the fixed table height uses its 'overflow' property to determine whether to clip the overflow content.">
|
||||
<style type="text/css">
|
||||
div.test {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
div.prose {
|
||||
writing-mode: horizontal-tb;
|
||||
width: 180px;
|
||||
margin: 1em;
|
||||
}
|
||||
table
|
||||
{
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td
|
||||
{
|
||||
border: 1px solid blue;
|
||||
height: 100px;
|
||||
padding: 0px;
|
||||
}
|
||||
#hidden
|
||||
{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<table><tr><td id="hidden">FillerTextFillerTextFillerTextFiller</td></tr></table>
|
||||
<div class="prose">Test passes if the text in the blue rectangle to the left
|
||||
of this line spills outside of its bottom border and the text
|
||||
in the blue rectangle to the right of this line is contained
|
||||
within the rectangle's border (and appears to be cut off on
|
||||
its bottom edge).</div>
|
||||
<table><tr><td>FillerTextFillerTextFillerTextFiller</td></tr></table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-lr; text-orientation: sideways-right; }
|
||||
div.stripe
|
||||
{
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
}
|
||||
div.blue {background-color: blue; }
|
||||
div.black {background-color: black;}
|
||||
span.text { position: relative; top: 100px; white-space: pre;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height and the
|
||||
blue box has the words "Filler Text" in the middle,
|
||||
overflowing below the box.</p>
|
||||
<div class="test">
|
||||
<div class="blue stripe"></div>
|
||||
<div class="blue stripe"><span class="text">Filler Text Filler Text Filler Text</span></div>
|
||||
<div class="blue stripe"></div>
|
||||
<div class="black stripe"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Subsequent rows in fixed table layout</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Cells in subsequent rows after the first do not affect column heights in fixed table layout.">
|
||||
<style type="text/css">
|
||||
div.test {
|
||||
writing-mode: vertical-lr;
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: blue;
|
||||
color: blue;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
}
|
||||
#overflow
|
||||
{
|
||||
color: black;
|
||||
overflow: visible;
|
||||
white-space: pre;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
width: 20px;
|
||||
}
|
||||
table, .row1
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
.row2, #div1
|
||||
{
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height and the
|
||||
blue box has the words "Filler Text" in the middle,
|
||||
overflowing below the box.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="row1"></td>
|
||||
<td class="row1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td id="overflow">Filler Text Filler Text Filler Text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row2"></td>
|
||||
<td class="row2"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Subsequent rows in fixed table layout</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Cells in subsequent rows after the first do not affect column heights in fixed table layout.">
|
||||
<style type="text/css">
|
||||
div.test {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: sideways-right;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: blue;
|
||||
color: blue;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
}
|
||||
#overflow
|
||||
{
|
||||
color: black;
|
||||
overflow: visible;
|
||||
white-space: pre;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
width: 20px;
|
||||
}
|
||||
table, .row1
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
.row2, #div1
|
||||
{
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height and the
|
||||
blue box has the words "Filler Text" in the middle,
|
||||
overflowing below the box.</p>
|
||||
<div class="test">
|
||||
<div id="div1"></div>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="row1"></td>
|
||||
<td class="row1"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td id="overflow">Filler Text Filler Text Filler Text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="row2"></td>
|
||||
<td class="row2"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
.test { writing-mode: vertical-lr; }
|
||||
div.stripe
|
||||
{
|
||||
width: 24px;
|
||||
height: 50px;
|
||||
}
|
||||
div.blue {background-color: blue;}
|
||||
div.black {background-color: black;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<div class="black stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified column height overrides first-cell specified height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column element with specified height sets the height of the column, even if the first-row cell has a specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
td { padding: 0px; }
|
||||
#col
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: black;
|
||||
height: 175px;
|
||||
width: 24px;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
width: 24px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col id="col">
|
||||
<col>
|
||||
<tr>
|
||||
<td id="cell">X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified column height overrides first-cell specified height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column element with specified height sets the height of the column, even if the first-row cell has a specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
td { padding: 0px; }
|
||||
#col
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: blue;
|
||||
color: blue;
|
||||
height: 175px;
|
||||
width: 24px;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
width: 24px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col id="col">
|
||||
<col>
|
||||
<tr>
|
||||
<td id="cell">X</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified column-group height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Specified column-group height is ignored in fixed table layout.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
td { padding: 0px; }
|
||||
#colgroup
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: black;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
height: 100px;
|
||||
}
|
||||
#div1, #cell
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<colgroup id="colgroup">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="cell"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified column-group height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Specified column-group height is ignored in fixed table layout.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
td { padding: 0px; }
|
||||
#colgroup
|
||||
{
|
||||
height: 50px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: blue;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
height: 100px;
|
||||
}
|
||||
#div1, #cell
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<colgroup id="colgroup">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="cell"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified column height overrides specified column-group height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column that has both a column height and column-group height specified will use its column specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td { padding: 0px; }
|
||||
#colgroup
|
||||
{
|
||||
height: 300px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: black;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
}
|
||||
#div1, #cell
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
#div1, #col
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<colgroup id="colgroup">
|
||||
<col id="col">
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="cell"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified column height overrides specified column-group height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column that has both a column height and column-group height specified will use its column specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td { padding: 0px; }
|
||||
#colgroup
|
||||
{
|
||||
height: 300px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: blue;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
}
|
||||
#div1, #cell
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
#div1, #col
|
||||
{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<colgroup id="colgroup">
|
||||
<col id="col">
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="cell"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified cell height overrides specified column-group height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column that has both a cell height and column-group height specified will use its cell specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
td { padding: 0px; }
|
||||
#colgroup
|
||||
{
|
||||
height: 75px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: black;
|
||||
height: 100px;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
height: 100px;
|
||||
}
|
||||
#div1, td
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<colgroup id="colgroup">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="cell"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table layout - specified cell height overrides specified column-group height</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A column that has both a cell height and column-group height specified will use its cell specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
height: 200px;
|
||||
}
|
||||
#colgroup
|
||||
{
|
||||
height: 75px;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: blue;
|
||||
height: 100px;
|
||||
}
|
||||
td
|
||||
{
|
||||
padding: 0;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
height: 100px;
|
||||
}
|
||||
#div1, td
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<colgroup id="colgroup">
|
||||
<col>
|
||||
</colgroup>
|
||||
<colgroup>
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td id="cell"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (sum of columns' heights wins)</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A fixed layout table's height will be the sum of its columns' heights if that number is greater than the table's specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
height: 75px;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: black;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: blue;
|
||||
height: 100px;
|
||||
}
|
||||
#div1, td
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Fixed table height is maximum between table and sum of column 'height' (sum of columns' heights wins)</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<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">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A fixed layout table's height will be the sum of its columns' heights if that number is greater than the table's specified height.">
|
||||
<style type="text/css">
|
||||
div.test
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
table
|
||||
{
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
height: 75px;
|
||||
}
|
||||
td
|
||||
{
|
||||
background: blue;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: black;
|
||||
height: 100px;
|
||||
}
|
||||
#div1, td
|
||||
{
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the boxes below are the same height.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="div1"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
div.test {
|
||||
writing-mode: vertical-lr;
|
||||
padding-left: 4px; }
|
||||
div.stripe
|
||||
{
|
||||
width: 24px;
|
||||
margin-right: 4px;
|
||||
margin-top: 172px;
|
||||
height: 160px;
|
||||
}
|
||||
div.blue {background-color: blue;}
|
||||
div.orange {background-color: orange; margin-left: 0px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p>
|
||||
<div class="test">
|
||||
<div class="orange stripe"></div>
|
||||
<div class="blue stripe"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,90 @@
|
||||
<!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-017-ref.htm">
|
||||
<meta content="" name="flags">
|
||||
<meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-lr; }
|
||||
table
|
||||
{
|
||||
border-collapse: separate;
|
||||
border-spacing: 4px;
|
||||
table-layout: fixed;
|
||||
height: 420px;
|
||||
}
|
||||
col#test
|
||||
{
|
||||
background-color: orange;
|
||||
height: 40%;
|
||||
}
|
||||
td#third-cell {color: orange;}
|
||||
td { padding: 0px; width: 24px;}
|
||||
div#reference
|
||||
{
|
||||
background-color: blue;
|
||||
color: blue;
|
||||
top: 172px;
|
||||
width: 24px;
|
||||
/*
|
||||
3 vertical border-spacing separate the start
|
||||
of table box and the start of 3rd column.
|
||||
The first 2 columns should each be 80px exactly
|
||||
since "Any remaining columns equally divide the
|
||||
remaining vertical table space (minus [table] borders or
|
||||
cell spacing)." So:
|
||||
0px : table border-top
|
||||
+
|
||||
4px : 1st border-spacing
|
||||
+
|
||||
80px : 1st column : (420 - 20) mult by (60% divided by 3)
|
||||
+
|
||||
4px : 2nd border-spacing
|
||||
+
|
||||
80px : 2nd column : (420 - 20) mult by (60% divided by 3)
|
||||
+
|
||||
4px: 3rd border-spacing
|
||||
========
|
||||
172px
|
||||
*/
|
||||
position: relative;
|
||||
height: 160px;
|
||||
/*
|
||||
420px : total height of table
|
||||
-
|
||||
20px : 5 times vertical border-spacing
|
||||
-
|
||||
0px : total of vertical table borders
|
||||
========
|
||||
400px
|
||||
mult by
|
||||
40%
|
||||
========
|
||||
160px
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col>
|
||||
<col>
|
||||
<col id="test">
|
||||
<col>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td id="third-cell">col</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="reference">ref</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,90 @@
|
||||
<!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-017-ref.htm">
|
||||
<meta content="" name="flags">
|
||||
<meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-rl; }
|
||||
table
|
||||
{
|
||||
border-collapse: separate;
|
||||
border-spacing: 4px;
|
||||
table-layout: fixed;
|
||||
height: 420px;
|
||||
}
|
||||
col#test
|
||||
{
|
||||
background-color: orange;
|
||||
height: 40%;
|
||||
}
|
||||
td#third-cell {color: orange;}
|
||||
td { padding: 0px; width: 24px;}
|
||||
div#reference
|
||||
{
|
||||
background-color: blue;
|
||||
color: blue;
|
||||
top: 172px;
|
||||
width: 24px;
|
||||
/*
|
||||
3 vertical border-spacing separate the start
|
||||
of table box and the start of 3rd column.
|
||||
The first 2 columns should each be 80px exactly
|
||||
since "Any remaining columns equally divide the
|
||||
remaining vertical table space (minus [table] borders or
|
||||
cell spacing)." So:
|
||||
0px : table border-top
|
||||
+
|
||||
4px : 1st border-spacing
|
||||
+
|
||||
80px : 1st column : (420 - 20) mult by (60% divided by 3)
|
||||
+
|
||||
4px : 2nd border-spacing
|
||||
+
|
||||
80px : 2nd column : (420 - 20) mult by (60% divided by 3)
|
||||
+
|
||||
4px: 3rd border-spacing
|
||||
========
|
||||
172px
|
||||
*/
|
||||
position: relative;
|
||||
height: 160px;
|
||||
/*
|
||||
420px : total height of table
|
||||
-
|
||||
20px : 5 times vertical border-spacing
|
||||
-
|
||||
0px : total of vertical table borders
|
||||
========
|
||||
400px
|
||||
mult by
|
||||
40%
|
||||
========
|
||||
160px
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p>
|
||||
<div class="test">
|
||||
<div id="reference">ref</div>
|
||||
<table>
|
||||
<col>
|
||||
<col>
|
||||
<col id="test">
|
||||
<col>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td id="third-cell">col</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,93 @@
|
||||
<!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-017-ref.htm">
|
||||
<meta content="" name="flags">
|
||||
<meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-lr; }
|
||||
table
|
||||
{
|
||||
border: solid white;
|
||||
border-width: 6px 0px;
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px 4px;
|
||||
table-layout: fixed;
|
||||
height: 422px;
|
||||
}
|
||||
col#test
|
||||
{
|
||||
background-color: orange;
|
||||
height: 40%;
|
||||
}
|
||||
td#third-cell {color: orange;}
|
||||
td {padding: 0px; width: 24px;}
|
||||
div#reference
|
||||
{
|
||||
background-color: blue;
|
||||
color: blue;
|
||||
top: 172px;
|
||||
width: 24px;
|
||||
/*
|
||||
3 vertical border-spacing and the table
|
||||
border-left separate the start
|
||||
of table box and the start of 3rd column.
|
||||
The first 2 columns should each be 80px exactly
|
||||
since "Any remaining columns equally divide the
|
||||
remaining vertical table space (minus [table] borders or
|
||||
cell spacing)." So:
|
||||
6px : table border-left
|
||||
+
|
||||
2px : 1st border-spacing
|
||||
+
|
||||
80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3)
|
||||
+
|
||||
2px : 2nd border-spacing
|
||||
+
|
||||
80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3)
|
||||
+
|
||||
2px : 3rd border-spacing
|
||||
=========
|
||||
172px
|
||||
*/
|
||||
position: relative;
|
||||
height: 160px;
|
||||
/*
|
||||
422px : total height of table
|
||||
-
|
||||
12px : total height of vertical borders of table
|
||||
-
|
||||
10px : 5 times vertical border-spacing
|
||||
========
|
||||
400px
|
||||
mult by
|
||||
40%
|
||||
========
|
||||
160px
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p>
|
||||
<div class="test">
|
||||
<table>
|
||||
<col>
|
||||
<col>
|
||||
<col id="test">
|
||||
<col>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td id="third-cell">col</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="reference">ref</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,94 @@
|
||||
<!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-017-ref.htm">
|
||||
<meta content="" name="flags">
|
||||
<meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert">
|
||||
<style type="text/css">
|
||||
div.test { writing-mode: vertical-rl; }
|
||||
table
|
||||
{
|
||||
border: solid white;
|
||||
border-width: 6px 0px;
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px 4px;
|
||||
table-layout: fixed;
|
||||
height: 422px;
|
||||
}
|
||||
col#test
|
||||
{
|
||||
background-color: orange;
|
||||
height: 40%;
|
||||
}
|
||||
td#third-cell {color: orange;}
|
||||
td {padding: 0px;}
|
||||
td { width: 24px; }
|
||||
div#reference
|
||||
{
|
||||
background-color: blue;
|
||||
color: blue;
|
||||
width: 24px;
|
||||
top: 172px;
|
||||
/*
|
||||
3 vertical border-spacing and the table
|
||||
border-left separate the start
|
||||
of table box and the start of 3rd column.
|
||||
The first 2 columns should each be 80px exactly
|
||||
since "Any remaining columns equally divide the
|
||||
remaining vertical table space (minus [table] borders or
|
||||
cell spacing)." So:
|
||||
6px : table border-left
|
||||
+
|
||||
2px : 1st border-spacing
|
||||
+
|
||||
80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3)
|
||||
+
|
||||
2px : 2nd border-spacing
|
||||
+
|
||||
80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3)
|
||||
+
|
||||
2px : 3rd border-spacing
|
||||
=========
|
||||
172px
|
||||
*/
|
||||
position: relative;
|
||||
height: 160px;
|
||||
/*
|
||||
422px : total height of table
|
||||
-
|
||||
12px : total height of vertical borders of table
|
||||
-
|
||||
10px : 5 times vertical border-spacing
|
||||
========
|
||||
400px
|
||||
mult by
|
||||
40%
|
||||
========
|
||||
160px
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p>
|
||||
<div class="test">
|
||||
<div id="reference">ref</div>
|
||||
<table>
|
||||
<col>
|
||||
<col>
|
||||
<col id="test">
|
||||
<col>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td id="third-cell">col</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
div.wrapper {
|
||||
writing-mode: vertical-lr;
|
||||
margin-top: 52px;
|
||||
}
|
||||
div.stripe
|
||||
{
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 7px;
|
||||
width: 24px;
|
||||
}
|
||||
div.fuchsia
|
||||
{
|
||||
height: 52px;
|
||||
background-color: fuchsia;
|
||||
}
|
||||
div.olive
|
||||
{
|
||||
height: 88px;
|
||||
background-color: olive;
|
||||
}
|
||||
div.orange
|
||||
{
|
||||
height: 124px;
|
||||
background-color: orange;
|
||||
}
|
||||
</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="wrapper">
|
||||
<div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div></div>
|
||||
<div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</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>
|
||||
@ -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-rl; }
|
||||
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;
|
||||
right: 48px;
|
||||
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;
|
||||
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">
|
||||
<div id="reference1st">ref</div>
|
||||
<div id="reference2nd">ref</div>
|
||||
<div id="reference3rd">ref</div>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
div.wrapper {
|
||||
writing-mode: vertical-lr;
|
||||
margin-top: 52px;
|
||||
}
|
||||
div.stripe
|
||||
{
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 7px;
|
||||
width: 24px;
|
||||
}
|
||||
div.fuchsia
|
||||
{
|
||||
height: 52px;
|
||||
background-color: fuchsia;
|
||||
}
|
||||
div.olive
|
||||
{
|
||||
height: 100px;
|
||||
background-color: olive;
|
||||
}
|
||||
div.orange
|
||||
{
|
||||
height: 124px;
|
||||
background-color: orange;
|
||||
}
|
||||
div.lime
|
||||
{
|
||||
height: 124px;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p>
|
||||
<div class="wrapper">
|
||||
<div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div>
|
||||
<div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,170 @@
|
||||
<!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 and absolute 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-022-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 [table] borders or cell spacing."
|
||||
So,
|
||||
533px : total table height
|
||||
-
|
||||
58px : total vertical border-spacing 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: 100px;
|
||||
}
|
||||
col#third
|
||||
{
|
||||
background-color: orange;
|
||||
height: 31%;
|
||||
/* 400px multiplied by 31% = 124px */
|
||||
/*
|
||||
300px - (52px + 124px) = 124px for last column
|
||||
*/
|
||||
}
|
||||
col#fourth {background-color: lime;}
|
||||
td {padding: 10px 0px; width: 24px; }
|
||||
td#first-cell {color: fuchsia;}
|
||||
td#second-cell {color: olive;}
|
||||
td#third-cell {color: orange;}
|
||||
td#fourth-cell {color: lime;}
|
||||
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 border-spacing
|
||||
======
|
||||
111px
|
||||
*/
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference3rd
|
||||
{
|
||||
background-color: orange;
|
||||
right: 48px;
|
||||
color: orange;
|
||||
top: 226px;
|
||||
/*
|
||||
29px : border-top of table
|
||||
+
|
||||
15px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
15px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
15px : 3rd border-spacing
|
||||
=======
|
||||
226px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference4th
|
||||
{
|
||||
background-color: lime;
|
||||
right: 72px;
|
||||
color: lime;
|
||||
top: 365px;
|
||||
/*
|
||||
29px : border-top of table
|
||||
+
|
||||
15px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
15px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
15px : 3rd border-spacing
|
||||
+
|
||||
124px : height of third column
|
||||
+
|
||||
15px : 4th border-spacing
|
||||
=======
|
||||
365px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the colored (fuchsia, olive, orange and lime) 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 id="fourth">
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,170 @@
|
||||
<!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 and absolute 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-022-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-rl; }
|
||||
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 [table] borders or cell spacing."
|
||||
So,
|
||||
533px : total table height
|
||||
-
|
||||
58px : total vertical border-spacing 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: 100px;
|
||||
}
|
||||
col#third
|
||||
{
|
||||
background-color: orange;
|
||||
height: 31%;
|
||||
/* 400px multiplied by 31% = 124px */
|
||||
/*
|
||||
300px - (52px + 124px) = 124px for last column
|
||||
*/
|
||||
}
|
||||
col#fourth {background-color: lime;}
|
||||
td {padding: 10px 0px; width: 24px; }
|
||||
td#first-cell {color: fuchsia;}
|
||||
td#second-cell {color: olive;}
|
||||
td#third-cell {color: orange;}
|
||||
td#fourth-cell {color: lime;}
|
||||
div {padding: 0px;}
|
||||
div#reference1st
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: fuchsia;
|
||||
top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */
|
||||
right: 72px;
|
||||
position: relative;
|
||||
height: 52px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference2nd
|
||||
{
|
||||
background-color: olive;
|
||||
color: olive;
|
||||
right: 48px;
|
||||
top: 111px;
|
||||
/*
|
||||
29px : border-top of table
|
||||
+
|
||||
15px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
15px border-spacing
|
||||
======
|
||||
111px
|
||||
*/
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference3rd
|
||||
{
|
||||
background-color: orange;
|
||||
right: 24px;
|
||||
color: orange;
|
||||
top: 226px;
|
||||
/*
|
||||
29px : border-top of table
|
||||
+
|
||||
15px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
15px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
15px : 3rd border-spacing
|
||||
=======
|
||||
226px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference4th
|
||||
{
|
||||
background-color: lime;
|
||||
color: lime;
|
||||
top: 365px;
|
||||
/*
|
||||
29px : border-top of table
|
||||
+
|
||||
15px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
15px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
15px : 3rd border-spacing
|
||||
+
|
||||
124px : height of third column
|
||||
+
|
||||
15px : 4th border-spacing
|
||||
=======
|
||||
365px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p>
|
||||
<div class="test">
|
||||
<div id="reference1st">ref</div>
|
||||
<div id="reference2nd">ref</div>
|
||||
<div id="reference3rd">ref</div>
|
||||
<div id="reference4th">ref</div>
|
||||
<table>
|
||||
<col id="first">
|
||||
<col id="second">
|
||||
<col id="third">
|
||||
<col id="fourth">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
div.wrapper {
|
||||
writing-mode: vertical-lr;
|
||||
margin-top: 34px;
|
||||
}
|
||||
div.stripe
|
||||
{
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 7px;
|
||||
width: 24px;
|
||||
}
|
||||
div.fuchsia
|
||||
{
|
||||
height: 52px;
|
||||
background-color: fuchsia;
|
||||
}
|
||||
div.olive
|
||||
{
|
||||
height: 100px;
|
||||
background-color: olive;
|
||||
}
|
||||
div.orange
|
||||
{
|
||||
height: 124px;
|
||||
background-color: orange;
|
||||
}
|
||||
div.lime
|
||||
{
|
||||
height: 124px;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p>
|
||||
<div class="wrapper">
|
||||
<div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div>
|
||||
<div><div class="fuchsia stripe"></div><div class="olive stripe"></div><div class="orange stripe"></div><div class="lime stripe"></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,175 @@
|
||||
<!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 and absolute 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-023-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; }
|
||||
body
|
||||
{
|
||||
margin: 8px;
|
||||
height: 640px;
|
||||
}
|
||||
table
|
||||
{
|
||||
border: white solid;
|
||||
border-width: 11px 0px; /* vertical table border height is 22px total */
|
||||
border-collapse: separate;
|
||||
border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */
|
||||
table-layout: fixed;
|
||||
height: 80%; /* 640px mult by 80% == 512px */
|
||||
/*
|
||||
"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 [table] borders or cell spacing."
|
||||
So,
|
||||
512px : total table height
|
||||
-
|
||||
90px : total vertical border-spacing height
|
||||
-
|
||||
22px : 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: 100px;
|
||||
}
|
||||
col#third
|
||||
{
|
||||
background-color: orange;
|
||||
height: 31%;
|
||||
/* 400px multiplied by 31% = 124px */
|
||||
/*
|
||||
400px - (52px + 100px + 124px) = 124px for last column
|
||||
*/
|
||||
}
|
||||
col#fourth {background-color: lime;}
|
||||
td {padding: 10px 0px; width: 24px; }
|
||||
td#first-cell {color: fuchsia;}
|
||||
td#second-cell {color: olive;}
|
||||
td#third-cell {color: orange;}
|
||||
td#fourth-cell {color: lime;}
|
||||
div {padding: 0px;}
|
||||
div#reference1st
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: fuchsia;
|
||||
top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */
|
||||
position: relative;
|
||||
height: 52px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference2nd
|
||||
{
|
||||
background-color: olive;
|
||||
right: 24px;
|
||||
color: olive;
|
||||
top: 99px;
|
||||
/*
|
||||
11px : border-top of table
|
||||
+
|
||||
18px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
18px : 2nd border-spacing
|
||||
=======
|
||||
99px
|
||||
*/
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference3rd
|
||||
{
|
||||
background-color: orange;
|
||||
right: 48px;
|
||||
color: orange;
|
||||
top: 217px;
|
||||
/*
|
||||
11px : border-top of table
|
||||
+
|
||||
18px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
18px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
18px : 3rd border-spacing
|
||||
=======
|
||||
217px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference4th
|
||||
{
|
||||
background-color: lime;
|
||||
right: 72px;
|
||||
color: lime;
|
||||
top: 359px;
|
||||
/*
|
||||
11px : border-top of table
|
||||
+
|
||||
18px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
18px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
18px : 3rd border-spacing
|
||||
+
|
||||
124px : height of third column
|
||||
+
|
||||
18px : 4th border-spacing
|
||||
=======
|
||||
359px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the colored (fuchsia, olive, orange and lime) 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 id="fourth">
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,175 @@
|
||||
<!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 and absolute 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-023-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-rl; }
|
||||
body
|
||||
{
|
||||
margin: 8px;
|
||||
height: 640px;
|
||||
}
|
||||
table
|
||||
{
|
||||
border: white solid;
|
||||
border-width: 11px 0px; /* vertical table border height is 22px total */
|
||||
border-collapse: separate;
|
||||
border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */
|
||||
table-layout: fixed;
|
||||
height: 80%; /* 640px mult by 80% == 512px */
|
||||
/*
|
||||
"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 [table] borders or cell spacing."
|
||||
So,
|
||||
512px : total table height
|
||||
-
|
||||
90px : total vertical border-spacing height
|
||||
-
|
||||
22px : 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: 100px;
|
||||
}
|
||||
col#third
|
||||
{
|
||||
background-color: orange;
|
||||
height: 31%;
|
||||
/* 400px multiplied by 31% = 124px */
|
||||
/*
|
||||
400px - (52px + 100px + 124px) = 124px for last column
|
||||
*/
|
||||
}
|
||||
col#fourth {background-color: lime;}
|
||||
td {padding: 10px 0px; width: 24px; }
|
||||
td#first-cell {color: fuchsia;}
|
||||
td#second-cell {color: olive;}
|
||||
td#third-cell {color: orange;}
|
||||
td#fourth-cell {color: lime;}
|
||||
div {padding: 0px;}
|
||||
div#reference1st
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: fuchsia;
|
||||
top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */
|
||||
right: 72px;
|
||||
position: relative;
|
||||
height: 52px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference2nd
|
||||
{
|
||||
background-color: olive;
|
||||
right: 48px;
|
||||
color: olive;
|
||||
top: 99px;
|
||||
/*
|
||||
11px : border-top of table
|
||||
+
|
||||
18px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
18px : 2nd border-spacing
|
||||
=======
|
||||
99px
|
||||
*/
|
||||
position: relative;
|
||||
height: 100px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference3rd
|
||||
{
|
||||
background-color: orange;
|
||||
right: 24px;
|
||||
color: orange;
|
||||
top: 217px;
|
||||
/*
|
||||
11px : border-top of table
|
||||
+
|
||||
18px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
18px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
18px : 3rd border-spacing
|
||||
=======
|
||||
217px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
div#reference4th
|
||||
{
|
||||
background-color: lime;
|
||||
color: lime;
|
||||
top: 359px;
|
||||
/*
|
||||
11px : border-top of table
|
||||
+
|
||||
18px : 1st border-spacing
|
||||
+
|
||||
52px : height of first column
|
||||
+
|
||||
18px : 2nd border-spacing
|
||||
+
|
||||
100px : height of second column
|
||||
+
|
||||
18px : 3rd border-spacing
|
||||
+
|
||||
124px : height of third column
|
||||
+
|
||||
18px : 4th border-spacing
|
||||
=======
|
||||
359px
|
||||
*/
|
||||
position: relative;
|
||||
height: 124px;
|
||||
width: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p>
|
||||
<div class="test">
|
||||
<div id="reference1st">ref</div>
|
||||
<div id="reference2nd">ref</div>
|
||||
<div id="reference3rd">ref</div>
|
||||
<div id="reference4th">ref</div>
|
||||
<table>
|
||||
<col id="first">
|
||||
<col id="second">
|
||||
<col id="third">
|
||||
<col id="fourth">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</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/">
|
||||
<style type="text/css">
|
||||
div.square
|
||||
{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
div.green
|
||||
{
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div class="green square"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.htm">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
height: 50%;
|
||||
}
|
||||
td#left-red-cell, td#right-red-cell {background-color: red;}
|
||||
td {padding: 25px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="left-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="right-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
height: 50%;
|
||||
}
|
||||
td#left-red-cell, td#right-red-cell {background-color: red;}
|
||||
td {padding: 25px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="left-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="right-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 25px;
|
||||
border-bottom: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 25px;
|
||||
border-bottom: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 25px;
|
||||
border-bottom: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td#top-red-cell {border-bottom: red solid 24px;}
|
||||
td#bottom-red-cell {border-top: red solid 25px;}
|
||||
td {padding: 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 25px;
|
||||
border-bottom: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td#top-red-cell {border-bottom: red solid 24px;}
|
||||
td#bottom-red-cell {border-top: red solid 25px;}
|
||||
td {padding: 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 15px;
|
||||
border-bottom: green solid 15px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 10px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 15px;
|
||||
border-bottom: green solid 15px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 10px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 16px;
|
||||
border-bottom: green solid 16px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td#top-red-cell {border-bottom: red solid 15px;}
|
||||
td#bottom-red-cell {border-top: red solid 16px;}
|
||||
td {padding: 9px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 16px;
|
||||
border-bottom: green solid 16px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td#top-red-cell {border-bottom: red solid 15px;}
|
||||
td#bottom-red-cell {border-top: red solid 16px;}
|
||||
td {padding: 9px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 25px 50px 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-top: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 25px 50px 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-lr;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-bottom: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 25px 50px 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: percentage height set on table-cell in 'table-layout: fixed' table</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="help" href="http://www.w3.org/TR/CSS21/tables.html#separated-borders" title="17.6.1 The separated borders model">
|
||||
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0121.html" title="[CSS21] tables, percentages, and border-spacing">
|
||||
<link rel="match" href="fixed-table-layout-025-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="A cell in the first row with a value other than 'auto' for the 'height' property determines the height for that column in the fixed table layout algorithm. The determination of the height of such column must nevertheless still take into account the vertical padding and vertical borders of such cell.">
|
||||
<style type="text/css">
|
||||
table
|
||||
{
|
||||
writing-mode: vertical-rl;
|
||||
border-spacing: 0px;
|
||||
table-layout: fixed;
|
||||
height: 100px;
|
||||
}
|
||||
td#middle-green-cell
|
||||
{
|
||||
background-color: green;
|
||||
border-bottom: green solid 25px;
|
||||
height: 50%;
|
||||
}
|
||||
td#top-red-cell, td#bottom-red-cell {background-color: red;}
|
||||
td {padding: 25px 50px 0px 50px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="top-red-cell"></td>
|
||||
<td id="middle-green-cell"></td>
|
||||
<td id="bottom-red-cell"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -10,3 +10,55 @@
|
||||
== vertical-table-specified-width-2.html vertical-table-specified-width-2-ref.html
|
||||
fuzzy-if(cocoaWidget,141,24) == vertical-border-collapse-1.html vertical-border-collapse-1-ref.html
|
||||
fuzzy-if(cocoaWidget,141,24) == vertical-border-collapse-2.html vertical-border-collapse-2-ref.html
|
||||
|
||||
== fixed-table-layout-002-vlr.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-003-vlr.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-004-vlr.html fixed-table-layout-004-ref.html
|
||||
== fixed-table-layout-005-vlr.html fixed-table-layout-005-ref.html
|
||||
== fixed-table-layout-006-vlr.html fixed-table-layout-006-ref.html
|
||||
== fixed-table-layout-007-vlr.html fixed-table-layout-007-ref.html
|
||||
== fixed-table-layout-009-vlr.html fixed-table-layout-009-ref.html
|
||||
random == fixed-table-layout-010-vlr.html fixed-table-layout-010-ref.html # bug 1178059
|
||||
== fixed-table-layout-012-vlr.html fixed-table-layout-012-ref.html
|
||||
== fixed-table-layout-013-vlr.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-014-vlr.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-015-vlr.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-016-vlr.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-017-vlr.html fixed-table-layout-017-ref.html
|
||||
== fixed-table-layout-018-vlr.html fixed-table-layout-017-ref.html
|
||||
== fixed-table-layout-021-vlr.html fixed-table-layout-021-ref.html
|
||||
== fixed-table-layout-022-vlr.html fixed-table-layout-022-ref.html
|
||||
== fixed-table-layout-023-vlr.html fixed-table-layout-023-ref.html
|
||||
== fixed-table-layout-025-vlr.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-026-vlr.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-027-vlr.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-028-vlr.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-029-vlr.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-030-vlr.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-031-vlr.html fixed-table-layout-025-ref.html
|
||||
|
||||
== fixed-table-layout-002-vrl.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-003-vrl.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-004-vrl.html fixed-table-layout-004-ref.html
|
||||
== fixed-table-layout-005-vrl.html fixed-table-layout-005-ref.html
|
||||
== fixed-table-layout-006-vrl.html fixed-table-layout-006-ref.html
|
||||
== fixed-table-layout-007-vrl.html fixed-table-layout-007-ref.html
|
||||
== fixed-table-layout-009-vrl.html fixed-table-layout-009-ref.html
|
||||
random == fixed-table-layout-010-vrl.html fixed-table-layout-010-ref.html # bug 1178059
|
||||
== fixed-table-layout-012-vrl.html fixed-table-layout-012-ref.html
|
||||
== fixed-table-layout-013-vrl.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-014-vrl.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-015-vrl.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-016-vrl.html fixed-table-layout-002-ref.html
|
||||
== fixed-table-layout-017-vrl.html fixed-table-layout-017-ref.html
|
||||
== fixed-table-layout-018-vrl.html fixed-table-layout-017-ref.html
|
||||
== fixed-table-layout-021-vrl.html fixed-table-layout-021-ref.html
|
||||
== fixed-table-layout-022-vrl.html fixed-table-layout-022-ref.html
|
||||
== fixed-table-layout-023-vrl.html fixed-table-layout-023-ref.html
|
||||
== fixed-table-layout-025-vrl.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-026-vrl.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-027-vrl.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-028-vrl.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-029-vrl.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-030-vrl.html fixed-table-layout-025-ref.html
|
||||
== fixed-table-layout-031-vrl.html fixed-table-layout-025-ref.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user