<!DOCTYPE html>
<html>
<head>
<title>Document::nodesFromRect : CSS rotate transforms - bug 85792</title>
<style type="text/css">
#sandbox {
position: absolute;
left: 0px;
top: 0px;
width: 700px;
height: 700px;
}
#layer {
position: absolute;
left: 200px;
top: 200px;
width: 300px;
height: 300px;
}
.rotate45 { transform: rotate(45deg); }
.rotate90 { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
#layer > #fleft { float: left; width: 50px; height: 300px; }
#layer > #fright { float: right; width: 50px; height: 300px; }
#layer > .hbox { height: 100px; margin-right: 50px; margin-left: 50px }
</style>
<script src="../../../resources/js-test.js"></script>
<script src="resources/nodesFromRect.js"></script>
</head>
<body>
<div id=sandbox>
<div id=layer>
<div id=fleft></div>
<div id=fright></div>
<div id=box1 class=hbox></div>
<div id=box2 class=hbox></div>
<div id=box3 class=hbox></div>
</div>
</div>
<script>
function runTest()
{
description(document.title);
var e = {};
// Set up shortcut access to elements
['sandbox', 'layer', 'fleft', 'fright', 'box1', 'box2', 'box3'].forEach(function(a) {
e[a] = document.getElementById(a);
});
window.scrollTo(0, 0);
debug('Check unrotated area-testing for sanity');
check(120, 120, 61, 61, [e.sandbox]);
check(210, 210, 21, 21, [e.fleft]);
check(460, 210, 21, 21, [e.fright]);
check(260, 210, 21, 21, [e.box1]);
check(260, 310, 21, 21, [e.box2]);
check(210, 260, 61, 61, [e.fleft, e.box2, e.box1, e.layer]);
check(180, 210, 31, 21, [e.fleft, e.layer, e.sandbox]);
check(260, 280, 21, 31, [e.box2, e.box1, e.layer]);
check(150, 210, 31, 21, [e.sandbox]);
debug('Check rotated 180deg');
e['layer'].setAttribute('class', 'rotate180');
check(120, 120, 61, 61, [e.sandbox]);
check(210, 210, 21, 21, [e.fright]);
check(460, 210, 21, 21, [e.fleft]);
check(260, 210, 21, 21, [e.box3]);
check(260, 310, 21, 21, [e.box2]);
check(210, 260, 61, 61, [e.fright, e.box3, e.box2, e.layer]);
check(180, 210, 31, 21, [e.fright, e.layer, e.sandbox]);
check(260, 280, 21, 31, [e.box3, e.box2, e.layer]);
check(150, 210, 31, 21, [e.sandbox]);
debug('Check rotated 90deg');
e['layer'].setAttribute('class', 'rotate90');
check(120, 120, 61, 61, [e.sandbox]);
check(210, 270, 21, 21, [e.box3]);
check(460, 270, 21, 21, [e.box1]);
check(260, 210, 21, 21, [e.fleft]);
check(260, 460, 21, 21, [e.fright]);
check(260, 210, 61, 61, [e.fleft, e.box3, e.box2, e.layer]);
check(180, 270, 31, 21, [e.box3, e.layer, e.sandbox]);
check(320, 180, 21, 31, [e.fleft, e.layer, e.sandbox]);
check(270, 220, 21, 51, [e.fleft, e.box3, e.layer]);
debug('Check rotated 45deg');
e['layer'].setAttribute('class', 'rotate45');
check(120, 120, 61, 61, [e.sandbox]);
check(250, 250, 21, 21, [e.fleft]);
check(430, 430, 21, 21, [e.fright]);
check(430, 250, 21, 21, [e.box1]);
check(250, 430, 21, 21, [e.box3]);
check(330, 120, 41, 41, [e.fleft, e.layer, e.sandbox]);
check(330, 120, 41, 91, [e.fleft, e.box1, e.layer, e.sandbox]);
check(310, 310, 81, 81, [e.box3, e.box2, e.box1, e.layer]);
check(233, 259, 55, 3, [e.fleft]);
}
window.onload = runTest;
</script>
<p id='description'></p>
<span id="console"></span>
</body>
</html>
Codebase Browser
chromium