Initial import of Dillo
This commit is contained in:
1
test/html/render/b-div.html
Normal file
1
test/html/render/b-div.html
Normal file
@ -0,0 +1 @@
|
||||
<b>Hello World</b><div>Hello world</div>
|
||||
1
test/html/render/b-div.ref.html
Normal file
1
test/html/render/b-div.ref.html
Normal file
@ -0,0 +1 @@
|
||||
<b>Hello World</b><br/>Hello world
|
||||
29
test/html/render/div-100-percent-with-padding.html
Normal file
29
test/html/render/div-100-percent-with-padding.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test padding in 100% width div</title>
|
||||
<style>
|
||||
body {margin: 0px}
|
||||
.test {
|
||||
width: 100%;
|
||||
margin: 50px;
|
||||
padding: 50px;
|
||||
background: lightgreen;
|
||||
border: solid 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
test/html/render/div-100-percent-with-padding.ref.html
Normal file
29
test/html/render/div-100-percent-with-padding.ref.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test padding in 100% width div</title>
|
||||
<style>
|
||||
body {margin: 0px}
|
||||
.test {
|
||||
width: 800px;
|
||||
margin: 50px;
|
||||
padding: 50px;
|
||||
background: lightgreen;
|
||||
border: solid 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
19
test/html/render/float-img-justify.html
Normal file
19
test/html/render/float-img-justify.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test floating image in paragraph with br</title>
|
||||
<style>
|
||||
body {width: 400px}
|
||||
img {width: 40%; float:right}
|
||||
p {text-align: justify;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<i>The text below should be readable:</i>
|
||||
<p>
|
||||
<img src="pic.png" />
|
||||
This is a rather long text to increase the width.
|
||||
<br>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
18
test/html/render/float-img-justify.ref.html
Normal file
18
test/html/render/float-img-justify.ref.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test floating image in paragraph with br</title>
|
||||
<style>
|
||||
body {width: 400px}
|
||||
img {width: 40%; float:right}
|
||||
p {text-align: justify;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<i>The text below should be readable:</i>
|
||||
<p>
|
||||
<img src="pic.png" />
|
||||
This is a rather long text to increase the width.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
14
test/html/render/github-infinite-loop.html
Normal file
14
test/html/render/github-infinite-loop.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>GitHub infinite layout loop</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:inline-block">
|
||||
<form style="float:left">
|
||||
<input type="hidden"/>
|
||||
<button type="submit" style="white-space:nowrap; float:left">Hello</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
test/html/render/github-infinite-loop.ref.html
Normal file
14
test/html/render/github-infinite-loop.ref.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>GitHub infinite layout loop</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:inline-block">
|
||||
<form style="float:left">
|
||||
<input type="hidden"/>
|
||||
<button type="submit" style="white-space:nowrap">Hello</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
test/html/render/hackernews.html
Normal file
15
test/html/render/hackernews.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hacker News table test</title>
|
||||
</head>
|
||||
<body style="margin: 0px; width:600px">
|
||||
<table width="50%" cellspacing=0 bgcolor="#f6f6ef">
|
||||
<tr>
|
||||
<td bgcolor="#ff6600">
|
||||
Hello world.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
15
test/html/render/hackernews.ref.html
Normal file
15
test/html/render/hackernews.ref.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hacker News table test</title>
|
||||
</head>
|
||||
<body style="margin: 0px">
|
||||
<table style="width: 300px" border=0 cellspacing=0 bgcolor="#f6f6ef">
|
||||
<tr>
|
||||
<td bgcolor="#ff6600" border=0 cellspacing=0>
|
||||
Hello world.
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
18
test/html/render/img-aspect-ratio-absolute.html
Normal file
18
test/html/render/img-aspect-ratio-absolute.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio with height larger than viewport</title>
|
||||
<style>
|
||||
body {
|
||||
min-width: 16px;
|
||||
}
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="pic.png">
|
||||
</body>
|
||||
</html>
|
||||
18
test/html/render/img-aspect-ratio-absolute.ref.html
Normal file
18
test/html/render/img-aspect-ratio-absolute.ref.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio with height larger than viewport</title>
|
||||
<style>
|
||||
body {
|
||||
min-width: 16px;
|
||||
}
|
||||
img {
|
||||
width:755px;
|
||||
height:755px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="pic.png">
|
||||
</body>
|
||||
</html>
|
||||
40
test/html/render/img-aspect-ratio-div.html
Normal file
40
test/html/render/img-aspect-ratio-div.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio inside an unconstrained div</title>
|
||||
<style>
|
||||
div {
|
||||
/*border: 1px solid black*/;
|
||||
}
|
||||
div.out {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.big {
|
||||
min-width: 16px;
|
||||
}
|
||||
div.small {
|
||||
max-width: 64px;
|
||||
}
|
||||
/* Even if we are specifying the image to have 100% height, the image
|
||||
* must not extend to all the available height of the div.out container.
|
||||
* It should continue to keep the aspect ratio as the width is constrained
|
||||
* to 64 px, so it should be 64 px tall. */
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="out">
|
||||
<div class="big">
|
||||
<img src="pic.png">
|
||||
</div>
|
||||
<div class="small">
|
||||
<img src="pic.png">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
40
test/html/render/img-aspect-ratio-div.ref.html
Normal file
40
test/html/render/img-aspect-ratio-div.ref.html
Normal file
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio inside an unconstrained div</title>
|
||||
<style>
|
||||
div {
|
||||
/*border: 1px solid black;*/
|
||||
}
|
||||
div.out {
|
||||
width: 300px;
|
||||
height: 600px;
|
||||
background: lightgreen;
|
||||
}
|
||||
div.big {
|
||||
min-width: 16px;
|
||||
}
|
||||
div.small {
|
||||
max-width: 64px;
|
||||
}
|
||||
/* Even if we are specifying the image to have 100% height, the image
|
||||
* must not extend to all the available height of the div.out container.
|
||||
* It should continue to keep the aspect ratio as the width is constrained
|
||||
* to 64 px, so it should be 64 px tall. */
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="out">
|
||||
<div class="big">
|
||||
<img style="width:300px; height:300px" src="pic.png">
|
||||
</div>
|
||||
<div class="small">
|
||||
<img style="width:64px; height:64px" src="pic.png">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
test/html/render/img-aspect-ratio-mix-border.html
Normal file
42
test/html/render/img-aspect-ratio-mix-border.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio while constrained</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
div {width: 640px; height: 640px; background: lightblue;}
|
||||
img {border: 10px solid green}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>All images should be 32px by 32px like this one:</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Only one max-* constraint</p>
|
||||
<img src="pic.png" style="max-width :32px;">
|
||||
<img src="pic.png" style="max-height:32px;">
|
||||
<img src="pic.png" style="max-width :5%;">
|
||||
<img src="pic.png" style="max-height:5%;">
|
||||
<p>One max-* and fixed size constraint</p>
|
||||
<img src="pic.png" style="height:32px; max-width:256px">
|
||||
<img src="pic.png" style="height:5%; max-width:256px">
|
||||
<img src="pic.png" style="max-height:256px; width:32px">
|
||||
<img src="pic.png" style="max-height:256px; width:5%">
|
||||
<p>Two max-* constraints</p>
|
||||
<img src="pic.png" style="max-height:32px; max-width:256px">
|
||||
<img src="pic.png" style="max-height:5%; max-width:256px">
|
||||
<img src="pic.png" style="max-height:256px; max-width:32px">
|
||||
<img src="pic.png" style="max-height:256px; max-width:5%">
|
||||
<p>Both min-* and max-* constrained</p>
|
||||
<img src="pic.png" style="min-width:32px; min-height:16px; max-width:32px; max-height:64px">
|
||||
<img src="pic.png" style="min-width:5%; min-height:16px; max-width:5%; max-height:64px">
|
||||
<img src="pic.png" style="min-width:16px; min-height:32px; max-width:64px; max-height:32px">
|
||||
<img src="pic.png" style="min-width:16px; min-height:5%; max-width:64px; max-height:5%">
|
||||
<p>Bad constraints</p>
|
||||
<img src="pic.png" style="max-width: 16px; min-width: 32px;">
|
||||
<img src="pic.png" style="max-height:16px; min-height:32px;">
|
||||
<img src="pic.png" style="max-width: 16px; min-width: 5%;">
|
||||
<img src="pic.png" style="max-height:16px; min-height:5%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
test/html/render/img-aspect-ratio-mix-border.ref.html
Normal file
42
test/html/render/img-aspect-ratio-mix-border.ref.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio while constrained</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
div {width: 640px; height: 640px; background: lightblue;}
|
||||
img {border: 10px solid green}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>All images should be 32px by 32px like this one:</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Only one max-* constraint</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>One max-* and fixed size constraint</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Two max-* constraints</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Both min-* and max-* constrained</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Bad constraints</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
test/html/render/img-aspect-ratio-mix-margin.html
Normal file
42
test/html/render/img-aspect-ratio-mix-margin.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio while constrained</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
div {width: 640px; height: 640px; background: lightblue;}
|
||||
img {margin: 10px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>All images should be 32px by 32px like this one:</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Only one max-* constraint</p>
|
||||
<img src="pic.png" style="max-width :32px;">
|
||||
<img src="pic.png" style="max-height:32px;">
|
||||
<img src="pic.png" style="max-width :5%;">
|
||||
<img src="pic.png" style="max-height:5%;">
|
||||
<p>One max-* and fixed size constraint</p>
|
||||
<img src="pic.png" style="height:32px; max-width:256px">
|
||||
<img src="pic.png" style="height:5%; max-width:256px">
|
||||
<img src="pic.png" style="max-height:256px; width:32px">
|
||||
<img src="pic.png" style="max-height:256px; width:5%">
|
||||
<p>Two max-* constraints</p>
|
||||
<img src="pic.png" style="max-height:32px; max-width:256px">
|
||||
<img src="pic.png" style="max-height:5%; max-width:256px">
|
||||
<img src="pic.png" style="max-height:256px; max-width:32px">
|
||||
<img src="pic.png" style="max-height:256px; max-width:5%">
|
||||
<p>Both min-* and max-* constrained</p>
|
||||
<img src="pic.png" style="min-width:32px; min-height:16px; max-width:32px; max-height:64px">
|
||||
<img src="pic.png" style="min-width:5%; min-height:16px; max-width:5%; max-height:64px">
|
||||
<img src="pic.png" style="min-width:16px; min-height:32px; max-width:64px; max-height:32px">
|
||||
<img src="pic.png" style="min-width:16px; min-height:5%; max-width:64px; max-height:5%">
|
||||
<p>Bad constraints</p>
|
||||
<img src="pic.png" style="max-width: 16px; min-width: 32px;">
|
||||
<img src="pic.png" style="max-height:16px; min-height:32px;">
|
||||
<img src="pic.png" style="max-width: 16px; min-width: 5%;">
|
||||
<img src="pic.png" style="max-height:16px; min-height:5%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
test/html/render/img-aspect-ratio-mix-margin.ref.html
Normal file
42
test/html/render/img-aspect-ratio-mix-margin.ref.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio while constrained</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
div {width: 640px; height: 640px; background: lightblue;}
|
||||
img {margin: 10px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>All images should be 32px by 32px like this one:</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Only one max-* constraint</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>One max-* and fixed size constraint</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Two max-* constraints</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Both min-* and max-* constrained</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Bad constraints</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
test/html/render/img-aspect-ratio-mix.html
Normal file
41
test/html/render/img-aspect-ratio-mix.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio while constrained</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
div {width: 640px; height: 640px; background: lightblue;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>All images should be 32px by 32px like this one:</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Only one max-* constraint</p>
|
||||
<img src="pic.png" style="max-width :32px;">
|
||||
<img src="pic.png" style="max-height:32px;">
|
||||
<img src="pic.png" style="max-width :5%;">
|
||||
<img src="pic.png" style="max-height:5%;">
|
||||
<p>One max-* and fixed size constraint</p>
|
||||
<img src="pic.png" style="height:32px; max-width:256px">
|
||||
<img src="pic.png" style="height:5%; max-width:256px">
|
||||
<img src="pic.png" style="max-height:256px; width:32px">
|
||||
<img src="pic.png" style="max-height:256px; width:5%">
|
||||
<p>Two max-* constraints</p>
|
||||
<img src="pic.png" style="max-height:32px; max-width:256px">
|
||||
<img src="pic.png" style="max-height:5%; max-width:256px">
|
||||
<img src="pic.png" style="max-height:256px; max-width:32px">
|
||||
<img src="pic.png" style="max-height:256px; max-width:5%">
|
||||
<p>Both min-* and max-* constrained</p>
|
||||
<img src="pic.png" style="min-width:32px; min-height:16px; max-width:32px; max-height:64px">
|
||||
<img src="pic.png" style="min-width:5%; min-height:16px; max-width:5%; max-height:64px">
|
||||
<img src="pic.png" style="min-width:16px; min-height:32px; max-width:64px; max-height:32px">
|
||||
<img src="pic.png" style="min-width:16px; min-height:5%; max-width:64px; max-height:5%">
|
||||
<p>Bad constraints</p>
|
||||
<img src="pic.png" style="max-width: 16px; min-width: 32px;">
|
||||
<img src="pic.png" style="max-height:16px; min-height:32px;">
|
||||
<img src="pic.png" style="max-width: 16px; min-width: 5%;">
|
||||
<img src="pic.png" style="max-height:16px; min-height:5%;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
test/html/render/img-aspect-ratio-mix.ref.html
Normal file
41
test/html/render/img-aspect-ratio-mix.ref.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio while constrained</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
div {width: 640px; height: 640px; background: lightblue;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>All images should be 32px by 32px like this one:</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Only one max-* constraint</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>One max-* and fixed size constraint</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Two max-* constraints</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Both min-* and max-* constrained</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<p>Bad constraints</p>
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
<img src="pic.png" style="width:32px;height:32px;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
test/html/render/img-aspect-ratio-relative-inside-fixed.html
Normal file
25
test/html/render/img-aspect-ratio-relative-inside-fixed.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio when both dimensions are relative and container is fixed</title>
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 256px;
|
||||
}
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The image must fill the complete div even if that means distorting it.
|
||||
The image specifies the size as 100% of the container in both dimensions and
|
||||
the container has a fixed size.</p>
|
||||
<div>
|
||||
<img src="pic.png">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio when both dimensions are relative and container is fixed</title>
|
||||
<style>
|
||||
div {
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 256px;
|
||||
}
|
||||
img {
|
||||
width:64px;
|
||||
height:256px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The image must fill the complete div even if that means distorting it.
|
||||
The image specifies the size as 100% of the container in both dimensions and
|
||||
the container has a fixed size.</p>
|
||||
<div>
|
||||
<img src="pic.png">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
16
test/html/render/img-aspect-ratio.html
Normal file
16
test/html/render/img-aspect-ratio.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="pic.png" style="height:100px" />
|
||||
<img src="pic.png" style="max-height:100px" />
|
||||
<img src="pic.png" style="width:100px" />
|
||||
<img src="pic.png" style="max-width:100px" />
|
||||
<a href="#"><img src="pic.png" style="max-width:100px" /></a>
|
||||
</body>
|
||||
</html>
|
||||
16
test/html/render/img-aspect-ratio.ref.html
Normal file
16
test/html/render/img-aspect-ratio.ref.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test image aspect ratio</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="pic.png" style="height:100px; width:100px" />
|
||||
<img src="pic.png" style="height:100px; width:100px" />
|
||||
<img src="pic.png" style="height:100px; width:100px" />
|
||||
<img src="pic.png" style="height:100px; width:100px" />
|
||||
<a href="#"><img src="pic.png" style="height:100px; width:100px" /></a>
|
||||
</body>
|
||||
</html>
|
||||
20
test/html/render/main-style.html
Normal file
20
test/html/render/main-style.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Main should behave like a div</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin-left: 20em; background: lightgreen">
|
||||
div
|
||||
</div>
|
||||
<main style="margin-left: 20em; background: lightgreen">
|
||||
main
|
||||
</main>
|
||||
<header style="margin-left: 20em; background: lightgreen">
|
||||
header
|
||||
</header>
|
||||
<footer style="margin-left: 20em; background: lightgreen">
|
||||
footer
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
20
test/html/render/main-style.ref.html
Normal file
20
test/html/render/main-style.ref.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Main should behave like a div</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin-left: 20em; background: lightgreen">
|
||||
div
|
||||
</div>
|
||||
<div style="margin-left: 20em; background: lightgreen">
|
||||
main
|
||||
</div>
|
||||
<div style="margin-left: 20em; background: lightgreen">
|
||||
header
|
||||
</div>
|
||||
<div style="margin-left: 20em; background: lightgreen">
|
||||
footer
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
16
test/html/render/margin-auto.html
Normal file
16
test/html/render/margin-auto.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test CSS margin auto</title>
|
||||
<style>
|
||||
div {height:100px}
|
||||
.container {width:300px; background: lightgreen}
|
||||
.child {width:100px; background: brown; margin:auto }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
16
test/html/render/margin-auto.ref.html
Normal file
16
test/html/render/margin-auto.ref.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test CSS margin auto</title>
|
||||
<style>
|
||||
div {height:100px}
|
||||
.container {width:300px; background: lightgreen}
|
||||
.child {width:100px; background: brown; margin-left:100px; margin-right:100px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
test/html/render/max-width-body.html
Normal file
22
test/html/render/max-width-body.html
Normal file
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width in body</title>
|
||||
<style>
|
||||
body {margin: 20px; max-width: 400px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
test/html/render/max-width-body.ref.html
Normal file
22
test/html/render/max-width-body.ref.html
Normal file
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width in body</title>
|
||||
<style>
|
||||
body {margin: 20px; width: 400px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
test/html/render/max-width-div-clamp.html
Normal file
14
test/html/render/max-width-div-clamp.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width CSS properties</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {max-width: 1000px; height: 100px; background: lightgreen}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
test/html/render/max-width-div-clamp.ref.html
Normal file
14
test/html/render/max-width-div-clamp.ref.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width CSS properties</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {width: 100%; height: 100px; background: lightgreen}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
test/html/render/max-width-div.html
Normal file
23
test/html/render/max-width-div.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width CSS properties</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {max-width: 600px; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
test/html/render/max-width-div.ref.html
Normal file
23
test/html/render/max-width-div.ref.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width CSS properties</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {width: 600px; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
test/html/render/max-width-html.html
Normal file
23
test/html/render/max-width-html.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width in html tag</title>
|
||||
<style>
|
||||
html {max-width: 400px}
|
||||
body {margin: 20px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
23
test/html/render/max-width-html.ref.html
Normal file
23
test/html/render/max-width-html.ref.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width in html tag</title>
|
||||
<style>
|
||||
div {width: 360px}
|
||||
body {margin: 20px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the works.
|
||||
By contrast, the GNU General Public License is intended to
|
||||
guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its users.
|
||||
We, the Free Software Foundation, use the GNU General Public
|
||||
License for most of our software; it applies also to any other
|
||||
work released this way by its authors. You can apply it to your
|
||||
programs, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
test/html/render/max-width-nested-div.html
Normal file
25
test/html/render/max-width-nested-div.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width in a nested div</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {max-width: 400px; background: lightgray}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background:lightblue">
|
||||
<div class="test">
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the
|
||||
works. By contrast, the GNU General Public License is intended
|
||||
to guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its
|
||||
users. We, the Free Software Foundation, use the GNU General
|
||||
Public License for most of our software; it applies also to any
|
||||
other work released this way by its authors. You can apply it to
|
||||
your programs, too.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
test/html/render/max-width-nested-div.ref.html
Normal file
25
test/html/render/max-width-nested-div.ref.html
Normal file
@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width in a nested div</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {width: 400px; background: lightgray}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="background:lightblue">
|
||||
<div class="test">
|
||||
<p>The licenses for most software and other practical works are
|
||||
designed to take away your freedom to share and change the
|
||||
works. By contrast, the GNU General Public License is intended
|
||||
to guarantee your freedom to share and change all versions of a
|
||||
program--to make sure it remains free software for all its
|
||||
users. We, the Free Software Foundation, use the GNU General
|
||||
Public License for most of our software; it applies also to any
|
||||
other work released this way by its authors. You can apply it to
|
||||
your programs, too.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
test/html/render/meta-refresh-0-no-url.html
Normal file
10
test/html/render/meta-refresh-0-no-url.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test meta refresh 0 without URL</title>
|
||||
<meta http-equiv="Refresh" content="0">
|
||||
</head>
|
||||
<body>
|
||||
<p>Should be ignored.</p>
|
||||
</body>
|
||||
</html>
|
||||
9
test/html/render/meta-refresh-0-no-url.ref.html
Normal file
9
test/html/render/meta-refresh-0-no-url.ref.html
Normal file
@ -0,0 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test meta refresh 0 without URL</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Should be ignored.</p>
|
||||
</body>
|
||||
</html>
|
||||
15
test/html/render/min-width-body.html
Normal file
15
test/html/render/min-width-body.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width CSS property in the body</title>
|
||||
<style>
|
||||
body {min-width: 2000px; margin: 50px}
|
||||
.test {background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
test/html/render/min-width-body.ref.html
Normal file
15
test/html/render/min-width-body.ref.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width CSS property in the body</title>
|
||||
<style>
|
||||
body {margin: 50px}
|
||||
.test {width: 2000px; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
test/html/render/min-width-div-extend.html
Normal file
14
test/html/render/min-width-div-extend.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width CSS properties</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {min-width: 100px; height: 100px; background: lightgreen}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
14
test/html/render/min-width-div-extend.ref.html
Normal file
14
test/html/render/min-width-div-extend.ref.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test max-width CSS properties</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {width: 100%; height: 100px; background: lightgreen}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
test/html/render/min-width-div.html
Normal file
15
test/html/render/min-width-div.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width CSS property</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {min-width: 400px; display: inline-block; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
test/html/render/min-width-div.ref.html
Normal file
15
test/html/render/min-width-div.ref.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width CSS property</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.test {width: 400px; display: inline-block; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
16
test/html/render/min-width-html.html
Normal file
16
test/html/render/min-width-html.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width in the html tag</title>
|
||||
<style>
|
||||
html {min-width: 2000px}
|
||||
body {margin: 0px}
|
||||
.test {background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
test/html/render/min-width-html.ref.html
Normal file
15
test/html/render/min-width-html.ref.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width in the html tag</title>
|
||||
<style>
|
||||
body {margin: 0px}
|
||||
.test {width: 2000px; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
18
test/html/render/min-width-nested-div.html
Normal file
18
test/html/render/min-width-nested-div.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width CSS property</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.container {background: lightcyan}
|
||||
.test {min-width: 400px; display: inline-block; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
18
test/html/render/min-width-nested-div.ref.html
Normal file
18
test/html/render/min-width-nested-div.ref.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test min-width CSS property</title>
|
||||
<style>
|
||||
body {margin: 20px}
|
||||
.container {background: lightcyan}
|
||||
.test {width: 400px; display: inline-block; background: lightgrey}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="test">
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
test/html/render/pic.png
Normal file
BIN
test/html/render/pic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
13
test/html/render/span-padding.html
Normal file
13
test/html/render/span-padding.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test span with padding CSS property</title>
|
||||
<style>
|
||||
span {padding-right: 40px; background: lightgreen}
|
||||
body {margin: 40px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span>hi</span>
|
||||
</body>
|
||||
</html>
|
||||
13
test/html/render/span-padding.ref.html
Normal file
13
test/html/render/span-padding.ref.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test span with padding CSS property</title>
|
||||
<style>
|
||||
div {padding-right: 40px; float:left; background: lightgreen}
|
||||
body {margin: 40px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>hi</div>
|
||||
</body>
|
||||
</html>
|
||||
29
test/html/render/svg-current-color.html
Normal file
29
test/html/render/svg-current-color.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test SVG image with currentColor property</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 1em;
|
||||
}
|
||||
.container {
|
||||
border: 1px solid black;
|
||||
padding: 1em;
|
||||
background: lightcyan;
|
||||
color: darkred;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p>The following SVG image contains two elements with the
|
||||
<code>currentColor</code> specification in fill and stroke, respectively.
|
||||
This special color maps to the same value for the color of the image
|
||||
element. These values are controlled by the CSS style of the page.</p>
|
||||
<p>You should see a darkred background around the image (like this text
|
||||
color) <b>not a black background</b>. You should also see a inner circle
|
||||
in darkred not black.</p>
|
||||
<img src="svg-current-color.svg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
test/html/render/svg-current-color.png
Normal file
BIN
test/html/render/svg-current-color.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
29
test/html/render/svg-current-color.ref.html
Normal file
29
test/html/render/svg-current-color.ref.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test SVG image with currentColor property</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 1em;
|
||||
}
|
||||
.container {
|
||||
border: 1px solid black;
|
||||
padding: 1em;
|
||||
background: lightcyan;
|
||||
color: darkred;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<p>The following SVG image contains two elements with the
|
||||
<code>currentColor</code> specification in fill and stroke, respectively.
|
||||
This special color maps to the same value for the color of the image
|
||||
element. These values are controlled by the CSS style of the page.</p>
|
||||
<p>You should see a darkred background around the image (like this text
|
||||
color) <b>not a black background</b>. You should also see a inner circle
|
||||
in darkred not black.</p>
|
||||
<img src="svg-current-color.png">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
114
test/html/render/svg-current-color.svg
Normal file
114
test/html/render/svg-current-color.svg
Normal file
@ -0,0 +1,114 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
width="128"
|
||||
height="128"
|
||||
viewBox="0 0 128 128"
|
||||
sodipodi:docname="pic.svg"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#999999"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="6.40625"
|
||||
inkscape:cx="59.629268"
|
||||
inkscape:cy="70.243902"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1031"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g1" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Image"
|
||||
id="g1">
|
||||
<rect
|
||||
style="fill:currentColor;fill-opacity:1;stroke:none;stroke-linecap:square"
|
||||
id="rect616"
|
||||
width="128"
|
||||
height="128"
|
||||
x="0"
|
||||
y="0"
|
||||
inkscape:label="back" />
|
||||
<circle
|
||||
style="fill:#0bb3ca;fill-opacity:1;stroke:#4d4d4d;stroke-width:1.381;stroke-linecap:square;stroke-dasharray:1.38100004,4.14300013;stroke-dashoffset:0"
|
||||
id="path615"
|
||||
cx="64"
|
||||
cy="64"
|
||||
r="38.763187" />
|
||||
<circle
|
||||
style="fill:#d40000;fill-opacity:1;stroke:#000000;stroke-width:1.58595;stroke-linecap:square"
|
||||
id="path616"
|
||||
cx="93.211456"
|
||||
cy="94.337479"
|
||||
r="14.633001" />
|
||||
<rect
|
||||
style="fill:#89a02c;fill-opacity:1;stroke:none;stroke-linecap:square"
|
||||
id="rect617"
|
||||
width="28.700762"
|
||||
height="27.012766"
|
||||
x="20.502666"
|
||||
y="81.542755"
|
||||
ry="5.7139564" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#ff00ff;fill-opacity:1;stroke:none;stroke-linecap:square"
|
||||
id="path617"
|
||||
inkscape:flatsided="false"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="31.306641"
|
||||
sodipodi:cy="24.1026"
|
||||
sodipodi:r1="20.530739"
|
||||
sodipodi:r2="5.7896686"
|
||||
sodipodi:arg1="0.83511515"
|
||||
sodipodi:arg2="1.8823127"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="M 45.084662,39.323552 29.532093,29.613611 11.235899,28.424241 27.421239,19.810292 37.599361,4.5600079 36.96659,22.883897 Z"
|
||||
inkscape:transform-center-x="-0.73649166"
|
||||
inkscape:transform-center-y="0.28526791"
|
||||
transform="translate(5.3689906,12.402608)" />
|
||||
<path
|
||||
style="fill:#ee9900;stroke:#ffffff;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 76.863681,13.816987 c 0,0 -25.978379,34.537695 -4.580506,29.894198 21.397872,-4.643496 15.431002,-26.356493 15.431002,-26.356493 l 6.988281,17.286683"
|
||||
id="path618"
|
||||
sodipodi:nodetypes="cscc" />
|
||||
<path
|
||||
style="fill:#8dd35f;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-dasharray:none"
|
||||
id="path619"
|
||||
d="m 87.431133,55.922479 c 2.139553,0.80779 4.23625,1.712895 6.428848,2.376042 1.949311,0.589567 2.366868,0.642217 4.349942,1.080158 0.75152,0.0706 1.499999,0.191693 2.254557,0.211793 2.14084,0.05703 4.3434,-0.231528 6.37173,-0.926143 2.89124,-0.990123 7.08131,-3.810073 8.81047,-4.808416 0.40306,-0.347939 0.83604,-0.663962 1.20917,-1.043816 0.85423,-0.869618 1.65674,-2.039358 1.92196,-3.250633 0.19716,-0.900445 0.069,-1.106769 -0.10036,-1.966683 -0.42953,-0.86166 -1.00362,-1.856564 -1.94475,-2.257529 -0.69682,-0.296878 -1.0437,-0.240404 -1.80312,-0.27721 -1.42186,0.01941 -2.76964,0.373698 -4.06259,0.939031 0,0 -5.58783,4.467153 -5.58783,4.467153 v 0 c 1.2688,-0.704691 2.48446,-1.166507 3.95149,-1.275231 0.61754,-0.02094 0.88375,-0.08689 1.46098,0.08544 0.80935,0.241629 1.38688,0.923888 1.7469,1.650994 0.047,0.24087 0.13494,0.477271 0.14102,0.72261 0.0345,1.394504 -0.95119,2.754879 -1.91622,3.661234 -0.35267,0.33123 -0.75567,0.60442 -1.1335,0.90663 1.36734,-0.762973 2.76887,-1.467664 4.10201,-2.288918 0.55342,-0.340917 -1.1539,0.603601 -1.75754,0.844662 -2.7031,1.079474 -5.63549,1.349658 -8.51195,1.025759 -0.71996,-0.150473 -1.44531,-0.277114 -2.15988,-0.451419 -2.710166,-0.661104 -5.443409,-1.622065 -7.599508,-3.447269 z" />
|
||||
<circle
|
||||
style="fill:none;fill-opacity:1;stroke:currentColor;stroke-width:10;stroke-linecap:square;stroke-dasharray:none"
|
||||
id="front"
|
||||
cx="64.002235"
|
||||
cy="63.99987"
|
||||
r="17.3475" />
|
||||
<path
|
||||
sodipodi:type="spiral"
|
||||
style="fill:none;fill-rule:evenodd;stroke:#ffffff"
|
||||
id="path620"
|
||||
sodipodi:cx="64"
|
||||
sodipodi:cy="64"
|
||||
sodipodi:expansion="1"
|
||||
sodipodi:revolution="3.6033714"
|
||||
sodipodi:radius="17.34763"
|
||||
sodipodi:argument="-17.928261"
|
||||
sodipodi:t0="0"
|
||||
d="m 64,64 c 0.437952,0.576695 -0.561303,0.874872 -0.958505,0.727906 -1.076393,-0.39827 -1.060419,-1.844566 -0.497307,-2.644917 1.007276,-1.431638 3.1006,-1.329249 4.331328,-0.266706 1.806143,1.559324 1.608679,4.374621 0.03611,6.017738 -2.095991,2.190016 -5.655155,1.892782 -7.704149,-0.194492 -2.578451,-2.626622 -2.179336,-6.938822 0.425091,-9.390561 3.15431,-2.969384 8.224259,-2.467312 11.076972,0.655691 3.361823,3.680352 2.756185,9.510802 -0.886291,12.763383 -4.205382,3.755233 -10.798082,3.045655 -14.449793,-1.11689 -4.149307,-4.729747 -3.335542,-12.08588 1.347489,-16.136205 5.253653,-4.543852 13.374056,-3.625731 17.822616,1.578089 4.938745,5.777227 3.916148,14.662515 -1.808688,19.509027 -6.300555,5.333901 -15.951194,4.206739 -21.195438,-2.039287 -5.729262,-6.823693 -4.497465,-17.240045 2.269887,-22.88185 2.856642,-2.381525 6.477653,-3.764558 10.190687,-3.928556" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.8 KiB |
44
test/html/render/table-max-width.html
Normal file
44
test/html/render/table-max-width.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Test table in container with max-width and min-width</title>
|
||||
<style type="text/css">
|
||||
.main {
|
||||
background: lightgreen;
|
||||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
padding: 10px;
|
||||
}
|
||||
.ruler {
|
||||
background: red;
|
||||
width: 500px;
|
||||
height: 20px;
|
||||
padding: 0px;
|
||||
margin: 10px;
|
||||
}
|
||||
table, th, td {
|
||||
padding: 0.25em;
|
||||
background: lightblue;
|
||||
border: solid 1px black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ruler"></div>
|
||||
<div class="main">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th>AAAAAA</th>
|
||||
<th>BBBBBB</th>
|
||||
<th>CCCCCC</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>aaaaaa</td>
|
||||
<td>bbbbbb</td>
|
||||
<td>cccccc</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
test/html/render/table-max-width.ref.html
Normal file
43
test/html/render/table-max-width.ref.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
||||
<title>Test table in container with max-width and min-width</title>
|
||||
<style type="text/css">
|
||||
.main {
|
||||
background: lightgreen;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
}
|
||||
.ruler {
|
||||
background: red;
|
||||
width: 500px;
|
||||
height: 20px;
|
||||
padding: 0px;
|
||||
margin: 10px;
|
||||
}
|
||||
table, th, td {
|
||||
padding: 0.25em;
|
||||
background: lightblue;
|
||||
border: solid 1px black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="ruler"></div>
|
||||
<div class="main">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<th>AAAAAA</th>
|
||||
<th>BBBBBB</th>
|
||||
<th>CCCCCC</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>aaaaaa</td>
|
||||
<td>bbbbbb</td>
|
||||
<td>cccccc</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
19
test/html/render/table-missing-width-in-one-column.html
Normal file
19
test/html/render/table-missing-width-in-one-column.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/REC-html401/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Table with percent width except in one column</title>
|
||||
</head>
|
||||
<body style="width: 400px">
|
||||
<table width="100%" cellspacing=0 cellpadding=0 border=0>
|
||||
<tr>
|
||||
<td style="background:pink" width="25%"></td>
|
||||
<td style="background:lightgreen">
|
||||
This is the middle row, which should measure half the table
|
||||
width.
|
||||
</td>
|
||||
<td style="background:pink" width="25%"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
19
test/html/render/table-missing-width-in-one-column.ref.html
Normal file
19
test/html/render/table-missing-width-in-one-column.ref.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/REC-html401/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Table with percent width except in one column</title>
|
||||
</head>
|
||||
<body style="width: 400px">
|
||||
<table width="400" cellspacing=0 cellpadding=0 border=0>
|
||||
<tr>
|
||||
<td style="background:pink" width="100"></td>
|
||||
<td style="background:lightgreen" width="200">
|
||||
This is the middle row, which should measure half the table
|
||||
width.
|
||||
</td>
|
||||
<td style="background:pink" width="100"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
18
test/html/render/table-td-width-percent-img.html
Normal file
18
test/html/render/table-td-width-percent-img.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td width="128" style="background: lightblue">
|
||||
The next cell is 50%
|
||||
</td>
|
||||
<td width="50%" style="background: lightgreen">
|
||||
<div>
|
||||
<img src="pic.png">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
18
test/html/render/table-td-width-percent-img.ref.html
Normal file
18
test/html/render/table-td-width-percent-img.ref.html
Normal file
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td width="128" style="background: lightblue">
|
||||
The next cell is 50%
|
||||
</td>
|
||||
<td style="background: lightgreen">
|
||||
<div>
|
||||
<img src="pic.png">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
26
test/html/render/table-td-width-percent.html
Normal file
26
test/html/render/table-td-width-percent.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Test relative width column</title>
|
||||
<style type="text/css">
|
||||
body { margin: 0px; padding: 0px }
|
||||
.first { background: lightblue; }
|
||||
.second { background: lightgreen }
|
||||
td, img { margin: 0px; padding: 0px; border: solid 1px black }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td width="300" class="first">
|
||||
The next cell should have a 50% width of the table width.
|
||||
</td>
|
||||
<td width="25%" class="second">
|
||||
This text should use the whole cell width, but for some reason is not
|
||||
doing it?
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
26
test/html/render/table-td-width-percent.ref.html
Normal file
26
test/html/render/table-td-width-percent.ref.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Test relative width column</title>
|
||||
<style type="text/css">
|
||||
body { margin: 0px; padding: 0px }
|
||||
.first { background: lightblue; }
|
||||
.second { background: lightgreen }
|
||||
td, img { margin: 0px; padding: 0px; border: solid 1px black }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td width="300" class="first">
|
||||
The next cell should have a 50% width of the table width.
|
||||
</td>
|
||||
<td width="100" class="second">
|
||||
This text should use the whole cell width, but for some reason is not
|
||||
doing it?
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
35
test/html/render/table-thead-tfoot-open-tag.html
Normal file
35
test/html/render/table-thead-tfoot-open-tag.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test thead, tbody and tfoot</title>
|
||||
<style>
|
||||
thead {color: green;}
|
||||
tbody {color: blue;}
|
||||
tfoot {color: red;}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
<th>Savings
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>January
|
||||
<td>$100
|
||||
<tr>
|
||||
<td>February
|
||||
<td>$80
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Sum
|
||||
<td>$180
|
||||
</tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
35
test/html/render/table-thead-tfoot-open-tag.ref.html
Normal file
35
test/html/render/table-thead-tfoot-open-tag.ref.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test thead, tbody and tfoot</title>
|
||||
<style>
|
||||
.head {color: green; font-weight: bold; align: center; }
|
||||
.body {color: blue;}
|
||||
.foot {color: red;}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr class="head">
|
||||
<th>Month</th>
|
||||
<th>Savings</th>
|
||||
</tr>
|
||||
<tr class="body">
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
</tr>
|
||||
<tr class="body">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="foot">
|
||||
<td>Sum</td>
|
||||
<td>$180</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
41
test/html/render/table-thead-tfoot.html
Normal file
41
test/html/render/table-thead-tfoot.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test thead, tbody and tfoot</title>
|
||||
<style>
|
||||
thead {color: green;}
|
||||
tbody {color: blue;}
|
||||
tfoot {color: red;}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
<th>Savings</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Sum</td>
|
||||
<td>$180</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
35
test/html/render/table-thead-tfoot.ref.html
Normal file
35
test/html/render/table-thead-tfoot.ref.html
Normal file
@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Test thead, tbody and tfoot</title>
|
||||
<style>
|
||||
.head {color: green; font-weight: bold; align: center; }
|
||||
.body {color: blue;}
|
||||
.foot {color: red;}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr class="head">
|
||||
<th>Month</th>
|
||||
<th>Savings</th>
|
||||
</tr>
|
||||
<tr class="body">
|
||||
<td>January</td>
|
||||
<td>$100</td>
|
||||
</tr>
|
||||
<tr class="body">
|
||||
<td>February</td>
|
||||
<td>$80</td>
|
||||
</tr>
|
||||
<tr class="foot">
|
||||
<td>Sum</td>
|
||||
<td>$180</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
24
test/html/render/white-space.html
Normal file
24
test/html/render/white-space.html
Normal file
@ -0,0 +1,24 @@
|
||||
<h1>nowrap</h1>
|
||||
<div style="white-space: nowrap">
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
|
||||
<h1>pre</h1>
|
||||
|
||||
<div style="white-space: pre">
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
|
||||
<h1>pre-wrap</h1>
|
||||
<div style="white-space: pre-wrap">
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
|
||||
<h1>pre-line</h1>
|
||||
<div style="white-space: pre-line">
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
24
test/html/render/white-space.ref.html
Normal file
24
test/html/render/white-space.ref.html
Normal file
@ -0,0 +1,24 @@
|
||||
<h1>nowrap</h1>
|
||||
<div style="white-space: pre">
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
|
||||
<h1>pre</h1>
|
||||
|
||||
<div style="white-space: pre">
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
|
||||
<h1>pre-wrap</h1>
|
||||
<div style="white-space: pre">
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
|
||||
<h1>pre-line</h1>
|
||||
<div style="white-space: pre">
|
||||
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
hallo dillo hallo dillo hallo dillo hallo dillo
|
||||
</div>
|
||||
Reference in New Issue
Block a user