2014-11-29 22:04:35 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head lang="en">
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Scrolling tests</title>
|
|
|
|
|
<link rel="stylesheet" href="lib/mocha.css" />
|
2015-10-19 01:25:03 +03:00
|
|
|
<script src="../../node_modules/bluebird/js/browser/bluebird.js"></script>
|
2014-11-29 22:04:35 +03:00
|
|
|
<script src="../../dist/html2canvas.js"></script>
|
|
|
|
|
<script src="../assets/jquery-1.6.2.js"></script>
|
|
|
|
|
<script src="lib/expect.js"></script>
|
|
|
|
|
<script src="lib/mocha.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="mocha"></div>
|
|
|
|
|
<script>mocha.setup('bdd')</script>
|
2015-02-28 17:51:52 +03:00
|
|
|
<div id="scroll-render" style="height: 200px; width: 200px;">
|
|
|
|
|
<div style="height: 500px; width: 400px;overflow: scroll;" id="scrollable">
|
|
|
|
|
<div style="height: 500px;background: red;"></div>
|
|
|
|
|
<div style="height: 650px; background: green"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2016-01-23 23:05:43 +03:00
|
|
|
<div style="height: 2200px"></div>
|
|
|
|
|
<div style="height: 500px;background: green;" id="bottom-content"><a name="content"> </a></div>
|
2014-11-29 22:04:35 +03:00
|
|
|
<script>
|
|
|
|
|
describe("Scrolling", function() {
|
|
|
|
|
it("with random scroll", function (done) {
|
|
|
|
|
$(window).scrollTop(123);
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
html2canvas(document.body, {type: 'view'}).then(function () {
|
|
|
|
|
expect($(window).scrollTop()).to.equal(123);
|
|
|
|
|
done();
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
done(error);
|
|
|
|
|
});
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("with url anchor", function (done) {
|
|
|
|
|
window.location.hash = "#content";
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
var top = $(window).scrollTop();
|
2015-02-28 17:51:52 +03:00
|
|
|
html2canvas(document.body, {type: 'view'}).then(function () {
|
2014-11-29 22:04:35 +03:00
|
|
|
var currentTop = $(window).scrollTop();
|
|
|
|
|
window.location.hash = "";
|
2014-11-30 15:23:52 +03:00
|
|
|
expect(currentTop).to.be.greaterThan(1500);
|
2014-12-06 17:19:38 +03:00
|
|
|
if ((currentTop - top) !== 200) { // phantomjs issue
|
|
|
|
|
expect(currentTop).to.equal(top);
|
|
|
|
|
}
|
2014-11-29 22:04:35 +03:00
|
|
|
done();
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
done(error);
|
|
|
|
|
});
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
2015-02-28 17:51:52 +03:00
|
|
|
|
|
|
|
|
it("with content scroll", function (done) {
|
|
|
|
|
$("#scrollable").scrollTop(500);
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
html2canvas(document.querySelector("#scroll-render")).then(function (canvas) {
|
|
|
|
|
expect($("#scrollable").scrollTop()).to.equal(500);
|
|
|
|
|
expect(canvas.width).to.equal(200);
|
|
|
|
|
expect(canvas.height).to.equal(200);
|
|
|
|
|
validCanvasPixels(canvas);
|
|
|
|
|
done();
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
done(error);
|
2016-01-23 23:05:43 +03:00
|
|
|
});
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
it("with window scroll", function (done) {
|
|
|
|
|
$(window).scrollTop(500);
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
console.log(document.querySelector("#bottom-content").getBoundingClientRect().top);
|
|
|
|
|
html2canvas(document.querySelector("#bottom-content")).then(function (canvas) {
|
|
|
|
|
expect($(window).scrollTop()).to.equal(500);
|
|
|
|
|
validCanvasPixels(canvas);
|
|
|
|
|
done();
|
|
|
|
|
}).catch(function (error) {
|
|
|
|
|
done(error);
|
2015-02-28 17:51:52 +03:00
|
|
|
});
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
2014-11-29 22:04:35 +03:00
|
|
|
});
|
|
|
|
|
|
2015-02-28 17:51:52 +03:00
|
|
|
function validCanvasPixels(canvas) {
|
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
|
var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
|
|
|
|
|
for (var i = 0, len = 200*199*4; i < len; i+=4) {
|
|
|
|
|
if (data[i] !== 0 || data[i+1] !== 128 || data[i+2] !== 0 || data[i+3] !== 255) {
|
|
|
|
|
console.log(i, data[i], data[i+1], data[i+2], data[i+3]);
|
|
|
|
|
expect().fail("Invalid canvas data");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2014-11-29 22:04:35 +03:00
|
|
|
after(function() {
|
|
|
|
|
if (history) {
|
|
|
|
|
history.pushState("", document.title, window.location.pathname + window.location.search);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
mocha.checkLeaks();
|
|
|
|
|
mocha.globals(['jQuery']);
|
|
|
|
|
if (window.mochaPhantomJS) {
|
|
|
|
|
mochaPhantomJS.run();
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
mocha.run();
|
|
|
|
|
}
|
2015-01-18 15:31:53 +03:00
|
|
|
mocha.suite.afterAll(function() {
|
|
|
|
|
document.body.setAttribute('data-complete', 'true');
|
|
|
|
|
});
|
2014-11-29 22:04:35 +03:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
