mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
formatted tests into smaller units
This commit is contained in:
Niklas von Hertzen
parent
c9ed8d91fa
commit
4e978c60cc
@ -1,76 +0,0 @@
|
|||||||
(function() {
|
|
||||||
/* options, customize to your needs */
|
|
||||||
var server = '//html2canvas.hertzen.com/js',
|
|
||||||
proxy = '//html2canvas.appspot.com',
|
|
||||||
debug = false,
|
|
||||||
profile = false;
|
|
||||||
//DEBUG: server = 'http://localhost/html2canvas'; debug = true;
|
|
||||||
var debugFiles = [
|
|
||||||
'external/jquery-1.6.2.min',
|
|
||||||
'src/Core',
|
|
||||||
'src/Generate',
|
|
||||||
'src/Parse',
|
|
||||||
'src/Preload',
|
|
||||||
'src/Queue',
|
|
||||||
'src/Renderer',
|
|
||||||
'src/Util',
|
|
||||||
'src/renderers/Canvas',
|
|
||||||
'src/plugins/jquery.plugin.html2canvas'
|
|
||||||
],
|
|
||||||
relFiles = [
|
|
||||||
'//code.jquery.com/jquery-1.6.4.js',
|
|
||||||
'html2canvas',
|
|
||||||
'jquery.plugin.html2canvas'
|
|
||||||
];
|
|
||||||
var loader = {
|
|
||||||
index: 0,
|
|
||||||
head: document.getElementsByTagName('head')[0],
|
|
||||||
statusline: document.createElement('div'),
|
|
||||||
files: (debug ? debugFiles : relFiles),
|
|
||||||
onload: function () {
|
|
||||||
var _ = this;
|
|
||||||
if (_.index < _.files.length) {
|
|
||||||
var el = document.createElement('script');
|
|
||||||
el.type = 'text/javascript';
|
|
||||||
el.onload = function() {
|
|
||||||
_.onload();
|
|
||||||
};
|
|
||||||
el.onerror = function() {
|
|
||||||
_.statusline.style.color = 'red';
|
|
||||||
_.statusline.innerHTML = _.statusline.innerHTML + ' failed';
|
|
||||||
_.statusline.onclick = function() {
|
|
||||||
_.statusline.parentNode.removeChild(_.statusline);
|
|
||||||
};
|
|
||||||
};
|
|
||||||
if (_.files[_.index].substr(0, 2) === '//') {
|
|
||||||
el.src = _.files[_.index];
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
el.src = server + '/' + _.files[_.index] + '.js';
|
|
||||||
}
|
|
||||||
_.head.appendChild(el);
|
|
||||||
++_.index;
|
|
||||||
_.statusline.innerHTML = 'html2canvas: loading "' + el.src + '" ' + _.index + ' / ' + _.files.length + '...';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
_.statusline.parentNode.removeChild(_.statusline);
|
|
||||||
delete _.statusline;
|
|
||||||
$(document.documentElement).html2canvas({
|
|
||||||
logging: debug,
|
|
||||||
profile: profile,
|
|
||||||
proxy: proxy
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, statusline = loader.statusline;
|
|
||||||
statusline.style.position = 'fixed';
|
|
||||||
statusline.style.bottom = '0px';
|
|
||||||
statusline.style.right = '20px';
|
|
||||||
statusline.style.backgroundColor = 'white';
|
|
||||||
statusline.style.border = '1px solid black';
|
|
||||||
statusline.style.borderBottomWidth = '0px';
|
|
||||||
statusline.style.padding = '2px 5px';
|
|
||||||
statusline.style.zIndex = 9999999;
|
|
||||||
document.body.appendChild(statusline);
|
|
||||||
loader.onload();
|
|
||||||
}());
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
52
tests/cases/background/encoded.html
Normal file
52
tests/cases/background/encoded.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Background attribute tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
|
.small div{
|
||||||
|
width:100px;
|
||||||
|
height:100px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium div{
|
||||||
|
width:200px;
|
||||||
|
height:200px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small, .medium{
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
|
||||||
|
div{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.encoded {
|
||||||
|
background:url("data:image/jpeg;base64,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");
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="medium">
|
||||||
|
<div class="encoded"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
105
tests/cases/background/linear-gradient.html
Normal file
105
tests/cases/background/linear-gradient.html
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Background attribute tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
|
.small div{
|
||||||
|
width:100px;
|
||||||
|
height:100px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium div{
|
||||||
|
width:200px;
|
||||||
|
height:200px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small, .medium{
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
|
||||||
|
div{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linearGradient {
|
||||||
|
/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 0, 0)), to(rgb(0, 0, 255)));*/
|
||||||
|
background: -webkit-linear-gradient(top left, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
|
||||||
|
background: -moz-linear-gradient(top right, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
.linearGradient2 {
|
||||||
|
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
|
||||||
|
}
|
||||||
|
|
||||||
|
.linearGradient3 {
|
||||||
|
/* FF 3.6+ */
|
||||||
|
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* Chrome,Safari4+ */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
|
||||||
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
|
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* IE 10+ */
|
||||||
|
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
/* W3C */
|
||||||
|
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linearGradient4 {
|
||||||
|
/* FF 3.6+ */
|
||||||
|
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* Chrome, Safari 4+ */
|
||||||
|
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
|
||||||
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
|
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* IE10+ */
|
||||||
|
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
/* W3C */
|
||||||
|
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.linearGradient5 {
|
||||||
|
/* FF 3.6+ */
|
||||||
|
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* Chrome, Safari 4+ */
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
|
||||||
|
/* Chrome 10+, Safari 5.1+ */
|
||||||
|
background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* Opera 11.10+ */
|
||||||
|
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* IE 10+ */
|
||||||
|
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
/* W3C */
|
||||||
|
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="medium">
|
||||||
|
<div class="linearGradient"> </div>
|
||||||
|
<div class="linearGradient2"> </div>
|
||||||
|
<div class="linearGradient3"> </div>
|
||||||
|
<div class="linearGradient4"> </div>
|
||||||
|
<div class="linearGradient5"> </div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
tests/cases/background/multi.html
Normal file
50
tests/cases/background/multi.html
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Background attribute tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
|
.small div{
|
||||||
|
width:100px;
|
||||||
|
height:100px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium div{
|
||||||
|
width:200px;
|
||||||
|
height:200px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small, .medium{
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
|
||||||
|
div{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="medium">
|
||||||
|
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 130px;"></div>
|
||||||
|
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 20px -20px;"></div>
|
||||||
|
<div style="background-image:url(../../assets/image.jpg), url(../../assets/image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 450px 100px;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
66
tests/cases/background/position.html
Normal file
66
tests/cases/background/position.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Background attribute tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
|
.small div{
|
||||||
|
width:100px;
|
||||||
|
height:100px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium div{
|
||||||
|
width:200px;
|
||||||
|
height:200px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small, .medium{
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
|
||||||
|
div{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="medium">
|
||||||
|
<div style="background:url(../../assets/image.jpg) center center;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-x center center;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="small">
|
||||||
|
<div style="background:url(../../assets/image.jpg) center center;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-x center center;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="medium">
|
||||||
|
<div style="background:url(../../assets/image.jpg) -15% 25px;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-x 50px 50px;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-y 50px 50px;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) no-repeat 50px 50px;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Background attribute tests</title>
|
<title>Background attribute tests</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
<script type="text/javascript" src="test.js"></script>
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
<style>
|
<style>
|
||||||
html {
|
html {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
@ -35,66 +35,6 @@
|
|||||||
display:block;
|
display:block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.encoded {
|
|
||||||
background:url("data:image/jpeg;base64,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");
|
|
||||||
background-position: center center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.linearGradient {
|
|
||||||
/*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 0, 0)), to(rgb(0, 0, 255)));*/
|
|
||||||
background: -webkit-linear-gradient(top left, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
|
|
||||||
background: -moz-linear-gradient(top right, #f00, #00f, #BADA55, rgba(0, 0, 255,0.5));
|
|
||||||
}
|
|
||||||
|
|
||||||
.linearGradient2 {
|
|
||||||
background: -webkit-gradient(linear, 0% 0, 0% 100%, from(rgb(252, 252, 252)), to(rgb(232, 232, 232)));
|
|
||||||
}
|
|
||||||
|
|
||||||
.linearGradient3 {
|
|
||||||
/* FF 3.6+ */
|
|
||||||
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
|
||||||
/* Chrome,Safari4+ */
|
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
|
|
||||||
/* Chrome 10+, Safari 5.1+ */
|
|
||||||
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
|
||||||
/* Opera 11.10+ */
|
|
||||||
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
|
||||||
/* IE 10+ */
|
|
||||||
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
|
||||||
/* W3C */
|
|
||||||
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
|
|
||||||
}
|
|
||||||
|
|
||||||
.linearGradient4 {
|
|
||||||
/* FF 3.6+ */
|
|
||||||
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
|
||||||
/* Chrome, Safari 4+ */
|
|
||||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
|
|
||||||
/* Chrome 10+, Safari 5.1+ */
|
|
||||||
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
|
||||||
/* Opera 11.10+ */
|
|
||||||
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
|
||||||
/* IE10+ */
|
|
||||||
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
|
||||||
/* W3C */
|
|
||||||
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.linearGradient5 {
|
|
||||||
/* FF 3.6+ */
|
|
||||||
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
|
||||||
/* Chrome, Safari 4+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
|
|
||||||
/* Chrome 10+, Safari 5.1+ */
|
|
||||||
background: -webkit-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
|
||||||
/* Opera 11.10+ */
|
|
||||||
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
|
||||||
/* IE 10+ */
|
|
||||||
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
|
||||||
/* W3C */
|
|
||||||
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.radialGradient {
|
.radialGradient {
|
||||||
/* FF 3.6+ */
|
/* FF 3.6+ */
|
||||||
background: -moz-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%, #2f7bd8 50%, #0a0a0a 64%, #4e4e4e 80%, #383838 87%, #1b1b1b 100%);
|
background: -moz-radial-gradient(center, ellipse cover, #959595 0%, #0d0d0d 48%, #2f7bd8 50%, #0a0a0a 64%, #4e4e4e 80%, #383838 87%, #1b1b1b 100%);
|
||||||
@ -203,13 +143,6 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="medium">
|
|
||||||
<div class="linearGradient"> </div>
|
|
||||||
<div class="linearGradient2"> </div>
|
|
||||||
<div class="linearGradient3"> </div>
|
|
||||||
<div class="linearGradient4"> </div>
|
|
||||||
<div class="linearGradient5"> </div>
|
|
||||||
</div>
|
|
||||||
<div class="medium">
|
<div class="medium">
|
||||||
<div class="radialGradient"> </div>
|
<div class="radialGradient"> </div>
|
||||||
<div class="radialGradient2"> </div>
|
<div class="radialGradient2"> </div>
|
||||||
@ -224,50 +157,5 @@
|
|||||||
<div class="radialGradient11"> </div>
|
<div class="radialGradient11"> </div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="medium">
|
|
||||||
<div style="background:url(image.jpg);"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-x;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-y;"></div>
|
|
||||||
<div style="background:url(image.jpg) no-repeat;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="small">
|
|
||||||
<div style="background:url(image.jpg);"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-x;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-y;"></div>
|
|
||||||
<div style="background:url(image.jpg) no-repeat;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="medium">
|
|
||||||
<div style="background:url(image.jpg) center center;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-x center center;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-y center center;"></div>
|
|
||||||
<div style="background:url(image.jpg) no-repeat center center;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="small">
|
|
||||||
<div style="background:url(image.jpg) center center;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-x center center;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-y center center;"></div>
|
|
||||||
<div style="background:url(image.jpg) no-repeat center center;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="medium">
|
|
||||||
<div style="background:url(image.jpg) 50px 50px;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-x 50px 50px;"></div>
|
|
||||||
<div style="background:url(image.jpg) repeat-y 50px 50px;"></div>
|
|
||||||
<div style="background:url(image.jpg) no-repeat 50px 50px;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="medium">
|
|
||||||
<div style="background:url(image.jpg) no-repeat -15% 25px;"></div>
|
|
||||||
<div style="background-image:url(image.jpg), url(image2.jpg); background-repeat: repeat-x; background-position: 50px 50px, 100px 100px;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="medium">
|
|
||||||
<div class="encoded"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
57
tests/cases/background/repeat.html
Normal file
57
tests/cases/background/repeat.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Background attribute tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: lime;
|
||||||
|
}
|
||||||
|
.small div{
|
||||||
|
width:100px;
|
||||||
|
height:100px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium div{
|
||||||
|
width:200px;
|
||||||
|
height:200px;
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
border:1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small, .medium{
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
|
||||||
|
div{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="medium">
|
||||||
|
<div style="background:url(../../assets/image.jpg);"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="small">
|
||||||
|
<div style="background:url(../../assets/image.jpg);"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-x;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) repeat-y;"></div>
|
||||||
|
<div style="background:url(../../assets/image.jpg) no-repeat;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
tests/cases/images/canvas.html
Normal file
27
tests/cases/images/canvas.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Image tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function setUp() {
|
||||||
|
if ($('#testcanvas')[0].getContext) {
|
||||||
|
var ctx = $('#testcanvas')[0].getContext('2d');
|
||||||
|
|
||||||
|
ctx.fillStyle = "rgb(200,0,0)";
|
||||||
|
ctx.fillRect (10, 10, 55, 50);
|
||||||
|
|
||||||
|
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
|
||||||
|
ctx.fillRect (30, 30, 55, 50);
|
||||||
|
} else {
|
||||||
|
$('#testcanvas').remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id="testcanvas" style="width:700px;height:300px;"></canvas>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -3,19 +3,19 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>External content tests</title>
|
<title>External content tests</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
<script type="text/javascript" src="test.js"></script>
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
|
||||||
<base href="http://www.google.com/" />
|
<base href="http://www.google.com/" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>External image</h1>
|
<h1>External image</h1>
|
||||||
<img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
|
<img src="http://www.google.com/logos/2011/gregormendel11-hp.jpg" style="border:5px solid black;" />
|
||||||
|
|
||||||
<h1>External image (using <base> href)</h1>
|
<h1>External image (using <base> href)</h1>
|
||||||
<img src="/logos/2011/gregormendel11-res.jpg" />
|
<img src="/logos/2011/gregormendel11-res.jpg" />
|
||||||
|
|
||||||
<h1>External image (CORS)</h1>
|
<h1>External image (CORS)</h1>
|
||||||
<img src="http://publishmydata.com/assets/home/blue_bg.png" />
|
<img src="http://publishmydata.com/assets/home/blue_bg.png" />
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
13
tests/cases/images/empty.html
Normal file
13
tests/cases/images/empty.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Image tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
Image without src attribute, should not crash:
|
||||||
|
<img style="width:50px;height:50px;border:1px solid red;display:block;" />
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
tests/cases/images/images.html
Normal file
26
tests/cases/images/images.html
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Image tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="../../assets/image.jpg" />
|
||||||
|
<img src="../../assets/image.jpg" style="width:50px;height:400px;" />
|
||||||
|
<img src="../../assets/image.jpg" style="width:500px;" />
|
||||||
|
<img src="../../assets/image.jpg" style="width:500px;height:40px;" />
|
||||||
|
|
||||||
|
|
||||||
|
<img src="../../assets/image.jpg" style="padding:20px;border:5px solid black;" />
|
||||||
|
|
||||||
|
<img src="../../assets/image.jpg" style="padding-bottom:20px;border-top:5px solid black;clear:both;" />
|
||||||
|
|
||||||
|
|
||||||
|
<img src="../../assets/image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;" />
|
||||||
|
<img src="../../assets/image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;height:25px;" />
|
||||||
|
|
||||||
|
<img src="../../assets/image.jpg" style="width:0px;height:0px;border:1px solid black" />
|
||||||
|
<img src="../../assets/image.jpg" style="width:0px;height:0px;" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
tests/cases/images/svg.html
Normal file
12
tests/cases/images/svg.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Image tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
SVG taints image:<br /> <!-- http://fi.wikipedia.org/wiki/Tiedosto:Svg.svg -->
|
||||||
|
<img src="../../assets/image.svg" />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
tests/cases/list/decimal-leading-zero.html
Normal file
57
tests/cases/list/decimal-leading-zero.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>List tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function setUp() {
|
||||||
|
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||||
|
for (var i = 1;i<=100;i++){
|
||||||
|
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[1]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#dynamic{
|
||||||
|
list-style-type:decimal;
|
||||||
|
list-style-position: inside;
|
||||||
|
font-size:20px;
|
||||||
|
line-height:50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.small{
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium{
|
||||||
|
font-size:18px;
|
||||||
|
}
|
||||||
|
.large{
|
||||||
|
font-size:24px;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
border:1px solid black;
|
||||||
|
width:100px;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
ol{
|
||||||
|
margin:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<ol id="dynamic"></ol>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
tests/cases/list/decimal.html
Normal file
59
tests/cases/list/decimal.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>List tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function setUp() {
|
||||||
|
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||||
|
for (var i = 1;i<=100;i++){
|
||||||
|
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[0]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#dynamic{
|
||||||
|
list-style-type:decimal;
|
||||||
|
list-style-position: inside;
|
||||||
|
font-size:20px;
|
||||||
|
line-height:50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.small{
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium{
|
||||||
|
font-size:18px;
|
||||||
|
}
|
||||||
|
.large{
|
||||||
|
font-size:24px;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
border:1px solid black;
|
||||||
|
width:100px;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
ol{
|
||||||
|
margin:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<ol id="dynamic"></ol>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
tests/cases/list/lower-alpha.html
Normal file
59
tests/cases/list/lower-alpha.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>List tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function setUp() {
|
||||||
|
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||||
|
for (var i = 1;i<=100;i++){
|
||||||
|
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[4]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#dynamic{
|
||||||
|
list-style-type:decimal;
|
||||||
|
list-style-position: inside;
|
||||||
|
font-size:20px;
|
||||||
|
line-height:50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.small{
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium{
|
||||||
|
font-size:18px;
|
||||||
|
}
|
||||||
|
.large{
|
||||||
|
font-size:24px;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
border:1px solid black;
|
||||||
|
width:100px;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
ol{
|
||||||
|
margin:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<ol id="dynamic"></ol>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
59
tests/cases/list/upper-roman.html
Normal file
59
tests/cases/list/upper-roman.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>List tests</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function setUp() {
|
||||||
|
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
||||||
|
for (var i = 1;i<=100;i++){
|
||||||
|
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[2]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#dynamic{
|
||||||
|
list-style-type:decimal;
|
||||||
|
list-style-position: inside;
|
||||||
|
font-size:20px;
|
||||||
|
line-height:50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.small{
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.medium{
|
||||||
|
font-size:18px;
|
||||||
|
}
|
||||||
|
.large{
|
||||||
|
font-size:24px;
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
border:1px solid black;
|
||||||
|
width:100px;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
ol{
|
||||||
|
margin:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<ol id="dynamic"></ol>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -3,8 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>Overflow tests</title>
|
<title>Overflow tests</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
<script type="text/javascript" src="../test.js"></script>
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
.small{
|
.small{
|
||||||
font-size:14px;
|
font-size:14px;
|
||||||
@ -29,22 +28,22 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Overflow: visible</h1>
|
<h1>Overflow: visible</h1>
|
||||||
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
|
<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>Overflow: hidden</h1>
|
<h1>Overflow: hidden</h1>
|
||||||
<div style="overflow:hidden;">
|
<div style="overflow:hidden;">
|
||||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
|
||||||
|
|
||||||
with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
|
with the release of <div style="border-width:10px 0 5px 0;background:green;">a</div>Letraset sheets containing Lorem Ipsum passages, <img src="image.jpg" /> and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
|
||||||
|
|
||||||
|
|
||||||
<div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />
|
<div style="overflow:visible;position:relative;"><u>position:relative within a overflow:hidden element</u><br /> <br />
|
||||||
|
|
||||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like <b>Aldus PageMaker</b> including versions of Lorem Ipsum.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1,16 +1,9 @@
|
|||||||
<!--
|
|
||||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
|
||||||
* @created 16.7.2011
|
|
||||||
* @website http://hertzen.com
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Text tests</title>
|
<title>Text tests</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
.small{
|
.small{
|
||||||
font-size:14px;
|
font-size:14px;
|
||||||
@ -39,20 +32,20 @@
|
|||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
<ol class="medium">
|
<ol class="medium">
|
||||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
<ol class="large">
|
<ol class="large">
|
||||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="font-family:Verdana;">
|
<div style="font-family:Verdana;">
|
||||||
@ -62,20 +55,20 @@
|
|||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
<ol class="medium">
|
<ol class="medium">
|
||||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
<ol class="large">
|
<ol class="large">
|
||||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="font-family:Tahoma;">
|
<div style="font-family:Tahoma;">
|
||||||
@ -85,20 +78,20 @@
|
|||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
<ol class="medium">
|
<ol class="medium">
|
||||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
<ol class="large">
|
<ol class="large">
|
||||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2><h2> text-transform</h2>
|
<h2><h2> text-transform</h2>
|
||||||
@ -1,25 +1,18 @@
|
|||||||
<!--
|
|
||||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
|
||||||
* @created 16.7.2011
|
|
||||||
* @website http://hertzen.com
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Text-decoration:underline tests</title>
|
<title>Text-decoration:underline tests</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
function setUp() {
|
function setUp() {
|
||||||
$('body').empty();
|
$('body').empty();
|
||||||
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
||||||
var div = $('<div />').css('font-family',e).appendTo('body');
|
var div = $('<div />').css('font-family',e).appendTo('body');
|
||||||
for(var i=0;i<=20;i++){
|
for(var i=0;i<=10;i++){
|
||||||
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
|
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -49,7 +42,7 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
Creating content through JavaScript
|
Creating content through JavaScript
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,16 +1,9 @@
|
|||||||
<!--
|
|
||||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
|
||||||
* @created 16.7.2011
|
|
||||||
* @website http://hertzen.com
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Visible elements tests</title>
|
<title>Visible elements tests</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
<script type="text/javascript" src="../test.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
div{
|
div{
|
||||||
border:2px solid black;
|
border:2px solid black;
|
||||||
@ -18,7 +11,7 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Display:none and visible:hidden tests</h1>
|
<h1>Display:none and visible:hidden tests</h1>
|
||||||
<div>This should be visible </div>
|
<div>This should be visible </div>
|
||||||
<div style="display:none">display:none, This should be <b>hidden</b></div>
|
<div style="display:none">display:none, This should be <b>hidden</b></div>
|
||||||
@ -26,6 +19,6 @@
|
|||||||
<hr />
|
<hr />
|
||||||
<div style="display:none">display:none, This should be <b>hidden</b></div>
|
<div style="display:none">display:none, This should be <b>hidden</b></div>
|
||||||
<div style="visibility:hidden">visibility:hidden, This should be <b>hidden</b></div>
|
<div style="visibility:hidden">visibility:hidden, This should be <b>hidden</b></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
81
tests/cases/zindex/z-index1.html
Normal file
81
tests/cases/zindex/z-index1.html
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>z-index tests #1</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
div { font: 12px Arial; }
|
||||||
|
|
||||||
|
span.bold { font-weight: bold; }
|
||||||
|
|
||||||
|
#div1,#div3 {
|
||||||
|
height: 80px;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #669966;
|
||||||
|
background-color: #ccffcc;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div2 {
|
||||||
|
opacity: 0.8;
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 200px;
|
||||||
|
top: 20px;
|
||||||
|
left: 170px;
|
||||||
|
border: 1px solid #990000;
|
||||||
|
background-color: #ffdddd;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div4 {
|
||||||
|
opacity: 0.8;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
width: 200px;
|
||||||
|
height: 70px;
|
||||||
|
top: 65px;
|
||||||
|
left: 50px;
|
||||||
|
border: 1px solid #000099;
|
||||||
|
background-color: #ddddff;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<br />
|
||||||
|
|
||||||
|
No z-indexed content
|
||||||
|
<div id="div1">
|
||||||
|
<br /><span class="bold">DIV #1</span>
|
||||||
|
<br />position: relative;
|
||||||
|
<div id="div2">
|
||||||
|
<br /><span class="bold">DIV #2</span>
|
||||||
|
<br />position: absolute;
|
||||||
|
<br />z-index: 1;
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div id="div3">
|
||||||
|
<br /><span class="bold">DIV #3</span>
|
||||||
|
<br />position: relative;
|
||||||
|
<div id="div4">
|
||||||
|
<br /><span class="bold">DIV #4</span>
|
||||||
|
<br />position: absolute;
|
||||||
|
<br />z-index: 2;
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
Some more non-zindexed content
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
103
tests/cases/zindex/z-index2.html
Normal file
103
tests/cases/zindex/z-index2.html
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>z-index tests #2</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
div { font: 12px Arial; }
|
||||||
|
|
||||||
|
span.bold { font-weight: bold; }
|
||||||
|
|
||||||
|
#div2 { z-index: 2; }
|
||||||
|
#div3 { z-index: 1; }
|
||||||
|
#div4 { z-index: 10; }
|
||||||
|
|
||||||
|
#div1,#div3 {
|
||||||
|
height: 80px;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #669966;
|
||||||
|
background-color: #ccffcc;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div2 {
|
||||||
|
opacity: 0.8;
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 200px;
|
||||||
|
top: 20px;
|
||||||
|
left: 170px;
|
||||||
|
border: 1px solid #990000;
|
||||||
|
background-color: #ffdddd;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div4 {
|
||||||
|
opacity: 0.8;
|
||||||
|
position: absolute;
|
||||||
|
width: 200px;
|
||||||
|
height: 70px;
|
||||||
|
top: 65px;
|
||||||
|
left: 50px;
|
||||||
|
border: 1px solid #000099;
|
||||||
|
background-color: #ddddff;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div5{
|
||||||
|
border: 1px solid #669966;
|
||||||
|
background-color: #ccffcc;
|
||||||
|
padding-left: 5px;
|
||||||
|
position:relative;
|
||||||
|
margin-bottom:-15px;
|
||||||
|
height:50px;
|
||||||
|
margin-top:10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#div6{
|
||||||
|
border: 1px solid #000099;
|
||||||
|
background-color: #ddddff;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style></head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div id="div1">
|
||||||
|
<br /><span class="bold">DIV #1</span>
|
||||||
|
<br />position: relative;
|
||||||
|
<div id="div2">
|
||||||
|
<br /><span class="bold">DIV #2</span>
|
||||||
|
<br />position: absolute;
|
||||||
|
<br />z-index: 2;
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div id="div3">
|
||||||
|
<br /><span class="bold">DIV #3</span>
|
||||||
|
<br />position: relative;
|
||||||
|
<br />z-index: 1;
|
||||||
|
<div id="div4">
|
||||||
|
<br /><span class="bold">DIV #4</span>
|
||||||
|
<br />position: absolute;
|
||||||
|
<br />z-index: 10;
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="div5"><br />DIV #5<br />position:relative;<br /></div>
|
||||||
|
|
||||||
|
<div id ="div6"><br />DIV #6<br />position:static;<br /></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
109
tests/cases/zindex/z-index3.html
Normal file
109
tests/cases/zindex/z-index3.html
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>z-index tests #3</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
div { font: 12px Arial; }
|
||||||
|
|
||||||
|
span.bold { font-weight: bold; }
|
||||||
|
|
||||||
|
div.lev1 {
|
||||||
|
width: 250px;
|
||||||
|
height: 70px;
|
||||||
|
position: relative;
|
||||||
|
border: 2px solid #669966;
|
||||||
|
background-color: #ccffcc;
|
||||||
|
padding-left: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#container1 {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.lev2 {
|
||||||
|
opacity: 0.9;
|
||||||
|
width: 200px;
|
||||||
|
height: 60px;
|
||||||
|
position: relative;
|
||||||
|
border: 2px solid #990000;
|
||||||
|
background-color: #ffdddd;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container2 {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.lev3 {
|
||||||
|
z-index: 10;
|
||||||
|
width: 100px;
|
||||||
|
position: relative;
|
||||||
|
border: 2px outset #000099;
|
||||||
|
background-color: #ddddff;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style></head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
<div class="lev1">
|
||||||
|
<span class="bold">LEVEL #1</span>
|
||||||
|
|
||||||
|
<div id="container1">
|
||||||
|
|
||||||
|
<div class="lev2">
|
||||||
|
<br /><span class="bold">LEVEL #2</span>
|
||||||
|
<br />z-index: 1;
|
||||||
|
|
||||||
|
<div id="container2">
|
||||||
|
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lev2">
|
||||||
|
<br /><span class="bold">LEVEL #2</span>
|
||||||
|
<br />z-index: 1;
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lev1" style="position:static">
|
||||||
|
<span class="bold">LEVEL #1</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lev1">
|
||||||
|
<span class="bold">LEVEL #1</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lev1">
|
||||||
|
<span class="bold">LEVEL #1</span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>External content tests</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
|
||||||
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Iframe</h1>
|
|
||||||
<iframe src="http://www.google.com" style="width:400px;height:300px;border:5px solid black;"></iframe>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Image tests</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
|
||||||
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
function setUp() {
|
|
||||||
if ($('#testcanvas')[0].getContext) {
|
|
||||||
var ctx = $('#testcanvas')[0].getContext('2d');
|
|
||||||
|
|
||||||
ctx.fillStyle = "rgb(200,0,0)";
|
|
||||||
ctx.fillRect (10, 10, 55, 50);
|
|
||||||
|
|
||||||
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
|
|
||||||
ctx.fillRect (30, 30, 55, 50);
|
|
||||||
} else {
|
|
||||||
$('#testcanvas').remove();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.small{
|
|
||||||
font-size:14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.medium{
|
|
||||||
font-size:18px;
|
|
||||||
}
|
|
||||||
.large{
|
|
||||||
font-size:24px;
|
|
||||||
}
|
|
||||||
div{
|
|
||||||
float:left;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
clear:both;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<img src="image.jpg" />
|
|
||||||
<img src="image.jpg" style="width:50px;height:400px;" />
|
|
||||||
<img src="image.jpg" style="width:500px;" />
|
|
||||||
<img src="image.jpg" style="width:500px;height:40px;" />
|
|
||||||
|
|
||||||
|
|
||||||
<img src="image.jpg" style="padding:20px;border:5px solid black;" />
|
|
||||||
|
|
||||||
<img src="image.jpg" style="padding-bottom:20px;border-top:5px solid black;clear:both;" />
|
|
||||||
|
|
||||||
|
|
||||||
<img src="image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;" />
|
|
||||||
<img src="image.jpg" style="padding-top:20px;border-top:5px solid black;clear:both;width:50px;height:25px;" />
|
|
||||||
|
|
||||||
<img src="image.jpg" style="width:0px;height:0px;border:1px solid black" />
|
|
||||||
<img src="image.jpg" style="width:0px;height:0px;" />
|
|
||||||
|
|
||||||
<canvas id="testcanvas" style="width:100px;height:100px;"></canvas>
|
|
||||||
<br />
|
|
||||||
Image without src attribute, should not crash:
|
|
||||||
<img style="width:50px;height:50px;border:1px solid red;display:block;" />
|
|
||||||
|
|
||||||
SVG taints image:<br /> <!-- http://fi.wikipedia.org/wiki/Tiedosto:Svg.svg -->
|
|
||||||
<img src="image.svg" />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
|
||||||
* @created 16.7.2011
|
|
||||||
* @website http://hertzen.com
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>List tests</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
function setUp() {
|
|
||||||
var supportedTypes = ["decimal","decimal-leading-zero","upper-roman","lower-roman","lower-alpha","upper-alpha"];
|
|
||||||
for (var i = 1;i<=100;i++){
|
|
||||||
$('#dynamic').append($('<li />').text(i).css('list-style-type',supportedTypes[Math.round(Math.random()*supportedTypes.length)]));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#dynamic{
|
|
||||||
list-style-type:decimal;
|
|
||||||
list-style-position: inside;
|
|
||||||
font-size:20px;
|
|
||||||
line-height:50px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.small{
|
|
||||||
font-size:14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.medium{
|
|
||||||
font-size:18px;
|
|
||||||
}
|
|
||||||
.large{
|
|
||||||
font-size:24px;
|
|
||||||
}
|
|
||||||
div{
|
|
||||||
float:left;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
clear:both;
|
|
||||||
}
|
|
||||||
li{
|
|
||||||
border:1px solid black;
|
|
||||||
width:100px;
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
ol{
|
|
||||||
margin:0;
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<ul>
|
|
||||||
<li>First</li>
|
|
||||||
<li style="list-style-position:inside; ">Second</li>
|
|
||||||
<li>Third</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<ol>
|
|
||||||
<li>First</li>
|
|
||||||
<li style="list-style-position:inside; ">Second<br />new line</li>
|
|
||||||
<li style="list-style-position:inside; "></li>
|
|
||||||
<li style="list-style-position:outside;">Third</li>
|
|
||||||
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<ol id="dynamic">
|
|
||||||
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,182 +0,0 @@
|
|||||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
function setUp(){
|
|
||||||
h2cSelector = '#bar';
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<title>
|
|
||||||
display/box/float/clear test
|
|
||||||
</title>
|
|
||||||
<style type="text/css">
|
|
||||||
/* last modified: 1 Dec 98 */
|
|
||||||
|
|
||||||
html {
|
|
||||||
font: 10px/1 Verdana, sans-serif;
|
|
||||||
background-color: blue;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 1.5em;
|
|
||||||
border: .5em solid black;
|
|
||||||
padding: 0;
|
|
||||||
width: 48em;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl {
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
padding: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
background-color: rgb(204,0,0);
|
|
||||||
margin: 0;
|
|
||||||
padding: 1em;
|
|
||||||
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
|
|
||||||
height: 28em;
|
|
||||||
border: .5em solid black;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
float: right;
|
|
||||||
margin: 0 0 0 1em;
|
|
||||||
border: 1em solid black;
|
|
||||||
padding: 1em;
|
|
||||||
width: 34em;
|
|
||||||
height: 27em;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: block; /* i.e., suppress marker */
|
|
||||||
color: black;
|
|
||||||
height: 9em;
|
|
||||||
width: 5em;
|
|
||||||
margin: 0;
|
|
||||||
border: .5em solid black;
|
|
||||||
padding: 1em;
|
|
||||||
float: left;
|
|
||||||
background-color: #FC0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bar {
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
width: 41.17%; /* = 14em */
|
|
||||||
border: 0;
|
|
||||||
margin: 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#baz {
|
|
||||||
margin: 1em 0;
|
|
||||||
border: 0;
|
|
||||||
padding: 1em;
|
|
||||||
width: 10em;
|
|
||||||
height: 10em;
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
margin: 0;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
form p {
|
|
||||||
line-height: 1.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin: 1em 1em 1em 2em;
|
|
||||||
border-width: 1em 1.5em 2em .5em;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: black;
|
|
||||||
padding: 1em 0;
|
|
||||||
width: 5em;
|
|
||||||
height: 9em;
|
|
||||||
float: left;
|
|
||||||
background-color: #FC0;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
address {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
background-color: black;
|
|
||||||
color: white;
|
|
||||||
float: left;
|
|
||||||
margin: 1em 0;
|
|
||||||
border: 0;
|
|
||||||
padding: 1em;
|
|
||||||
width: 10em;
|
|
||||||
height: 10em;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<dl>
|
|
||||||
<dt>
|
|
||||||
toggle
|
|
||||||
</dt>
|
|
||||||
<dd>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
the way
|
|
||||||
</li>
|
|
||||||
<li id="bar">
|
|
||||||
<p>
|
|
||||||
the world ends
|
|
||||||
</p>
|
|
||||||
<form action="./" method="get">
|
|
||||||
<p>
|
|
||||||
bang
|
|
||||||
<input type="radio" name="foo" value="off">
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
whimper
|
|
||||||
<input type="radio" name="foo2" value="on">
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
i grow old
|
|
||||||
</li>
|
|
||||||
<li id="baz">
|
|
||||||
pluot?
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<blockquote>
|
|
||||||
<address>
|
|
||||||
bar maids,
|
|
||||||
</address>
|
|
||||||
</blockquote>
|
|
||||||
<h1>
|
|
||||||
sing to me, erbarme dich
|
|
||||||
</h1>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
|
|
||||||
This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
|
|
||||||
</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -10,7 +10,8 @@ var h2cSelector, h2cOptions;
|
|||||||
var srcStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
|
var srcStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
|
||||||
|
|
||||||
document.write(srcStart + '/external/jquery-1.6.2.js' + scrEnd);
|
document.write(srcStart + '/external/jquery-1.6.2.js' + scrEnd);
|
||||||
var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas', 'plugins/jquery.plugin.html2canvas'], i;
|
document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd);
|
||||||
|
var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas'], i;
|
||||||
for (i = 0; i < html2canvas.length; ++i) {
|
for (i = 0; i < html2canvas.length; ++i) {
|
||||||
document.write(srcStart + '/src/' + html2canvas[i] + '.js' + scrEnd);
|
document.write(srcStart + '/src/' + html2canvas[i] + '.js' + scrEnd);
|
||||||
}
|
}
|
||||||
@ -27,6 +28,7 @@ var h2cSelector, h2cOptions;
|
|||||||
flashcanvas: "../external/flashcanvas.min.js",
|
flashcanvas: "../external/flashcanvas.min.js",
|
||||||
logging: true,
|
logging: true,
|
||||||
profile: true,
|
profile: true,
|
||||||
|
proxy: "http://html2canvas.appspot.com/query",
|
||||||
useCORS: true
|
useCORS: true
|
||||||
}, h2cOptions));
|
}, h2cOptions));
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|||||||
@ -1,87 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
|
||||||
* @created 15.7.2011
|
|
||||||
* @website http://hertzen.com
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>z-index tests #1</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<style>
|
|
||||||
|
|
||||||
div { font: 12px Arial; }
|
|
||||||
|
|
||||||
span.bold { font-weight: bold; }
|
|
||||||
|
|
||||||
#div1,#div3 {
|
|
||||||
height: 80px;
|
|
||||||
position: relative;
|
|
||||||
border: 1px dashed #669966;
|
|
||||||
background-color: #ccffcc;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div2 {
|
|
||||||
opacity: 0.8;
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
|
||||||
width: 150px;
|
|
||||||
height: 200px;
|
|
||||||
top: 20px;
|
|
||||||
left: 170px;
|
|
||||||
border: 1px dashed #990000;
|
|
||||||
background-color: #ffdddd;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div4 {
|
|
||||||
opacity: 0.8;
|
|
||||||
z-index: 2;
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
height: 70px;
|
|
||||||
top: 65px;
|
|
||||||
left: 50px;
|
|
||||||
border: 1px dashed #000099;
|
|
||||||
background-color: #ddddff;
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<br />
|
|
||||||
|
|
||||||
No z-indexed content
|
|
||||||
<div id="div1">
|
|
||||||
<br /><span class="bold">DIV #1</span>
|
|
||||||
<br />position: relative;
|
|
||||||
<div id="div2">
|
|
||||||
<br /><span class="bold">DIV #2</span>
|
|
||||||
<br />position: absolute;
|
|
||||||
<br />z-index: 1;
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<div id="div3">
|
|
||||||
<br /><span class="bold">DIV #3</span>
|
|
||||||
<br />position: relative;
|
|
||||||
<div id="div4">
|
|
||||||
<br /><span class="bold">DIV #4</span>
|
|
||||||
<br />position: absolute;
|
|
||||||
<br />z-index: 2;
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Some more non-zindexed content
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,109 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
|
||||||
* @created 15.7.2011
|
|
||||||
* @website http://hertzen.com
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>z-index tests #2</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<style type="text/css">
|
|
||||||
|
|
||||||
div { font: 12px Arial; }
|
|
||||||
|
|
||||||
span.bold { font-weight: bold; }
|
|
||||||
|
|
||||||
#div2 { z-index: 2; }
|
|
||||||
#div3 { z-index: 1; }
|
|
||||||
#div4 { z-index: 10; }
|
|
||||||
|
|
||||||
#div1,#div3 {
|
|
||||||
height: 80px;
|
|
||||||
position: relative;
|
|
||||||
border: 1px dashed #669966;
|
|
||||||
background-color: #ccffcc;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div2 {
|
|
||||||
opacity: 0.8;
|
|
||||||
position: absolute;
|
|
||||||
width: 150px;
|
|
||||||
height: 200px;
|
|
||||||
top: 20px;
|
|
||||||
left: 170px;
|
|
||||||
border: 1px dashed #990000;
|
|
||||||
background-color: #ffdddd;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div4 {
|
|
||||||
opacity: 0.8;
|
|
||||||
position: absolute;
|
|
||||||
width: 200px;
|
|
||||||
height: 70px;
|
|
||||||
top: 65px;
|
|
||||||
left: 50px;
|
|
||||||
border: 1px dashed #000099;
|
|
||||||
background-color: #ddddff;
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#div5{
|
|
||||||
border: 1px dashed #669966;
|
|
||||||
background-color: #ccffcc;
|
|
||||||
padding-left: 5px;
|
|
||||||
position:relative;
|
|
||||||
margin-bottom:-15px;
|
|
||||||
height:50px;
|
|
||||||
margin-top:10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#div6{
|
|
||||||
border: 1px dashed #000099;
|
|
||||||
background-color: #ddddff;
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</style></head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<div id="div1">
|
|
||||||
<br /><span class="bold">DIV #1</span>
|
|
||||||
<br />position: relative;
|
|
||||||
<div id="div2">
|
|
||||||
<br /><span class="bold">DIV #2</span>
|
|
||||||
<br />position: absolute;
|
|
||||||
<br />z-index: 2;
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<div id="div3">
|
|
||||||
<br /><span class="bold">DIV #3</span>
|
|
||||||
<br />position: relative;
|
|
||||||
<br />z-index: 1;
|
|
||||||
<div id="div4">
|
|
||||||
<br /><span class="bold">DIV #4</span>
|
|
||||||
<br />position: absolute;
|
|
||||||
<br />z-index: 10;
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="div5"><br />DIV #5<br />position:relative;<br /></div>
|
|
||||||
|
|
||||||
<div id ="div6"><br />DIV #6<br />position:static;<br /></div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @author Niklas von Hertzen <niklas at hertzen.com>
|
|
||||||
* @created 15.7.2011
|
|
||||||
* @website http://hertzen.com
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>z-index tests #3</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
||||||
<link href="#" type="text/css" rel="stylesheet">
|
|
||||||
<script type="text/javascript" src="test.js"></script>
|
|
||||||
<style type="text/css">
|
|
||||||
|
|
||||||
div { font: 12px Arial; }
|
|
||||||
|
|
||||||
span.bold { font-weight: bold; }
|
|
||||||
|
|
||||||
div.lev1 {
|
|
||||||
width: 250px;
|
|
||||||
height: 70px;
|
|
||||||
position: relative;
|
|
||||||
border: 2px outset #669966;
|
|
||||||
background-color: #ccffcc;
|
|
||||||
padding-left: 5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#container1 {
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
|
||||||
top: 30px;
|
|
||||||
left: 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.lev2 {
|
|
||||||
opacity: 0.9;
|
|
||||||
width: 200px;
|
|
||||||
height: 60px;
|
|
||||||
position: relative;
|
|
||||||
border: 2px outset #990000;
|
|
||||||
background-color: #ffdddd;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container2 {
|
|
||||||
z-index: 1;
|
|
||||||
position: absolute;
|
|
||||||
top: 20px;
|
|
||||||
left: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.lev3 {
|
|
||||||
z-index: 10;
|
|
||||||
width: 100px;
|
|
||||||
position: relative;
|
|
||||||
border: 2px outset #000099;
|
|
||||||
background-color: #ddddff;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style></head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
<div class="lev1">
|
|
||||||
<span class="bold">LEVEL #1</span>
|
|
||||||
|
|
||||||
<div id="container1">
|
|
||||||
|
|
||||||
<div class="lev2">
|
|
||||||
<br /><span class="bold">LEVEL #2</span>
|
|
||||||
<br />z-index: 1;
|
|
||||||
|
|
||||||
<div id="container2">
|
|
||||||
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
<div class="lev3"><span class="bold">LEVEL #3</span></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lev2">
|
|
||||||
<br /><span class="bold">LEVEL #2</span>
|
|
||||||
<br />z-index: 1;
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lev1" style="position:static">
|
|
||||||
<span class="bold">LEVEL #1</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lev1">
|
|
||||||
<span class="bold">LEVEL #1</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lev1">
|
|
||||||
<span class="bold">LEVEL #1</span>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue
Block a user