80 lines
1.9 KiB
HTML
80 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>layout zoom test</title>
|
|
<style>
|
|
#test {
|
|
width: 500px;
|
|
height: 1500px;
|
|
background: skyblue;
|
|
}
|
|
#test > div {
|
|
background: navy;
|
|
height: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="test"></div>
|
|
<div id="console">
|
|
The box above should be navy blue with no banding effects.<br>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var testElement = document.getElementById('test');
|
|
var consoleElement = document.getElementById('console');
|
|
|
|
function init()
|
|
{
|
|
testElement.innerHTML = '';
|
|
for (var i = 0; i < 100; i++)
|
|
testElement.appendChild(document.createElement('div'));
|
|
}
|
|
|
|
function test(zoom)
|
|
{
|
|
testElement.style.zoom = zoom + '%';
|
|
|
|
var lastElementBottom = testElement.lastChild.getBoundingClientRect().bottom;
|
|
var containerBottom = testElement.getBoundingClientRect().bottom;
|
|
|
|
var tolerance = Math.ceil(1 / (zoom / 100));
|
|
if (Math.abs(lastElementBottom - containerBottom) <= tolerance)
|
|
log('PASS: With zoom of ' + zoom + '% bottom edge of last child lines up with bottom edge of container.');
|
|
else
|
|
log('FAIL: With zoom of ' + zoom + '% bottom edge of last child at ' + lastElementBottom + ', container at ' + containerBottom + '.');
|
|
}
|
|
|
|
function log(str)
|
|
{
|
|
consoleElement.appendChild(document.createTextNode(str));
|
|
consoleElement.appendChild(document.createElement('br'));
|
|
}
|
|
|
|
init();
|
|
test(100);
|
|
test(110);
|
|
test(125);
|
|
test(133);
|
|
test(150);
|
|
test(166);
|
|
test(175);
|
|
test(200);
|
|
test(250);
|
|
test(300);
|
|
test(400);
|
|
test(500);
|
|
test(750);
|
|
test(1000);
|
|
test(90);
|
|
test(80);
|
|
test(75);
|
|
test(66);
|
|
test(50);
|
|
test(33);
|
|
test(25);
|
|
test(10);
|
|
test(5);
|
|
</script>
|
|
</html>
|