mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #260 from arrix/develop

Browse Source 
negative z-index
This commit is contained in:
Niklas von Hertzen 2013-08-15 12:15:04 -07:00
commit 5f45968154
9 changed files with 106 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Renderer.js
View File

@ -15,12 +15,10 @@ _html2canvas.Renderer = function(parseQueue, options){
stub = {node: node}, stub = {node: node},
childrenDest = specialParent; // where children without z-index should be pushed into childrenDest = specialParent; // where children without z-index should be pushed into
if (!context[zi]) { context[zi] = []; }
if (node.zIndex.ownStacking) { if (node.zIndex.ownStacking) {
contextForChildren = stub.context = { 0: [{node:node}]}; // '!' comes before numbers in sorted array
if (isPositioned || isFloated) { contextForChildren = stub.context = { '!': [{node:node, children: []}]};
childrenDest = contextForChildren[0][0].children = []; childrenDest = undefined;
}
} else if (isPositioned || isFloated) { } else if (isPositioned || isFloated) {
childrenDest = stub.children = []; childrenDest = stub.children = [];
} }
@ -28,6 +26,7 @@ _html2canvas.Renderer = function(parseQueue, options){
if (zi === 0 && specialParent) { if (zi === 0 && specialParent) {
specialParent.push(stub); specialParent.push(stub);
} else { } else {
if (!context[zi]) { context[zi] = []; }
context[zi].push(stub); context[zi].push(stub);
} }

8
tests/cases/zindex/z-index10.html
View File

@ -25,7 +25,7 @@
font-weight: bold; font-weight: bold;
} }
#div1, #div2 { #div1, #div2 {
border: 1px dashed #696; border: 1px solid #696;
padding: 10px; padding: 10px;
background-color: #cfc; background-color: #cfc;
} }
@ -43,12 +43,12 @@
top: 40px; top: 40px;
left: 180px; left: 180px;
width: 330px; width: 330px;
border: 1px dashed #900; border: 1px solid #900;
background-color: #fdd; background-color: #fdd;
padding: 40px 20px 20px; padding: 40px 20px 20px;
} }
#div4, #div5 { #div4, #div5 {
border: 1px dashed #996; border: 1px solid #996;
background-color: #ffc; background-color: #ffc;
} }
#div4 { #div4 {
@ -68,7 +68,7 @@
left: 180px; left: 180px;
width: 150px; width: 150px;
height: 125px; height: 125px;
border: 1px dashed #009; border: 1px solid #009;
padding-top: 125px; padding-top: 125px;
background-color: #ddf; background-color: #ddf;
text-align: center; text-align: center;

31
tests/cases/zindex/z-index13.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<title>text above children with negative z-index; z-index tests #13</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style type="text/css">
.outer {
background-color:cyan;
width:200px;
height:200px;
z-index:0;
position:relative;
}
.inner {
background-color:green;
width:100px;
height:100px;
z-index:-1;
position:absolute;
top:0;left:0;
}
</style></head>
<body>
<div class="outer">outer
<div class="inner"></div>
</div>
</body>
</html>

25
tests/cases/zindex/z-index14.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>body text above children with negative index but body bgcolor below</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style type="text/css">
* {margin:0;padding:0;}
body {
background-color: green;
}
#div1 {
background-color:cyan;
width:200px;
height:200px;
z-index:-1;
position:absolute;
top:0; left:0;
}
</style></head>
<body>body
<div id="div1"></div>
</body>
</html>

26
tests/cases/zindex/z-index15.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>body text and bgcolor above children with negative z-index</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style type="text/css">
* {margin:0;padding:0;}
html {background-color: gray;}
body {
background-color: green;
}
#div1 {
background-color:cyan;
width:200px;
height:200px;
z-index:-1;
position:absolute;
top:0; left:0;
}
</style></head>
<body>body
<div id="div1"></div>
</body>
</html>

2
tests/cases/zindex/z-index4.html
View File

@ -9,7 +9,7 @@
width: 250px; width: 250px;
height: 70px; height: 70px;
position: relative; position: relative;
border: 2px outset #669966; border: 2px solid #669966;
background-color: #ccffcc; background-color: #ccffcc;
padding-left: 5px; padding-left: 5px;
} }

10
tests/cases/zindex/z-index7.html
View File

@ -15,7 +15,7 @@ span.bold { font-weight: bold; }
#normdiv { #normdiv {
height: 70px; height: 70px;
border: 1px dashed #999966; border: 1px solid #999966;
background-color: #ffffcc; background-color: #ffffcc;
margin: 0px 50px 0px 50px; margin: 0px 50px 0px 50px;
text-align: center; text-align: center;
@ -26,7 +26,7 @@ span.bold { font-weight: bold; }
height: 100px; height: 100px;
position: relative; position: relative;
top: 30px; top: 30px;
border: 1px dashed #669966; border: 1px solid #669966;
background-color: #ccffcc; background-color: #ccffcc;
margin: 0px 50px 0px 50px; margin: 0px 50px 0px 50px;
text-align: center; text-align: center;
@ -38,7 +38,7 @@ span.bold { font-weight: bold; }
position: relative; position: relative;
top: 15px; top: 15px;
left: 20px; left: 20px;
border: 1px dashed #669966; border: 1px solid #669966;
background-color: #ccffcc; background-color: #ccffcc;
margin: 0px 50px 0px 50px; margin: 0px 50px 0px 50px;
text-align: center; text-align: center;
@ -51,7 +51,7 @@ span.bold { font-weight: bold; }
height: 350px; height: 350px;
top: 10px; top: 10px;
left: 10px; left: 10px;
border: 1px dashed #990000; border: 1px solid #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
} }
@ -63,7 +63,7 @@ span.bold { font-weight: bold; }
height: 350px; height: 350px;
top: 10px; top: 10px;
right: 10px; right: 10px;
border: 1px dashed #990000; border: 1px solid #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
} }

10
tests/cases/zindex/z-index8.html
View File

@ -20,7 +20,7 @@ span.bold { font-weight: bold; }
height: 200px; height: 200px;
top: 10px; top: 10px;
right: 140px; right: 140px;
border: 1px dashed #990000; border: 1px solid #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
} }
@ -28,7 +28,7 @@ span.bold { font-weight: bold; }
#normdiv { #normdiv {
/*opacity: 0.7;*/ /*opacity: 0.7;*/
height: 100px; height: 100px;
border: 1px dashed #999966; border: 1px solid #999966;
background-color: #ffffcc; background-color: #ffffcc;
margin: 0px 10px 0px 10px; margin: 0px 10px 0px 10px;
text-align: left; text-align: left;
@ -40,7 +40,7 @@ span.bold { font-weight: bold; }
float: left; float: left;
width: 150px; width: 150px;
height: 200px; height: 200px;
border: 1px dashed #009900; border: 1px solid #009900;
background-color: #ccffcc; background-color: #ccffcc;
text-align: center; text-align: center;
} }
@ -51,7 +51,7 @@ span.bold { font-weight: bold; }
float: right; float: right;
width: 150px; width: 150px;
height: 200px; height: 200px;
border: 1px dashed #009900; border: 1px solid #009900;
background-color: #ccffcc; background-color: #ccffcc;
text-align: center; text-align: center;
} }
@ -63,7 +63,7 @@ span.bold { font-weight: bold; }
height: 100px; height: 100px;
top: 130px; top: 130px;
left: 100px; left: 100px;
border: 1px dashed #990000; border: 1px solid #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
} }

10
tests/cases/zindex/z-index9.html
View File

@ -16,7 +16,7 @@ span.bold { font-weight: bold; }
#normdiv { #normdiv {
z-index: 8; z-index: 8;
height: 70px; height: 70px;
border: 1px dashed #999966; border: 1px solid #999966;
background-color: #ffffcc; background-color: #ffffcc;
margin: 0px 50px 0px 50px; margin: 0px 50px 0px 50px;
text-align: center; text-align: center;
@ -27,7 +27,7 @@ span.bold { font-weight: bold; }
height: 100px; height: 100px;
position: relative; position: relative;
top: 30px; top: 30px;
border: 1px dashed #669966; border: 1px solid #669966;
background-color: #ccffcc; background-color: #ccffcc;
margin: 0px 50px 0px 50px; margin: 0px 50px 0px 50px;
text-align: center; text-align: center;
@ -39,7 +39,7 @@ span.bold { font-weight: bold; }
position: relative; position: relative;
top: 15px; top: 15px;
left: 20px; left: 20px;
border: 1px dashed #669966; border: 1px solid #669966;
background-color: #ccffcc; background-color: #ccffcc;
margin: 0px 50px 0px 50px; margin: 0px 50px 0px 50px;
text-align: center; text-align: center;
@ -52,7 +52,7 @@ span.bold { font-weight: bold; }
height: 350px; height: 350px;
top: 10px; top: 10px;
left: 10px; left: 10px;
border: 1px dashed #990000; border: 1px solid #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
} }
@ -64,7 +64,7 @@ span.bold { font-weight: bold; }
height: 350px; height: 350px;
top: 10px; top: 10px;
right: 10px; right: 10px;
border: 1px dashed #990000; border: 1px solid #990000;
background-color: #ffdddd; background-color: #ffdddd;
text-align: center; text-align: center;
} }