mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 35168 (Part 3) - Add tests for table part relative positioning. r=dbaron

This commit is contained in:
Seth Fowler 2014-08-19 18:24:58 -07:00
Родитель e4bac7857e
Коммит e49a28f7e4
18 изменённых файлов: 2093 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
layout/reftests/position-relative/reftest.list Normal file
Просмотреть файл

@ -0,0 +1,8 @@
== table-collapse-1.html table-collapse-1-ref.html
== table-collapse-2.html table-collapse-2-ref.html
== table-collapse-3.html table-collapse-3-ref.html
== table-collapse-4.html table-collapse-4-ref.html
== table-separate-1.html table-separate-1-ref.html
== table-separate-2.html table-separate-2-ref.html
== table-separate-3.html table-separate-3-ref.html
== table-separate-4.html table-separate-4-ref.html

180
layout/reftests/position-relative/table-collapse-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,180 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: collapse;
position: absolute;
}
#first-table {
left: 0px;
}
#second-table {
left: 100px;
}
#third-table {
left: 200px;
}
#fourth-table {
left: 300px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
#first-table td {
border-color: gold;
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey show-text">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white show-text">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

80
layout/reftests/position-relative/table-collapse-1.html Normal file
Просмотреть файл

@ -0,0 +1,80 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: collapse;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
left: 100px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

180
layout/reftests/position-relative/table-collapse-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,180 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: collapse;
position: absolute;
}
#first-table {
left: 300px;
}
#second-table {
left: 200px;
}
#third-table {
left: 100px;
}
#fourth-table {
left: 0px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
#first-table td {
border-color: gold;
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey show-text">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white show-text">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

82
layout/reftests/position-relative/table-collapse-2.html Normal file
Просмотреть файл

@ -0,0 +1,82 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: collapse;
position: absolute;
left: 300px;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
right: 100px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

180
layout/reftests/position-relative/table-collapse-3-ref.html Normal file
Просмотреть файл

@ -0,0 +1,180 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: collapse;
position: absolute;
}
#first-table {
top: 0px;
}
#second-table {
top: 175px;
}
#third-table {
top: 350px;
}
#fourth-table {
top: 525px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
#first-table td {
border-color: gold;
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey show-text">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white show-text">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

80
layout/reftests/position-relative/table-collapse-3.html Normal file
Просмотреть файл

@ -0,0 +1,80 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: collapse;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
top: 175px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

180
layout/reftests/position-relative/table-collapse-4-ref.html Normal file
Просмотреть файл

@ -0,0 +1,180 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: collapse;
position: absolute;
}
#first-table {
top: 525px;
}
#second-table {
top: 350px;
}
#third-table {
top: 175px;
}
#fourth-table {
top: 0px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
#first-table td {
border-color: gold;
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey show-text">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white show-text">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

82
layout/reftests/position-relative/table-collapse-4.html Normal file
Просмотреть файл

@ -0,0 +1,82 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: collapse;
position: absolute;
top: 525px;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
bottom: 175px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

179
layout/reftests/position-relative/table-separate-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,179 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: separate;
position: absolute;
}
#first-table {
background-color: red;
left: 0px;
}
#second-table {
left: 100px;
}
#third-table {
left: 200px;
}
#fourth-table {
left: 300px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
border-color: gold;
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-border show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

80
layout/reftests/position-relative/table-separate-1.html Normal file
Просмотреть файл

@ -0,0 +1,80 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: separate;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
left: 100px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

179
layout/reftests/position-relative/table-separate-2-ref.html Normal file
Просмотреть файл

@ -0,0 +1,179 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: separate;
position: absolute;
}
#first-table {
background-color: red;
left: 300px;
}
#second-table {
left: 200px;
}
#third-table {
left: 100px;
}
#fourth-table {
left: 0px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
border-color: gold;
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-border show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

82
layout/reftests/position-relative/table-separate-2.html Normal file
Просмотреть файл

@ -0,0 +1,82 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: separate;
position: absolute;
left: 300px;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
right: 100px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

179
layout/reftests/position-relative/table-separate-3-ref.html Normal file
Просмотреть файл

@ -0,0 +1,179 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: separate;
position: absolute;
}
#first-table {
background-color: red;
top: 0px;
}
#second-table {
top: 215px;
}
#third-table {
top: 430px;
}
#fourth-table {
top: 645px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
border-color: gold;
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-border show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

80
layout/reftests/position-relative/table-separate-3.html Normal file
Просмотреть файл

@ -0,0 +1,80 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: separate;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
top: 215px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

179
layout/reftests/position-relative/table-separate-4-ref.html Normal file
Просмотреть файл

@ -0,0 +1,179 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
border-collapse: separate;
position: absolute;
}
#first-table {
background-color: red;
top: 645px;
}
#second-table {
top: 430px;
}
#third-table {
top: 215px;
}
#fourth-table {
top: 0px;
}
td {
border-style: solid;
border-width: 5px;
border-color: transparent;
color: rgba(0,0,0,0);
}
.bg-blue {
background-color: blue;
}
.bg-cyan {
background-color: cyan;
}
.bg-grey {
background-color: grey;
}
.bg-green {
background-color: green;
}
.bg-khaki {
background-color: khaki;
}
.bg-purple {
background-color: purple;
}
.bg-white {
background-color: white;
}
.show-text {
border-color: gold;
color: rgba(0,0,0,1);
}
</style>
</head>
<body>
<table id="first-table">
<thead>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-khaki">XXX</td>
<td class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
<td rowspan=2 class="bg-purple">YYY</td>
</tr>
<tr>
<td class="bg-khaki">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-khaki">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-border show-text">YYY</td>
</tr>
</tfoot>
</table>
<table id="second-table">
<thead>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-green">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-green">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td rowspan=2 class="bg-green">YYY</td>
</tr>
<tr>
<td class="bg-grey">&nbsp;</td>
</tr>
<tr>
<td colspan=2 class="bg-green">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">&nbsp;</td>
</tr>
</tfoot>
</table>
<table id="third-table">
<thead>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-blue show-text">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-cyan show-text">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td rowspan=2 class="bg-blue show-text">YYY</td>
</tr>
<tr>
<td class="bg-green">XXX</td>
</tr>
<tr>
<td colspan=2 class="bg-cyan show-text">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
<table id="fourth-table">
<thead>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</thead>
<tbody>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white" rowspan=2>YYY</td>
</tr>
<tr>
<td class="bg-cyan show-text">XXX</td>
</tr>
<tr>
<td class="bg-white" colspan=2>XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="bg-white">XXX</td>
<td class="bg-white">YYY</td>
</tr>
</tfoot>
</table>
</body>

82
layout/reftests/position-relative/table-separate-4.html Normal file
Просмотреть файл

@ -0,0 +1,82 @@
<!DOCTYPE html>
<head>
<style>
body {
background-color: white;
margin: 0;
}
table {
background-color: red;
border-collapse: separate;
position: absolute;
top: 645px;
}
thead {
background-color: pink;
}
tbody {
background-color: grey;
}
tfoot {
background-color: orange;
}
tr {
background-color: green;
}
td:first-child {
background-color: cyan;
}
td {
background-color: blue;
border-style: solid;
border-width: 5px;
border-color: gold;
}
colgroup {
background-color: purple;
}
col:first-child {
background-color: khaki;
}
.rel {
position: relative;
bottom: 215px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col>
<col>
</colgroup>
<thead class="rel">
<tr>
<td class="rel">XXX</td>
<td class="rel">YYY</td>
</tr>
</thead>
<tbody class="rel">
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
<tr>
<td>XXX</td>
<td rowspan=2 class="rel">YYY</td>
</tr>
<tr class="rel">
<td class="rel">XXX</td>
</tr>
<tr>
<td colspan=2 class="rel">XXX</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="rel">XXX</td>
<td>YYY</td>
</tr>
</tfoot>
</table>
</body>

1
layout/reftests/reftest.list
Просмотреть файл

@ -17,6 +17,7 @@ include w3c-css/received/reftest.list
# relative and absolute positioning
include abs-pos/reftest.list
include position-relative/reftest.list
include async-scrolling/reftest.list