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

Fix layer ordering with multiple stacks on same auto z-index

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-10-19 22:29:34 +03:00
parent 7e13231807
commit 04bdb48cba
4 changed files with 91 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dist/html2canvas.js vendored
View File

@ -1771,7 +1771,7 @@ NodeParser.prototype.isRootElement = function(container) {
}; };
NodeParser.prototype.sortStackingContexts = function(stack) { NodeParser.prototype.sortStackingContexts = function(stack) {
stack.contexts.sort(zIndexSort); stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
stack.contexts.forEach(this.sortStackingContexts, this); stack.contexts.forEach(this.sortStackingContexts, this);
}; };
@ -2281,8 +2281,10 @@ function isTextNode(container) {
return container.node.nodeType === Node.TEXT_NODE; return container.node.nodeType === Node.TEXT_NODE;
} }
function zIndexSort(a, b) { function zIndexSort(contexts) {
return a.cssInt("zIndex") - b.cssInt("zIndex"); return function(a, b) {
return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
};
} }
function hasOpacity(container) { function hasOpacity(container) {

4
dist/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/nodeparser.js
View File

@ -200,7 +200,7 @@ NodeParser.prototype.isRootElement = function(container) {
}; };
NodeParser.prototype.sortStackingContexts = function(stack) { NodeParser.prototype.sortStackingContexts = function(stack) {
stack.contexts.sort(zIndexSort); stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
stack.contexts.forEach(this.sortStackingContexts, this); stack.contexts.forEach(this.sortStackingContexts, this);
}; };
@ -710,8 +710,10 @@ function isTextNode(container) {
return container.node.nodeType === Node.TEXT_NODE; return container.node.nodeType === Node.TEXT_NODE;
} }
function zIndexSort(a, b) { function zIndexSort(contexts) {
return a.cssInt("zIndex") - b.cssInt("zIndex"); return function(a, b) {
return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
};
} }
function hasOpacity(container) { function hasOpacity(container) {

79
tests/cases/zindex/z-index18.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>z-index18</title>
<style>
body {
background: violet;
}
#container {
position: relative;
height: 300px;
}
.base {
background: green;
}
#container div {
width: 800px;
height: 300px;
}
.div1 {
background: red;
}
#container .div2 {
width: 400px;
background: blue;
}
#container .div3 {
background: orange;
width: 200px;
height: 200px;
}
#container .highlight1 {
background: purple;
height: 100px;
}
#container .highlight2 {
background: pink;
height: 100px;
}
#container .highlight3 {
background: navy;
height: 100px;
}
#container .last {
background: brown;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="../../test.js"></script>
</head>
<body>
<div id="container" class="jqplot-target" style="position: relative; height: 300px;">
<div class="base" style="position: absolute; left: 0px; top: 0px;">a</div>
<div class="base" style="position: absolute; left: 0px; top: 0px;">b</div>
<div class="jqplot-series-shadowdiv"style="position: absolute; left: 16px; top: 10px;">c</div>
<div class="jqplot-series-shadowdiv" style="position: absolute; left: 16px; top: 10px;">d</div>
<div class="jqplot-series-shadowdiv" style="position: absolute; left: 16px; top: 10px;">e</div>
<div class="div1" style="position: absolute; left: 16px; top: 10px;">f</div>
<div class="div2" style="position: absolute; left: 16px; top: 10px;">g</div>
<div class="div3" style="position: absolute; left: 16px; top: 10px;">h</div>
<div class="highlight1" style="position: absolute; right: 16px; top: 10px;">i</div>
<div class="highlight2" style="position: absolute; left: 16px; top: 60px;">j</div>
<div class="highlight3" style="position: absolute; left: 56px; top: 90px;">k</div>
<div class="last" style="position: absolute; left: 16px; top: 10px;">l</div>
</div>
</body>
</html>