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: nested z-index ordering (#2011)

Browse Source 
* fix zindex bug

* test: add z-index reftest for #1978

* fix: z-index ordering early exit
This commit is contained in:
Niklas von Hertzen 2019-09-21 21:12:36 -07:00 committed by GitHub
parent eedb81ef9e
commit 00555cf1ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/render/stacking-context.ts
View File

@ -104,8 +104,11 @@ const parseStackTree = (
parentStack.negativeZIndex.some((current, i) => { parentStack.negativeZIndex.some((current, i) => {
if (order > current.element.container.styles.zIndex.order) { if (order > current.element.container.styles.zIndex.order) {
index = i; index = i;
return false;
} else if (index > 0) {
return true; return true;
} }
return false; return false;
}); });
parentStack.negativeZIndex.splice(index, 0, stack); parentStack.negativeZIndex.splice(index, 0, stack);
@ -114,6 +117,8 @@ const parseStackTree = (
parentStack.positiveZIndex.some((current, i) => { parentStack.positiveZIndex.some((current, i) => {
if (order > current.element.container.styles.zIndex.order) { if (order > current.element.container.styles.zIndex.order) {
index = i + 1; index = i + 1;
return false;
} else if (index > 0) {
return true; return true;
} }

71
tests/reftests/zindex/z-index19.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>z-index19</title>
<style>
.canvas-view {
display: flex;
flex-direction: row;
}
.main {
position: relative;
width: 500px;
height: 500px;
margin-right: 50px;
}
.div1 {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: red;
}
.div2 {
position: absolute;
z-index: 2;
top: 100px;
left: 100px;
bottom: 0;
right: 0;
background-color: green;
}
.div3 {
position: absolute;
z-index: 3;
top: 200px;
left: 200px;
bottom: 0;
right: 0;
background-color: blue;
}
.div4 {
position: absolute;
z-index: 4;
top: 300px;
left: 300px;
bottom: 0;
right: 0;
background-color: white;
}
</style>
<script type="text/javascript" src="../../test.js"></script>
</head>
<body>
<div class="canvas-view" id="my-home">
<div class="main" id="my-div">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</body>
</html>