Fix background-size with background-repeat x and y as well (#447)

This commit is contained in:
Niklas von Hertzen 2014-09-27 18:03:18 +03:00
parent f517a35781
commit fa659ad1df
4 changed files with 31 additions and 29 deletions

28
dist/html2canvas.js vendored
View File

@ -2369,20 +2369,20 @@ Renderer.prototype.renderBackgroundRepeating = function(container, bounds, image
var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size); var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size);
var repeat = container.parseBackgroundRepeat(index); var repeat = container.parseBackgroundRepeat(index);
switch (repeat) { switch (repeat) {
case "repeat-x": case "repeat-x":
case "repeat no-repeat": case "repeat no-repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, imageContainer.image.height, borderData); this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, size.height, borderData);
break; break;
case "repeat-y": case "repeat-y":
case "no-repeat repeat": case "no-repeat repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], imageContainer.image.width, 99999, borderData); this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], size.width, 99999, borderData);
break; break;
case "no-repeat": case "no-repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData); this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData);
break; break;
default: default:
this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]); this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]);
break; break;
} }
}; };

File diff suppressed because one or more lines are too long

View File

@ -86,20 +86,20 @@ Renderer.prototype.renderBackgroundRepeating = function(container, bounds, image
var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size); var position = container.parseBackgroundPosition(bounds, imageContainer.image, index, size);
var repeat = container.parseBackgroundRepeat(index); var repeat = container.parseBackgroundRepeat(index);
switch (repeat) { switch (repeat) {
case "repeat-x": case "repeat-x":
case "repeat no-repeat": case "repeat no-repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, imageContainer.image.height, borderData); this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + borderData[3], bounds.top + position.top + borderData[0], 99999, size.height, borderData);
break; break;
case "repeat-y": case "repeat-y":
case "no-repeat repeat": case "no-repeat repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], imageContainer.image.width, 99999, borderData); this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + borderData[0], size.width, 99999, borderData);
break; break;
case "no-repeat": case "no-repeat":
this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData); this.backgroundRepeatShape(imageContainer, position, size, bounds, bounds.left + position.left + borderData[3], bounds.top + position.top + borderData[0], size.width, size.height, borderData);
break; break;
default: default:
this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]); this.renderBackgroundRepeat(imageContainer, position, size, {top: bounds.top, left: bounds.left}, borderData[3], borderData[0]);
break; break;
} }
}; };

View File

@ -40,6 +40,8 @@
</head> </head>
<body> <body>
<div class="container"></div> <div class="container"></div>
<div class="container" style="background-repeat: repeat-y"></div>
<div class="container" style="background-repeat: repeat-x"></div>
<div class="horizontal"> <div class="horizontal">
<div style='background-size: cover;'></div> <div style='background-size: cover;'></div>