зеркало из https://github.com/mozilla/gecko-dev.git
Bug 63895 (Part 3) - Add tests for positioned internal table objects serving as absolute containing blocks. r=dbaron
This commit is contained in:
Родитель
f34547a086
Коммит
13b51d74ac
|
@ -5,6 +5,26 @@ fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated&&!azur
|
|||
== table-1.html table-1-ref.html
|
||||
== table-2.html table-2-ref.html
|
||||
== table-3.html table-3-ref.html
|
||||
== table-cell-1.html table-internal-1-ref.html
|
||||
== table-cell-2.html table-internal-2-ref.html
|
||||
== table-cell-3.html table-internal-3-ref.html
|
||||
== table-cell-4.html table-internal-4-ref.html
|
||||
== table-row-1.html table-internal-1-ref.html
|
||||
== table-row-2.html table-internal-2-ref.html
|
||||
== table-row-3.html table-internal-3-ref.html
|
||||
== table-row-4.html table-internal-4-ref.html
|
||||
== table-row-group-1.html table-internal-1-ref.html
|
||||
== table-row-group-2.html table-internal-2-ref.html
|
||||
== table-row-group-3.html table-internal-3-ref.html
|
||||
== table-row-group-4.html table-internal-4-ref.html
|
||||
== table-header-group-1.html table-internal-1-ref.html
|
||||
== table-header-group-2.html table-internal-2-ref.html
|
||||
== table-header-group-3.html table-internal-3-ref.html
|
||||
== table-header-group-4.html table-internal-4-ref.html
|
||||
== table-footer-group-1.html table-internal-1-ref.html
|
||||
== table-footer-group-2.html table-internal-2-ref.html
|
||||
== table-footer-group-3.html table-internal-3-ref.html
|
||||
== table-footer-group-4.html table-internal-4-ref.html
|
||||
== continuation-positioned-inline-1.html continuation-positioned-inline-ref.html
|
||||
== continuation-positioned-inline-2.html continuation-positioned-inline-ref.html
|
||||
== scrollframe-1.html scrollframe-1-ref.html
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<table>
|
||||
<tr>
|
||||
<td id="rel">
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<div style="position: relative">
|
||||
<table>
|
||||
<tr>
|
||||
<td id="rel">
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height: 100%">
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="rel">
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td, div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 200px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width: 15%">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="rel">
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<table>
|
||||
<tfoot id="rel">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<div style="position: relative">
|
||||
<table>
|
||||
<tfoot id="rel">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height: 100%">
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot id="rel">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 200px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width: 15%">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot id="rel">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<table>
|
||||
<thead id="rel">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<div style="position: relative">
|
||||
<table>
|
||||
<thead id="rel">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height: 100%">
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead id="rel">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 200px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width: 15%">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<thead id="rel">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<div id="rel">
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<div style="position: relative">
|
||||
<div id="rel">
|
||||
<div class="abs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height: 100%">
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="rel">
|
||||
<div id="abs"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td, div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 200.5px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width: 15%">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="rel">
|
||||
<div id="abs"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<table>
|
||||
<tr id="rel">
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<div style="position: relative">
|
||||
<table>
|
||||
<tr id="rel">
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height: 100%">
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr id="rel">
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td, div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 200px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width: 15%">
|
||||
<col>
|
||||
</colgroup>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr id="rel">
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<table>
|
||||
<tbody id="rel">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
#bad {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not completely cover the blue square.
|
||||
<div class="abs" id="bad"></div>
|
||||
<div style="position: relative">
|
||||
<table>
|
||||
<tbody id="rel">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr style="height: 100%">
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="rel">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
table {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#rel {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#abs {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
top: 200px;
|
||||
left: 25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The green square should not touch the blue square.
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width: 15%">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="rel">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div id="abs"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
Загрузка…
Ссылка в новой задаче