Bug 1109571 part 5 - tests.

This commit is contained in:
Mats Palmgren 2014-12-26 07:21:32 +00:00
parent d0e06cf7ac
commit d7a6665152
15 changed files with 534 additions and 0 deletions

View File

@ -5,6 +5,11 @@ 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-caption-1.html table-internal-1-ref.html
== table-caption-2.html table-internal-2-ref.html
== table-caption-3.html table-internal-3-ref.html
== table-caption-4.html table-internal-8-ref.html
skip-if(B2G&&browserIsRemote) != table-caption-5.html table-print-1-ref.html # TODO: change to == when bug 967870 is fixed
== 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
@ -12,6 +17,7 @@ fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated&&!azur
== table-cell-5.html table-internal-5-ref.html
== table-cell-6.html table-internal-6-ref.html
== table-cell-7.html table-internal-7-ref.html
skip-if(B2G&&browserIsRemote) != table-cell-8.html table-print-1-ref.html # TODO: change to == when bug 967870 is fixed
== 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

View File

@ -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>
<table>
<caption id="rel"><div class="abs"></div></caption>
</table>
</body>
</html>

View File

@ -0,0 +1,37 @@
<!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">
<table>
<caption id="rel"><div class="abs"></div></caption>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -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-left: 2px;
margin-top: -2px;
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></td>
<td></td>
</tr>
<caption style="caption-side:bottom" id="rel"><div id="abs"></div></caption>
</table>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style>
#rel {
position: relative;
margin: 2px;
padding: 0;
}
.fixed, .abs {
position: fixed;
margin: 0;
padding: 0;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
background-color: green;
}
#bad {
background-color: red;
}
</style>
</head>
<body>
The green square should completely cover the red square.
<div class="abs" id="bad"></div>
<table>
<caption id="rel"><div class="fixed"></div></caption>
</table>
</body>
</html>

View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class="reftest-print">
<head>
<style>
@page { size:5in 3in; margin:0.5in; }
#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;
}
.m { height:1.4in; }
.b { border:1px solid; }
</style>
</head>
<body>
<div class="m"></div>
<table>
<caption id="rel"><div class="abs b"></div></caption>
</table>
</body>
</html>

View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class="reftest-print">
<head>
<style>
@page { size:5in 3in; margin:0.5in; }
#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;
}
.m { height:1.4in; }
.b { border:1px solid; }
</style>
</head>
<body>
<div class="m"></div>
<table>
<tr><td id="rel"><div class="abs b"></div></td></tr>
</table>
</body>
</html>

View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style>
#good {
background-color: green;
}
.abs {
position: fixed;
margin: 0;
padding: 0;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
The green square should completely cover the red square.
<div class="abs" id="good"></div>
</body>
</html>

View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html class="reftest-print">
<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;
}
.m { height:1.4in; }
.b { border:1px solid; }
</style>
</head>
<body>
<div class="m"></div>
<div id="rel"><div class="abs b"></div></div>
</body>
</html>

View File

@ -0,0 +1,78 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Testcase for table caption column layout</title>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/">
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1109571">
<style type="text/css">
* {
color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace;
}
.caption {
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
-ms-column-count:2;
column-count:2;
-moz-column-rule:2px solid blue;
-webkit-column-rule:2px solid blue;
-o-column-rule:2px solid blue;
-ms-column-rule:2px solid blue;
column-rule:2px solid blue;
-moz-column-gap:10px;
-webkit-column-gap:10px;
-o-column-gap:10px;
-ms-column-gap:10px;
column-gap:10px;
height:2.2em;
line-height:1em;
border:2px dotted;
}
.col1 {
-moz-column-count:1;
-webkit-column-count:1;
-o-column-count:1;
-ms-column-count:1;
column-count:1;
}
.cw1 {
-moz-column-width:1px;
-webkit-column-width:1px;
-o-column-width:1px;
-ms-column-width:1px;
column-width:1px;
}
table {border:1px solid black}
.wrap { float:left; clear:both; outline:1px dashed lime; margin-top:3px; }
</style>
</head>
<body>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption">1<br>2<br>3</div></caption><tr><td>a table with a two column caption</td></table></div>
<div class="wrap">
<div class="caption" style="height:1.1em; text-align:center">1<br>2<br>3</div>
<table cellpadding="0" cellspacing="0"><tr><td>a table with a two column caption</td></table>
</div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption" style="border: 1px solid blue">1111<br>2<br>3</div></caption><tr><td>a table with a two column caption</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption">1111<br>2<br>3<br>4</div></caption><tr><td>T</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption col1">1111<br>2<br>3<br>4</div></caption><tr><td>T</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption col1">1111<br>2<br>3<br>4</div></caption><tr><td>a table with a two column caption</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption><div class="caption col1">1111<br>2<br>3<br>4</div></caption><tr><td>a table with a two column caption</td></table></div>
</body>
</html>

View File

@ -0,0 +1,76 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Testcase for table caption column layout</title>
<link rel="help" href="http://www.w3.org/TR/css3-multicol/">
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1109571">
<link rel="match" href="columns-table-caption-000-ref.html">
<style type="text/css">
* {
color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace;
}
caption {
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
-ms-column-count:2;
column-count:2;
-moz-column-rule:2px solid blue;
-webkit-column-rule:2px solid blue;
-o-column-rule:2px solid blue;
-ms-column-rule:2px solid blue;
column-rule:2px solid blue;
-moz-column-gap:10px;
-webkit-column-gap:10px;
-o-column-gap:10px;
-ms-column-gap:10px;
column-gap:10px;
height:2.2em;
line-height:1em;
border:2px dotted;
}
.col1 {
-moz-column-count:1;
-webkit-column-count:1;
-o-column-count:1;
-ms-column-count:1;
column-count:1;
}
.cw1 {
-moz-column-width:1px;
-webkit-column-width:1px;
-o-column-width:1px;
-ms-column-width:1px;
column-width:1px;
}
table {border:1px solid black}
.wrap { float:left; clear:both; outline:1px dashed lime; margin-top:3px; }
</style>
</head>
<body>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption>1<br>2<br>3</caption><tr><td>a table with a two column caption</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption style="height:1.1em">1<br>2<br>3</caption><tr><td>a table with a two column caption</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption style="border:inherit; border-color:blue">1111<br>2<br>3</caption><tr><td>a table with a two column caption</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption>1111<br>2<br>3<br>4</caption><tr><td>T</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption class="col1">1111<br>2<br>3<br>4</caption><tr><td>T</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption class="col1">1111<br>2<br>3<br>4</caption><tr><td>a table with a two column caption</td></table></div>
<div class="wrap"><table cellpadding="0" cellspacing="0"><caption class="col1 cw1">1111<br>2<br>3<br>4</caption><tr><td>a table with a two column caption</td></table></div>
</body>
</html>

View File

@ -32,4 +32,5 @@ skip-if(B2G) == columnfill-overflow.html columnfill-overflow-ref.html # bug 7734
== column-balancing-nested-000.html column-balancing-nested-000-ref.html
== column-balancing-nested-001.html column-balancing-nested-001-ref.html
== columnrule-overflow.html columnrule-overflow-ref.html
== columns-table-caption-000.html columns-table-caption-000-ref.html
== positioning-transforms-bug1112501.html positioning-transforms-bug1112501-ref.html

View File

@ -2,3 +2,4 @@
== bug785684-y.html bug785684-ref.html
== table-row-pagination.html table-row-pagination-ref.html
== 963441.html 963441-ref.html
== table-caption-scroll.html table-caption-scroll-ref.html

View File

@ -0,0 +1,49 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Testing table captions with overflow:auto/scroll/hidden</title>
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
}
.caption { overflow:auto; border:1px solid; height:100px; }
.s { overflow:scroll; }
.h { overflow:hidden; }
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<caption><div class="caption">0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
<tr><td>TTTTTTTTTT</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption><div class="caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
<tr><td>T</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption><div class="s caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
<tr><td>T</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption><div class="s caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
<tr><td>TTTTTTTTTT</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption><div class="h caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
<tr><td>T</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption><div class="h caption">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div></caption>
<tr><td>TTTTTTTTTT</td></tr>
</table>
</body>
</html>

View File

@ -0,0 +1,49 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Testing table captions with overflow:auto/scroll/hidden</title>
<style type="text/css">
html,body {
color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
}
caption { border:1px solid; overflow:auto; height:100px; }
.s { overflow:scroll; }
.h { overflow:hidden; }
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<caption>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
<tr><td>TTTTTTTTTT</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption>00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
<tr><td>T</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption class="s">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
<tr><td>T</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption class="s">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
<tr><td>TTTTTTTTTT</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption class="h">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
<tr><td>T</td></tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<caption class="h">00000<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</caption>
<tr><td>TTTTTTTTTT</td></tr>
</table>
</body>
</html>