blob: e44fa3fd2b2eaf3e326a2a0aec70dfa8593e929d [file] [log] [blame]
<!DOCTYPE html>
<!--
| Test CSSOM View extensions to the Element Interface, verifying that
| getBoundingClientRect() works properly with transforms.
-->
<html>
<head>
<style>
body {
background-color: #FFFFFF;
margin: 0px;
font-family: Roboto;
font-size: 40px;
}
.absolutely-positioned-1 {
position: absolute;
transform: translateX(100px) translateY(50px);
left: 30px;
top: 10px;
width: 100px;
}
.absolutely-positioned-2 {
position: absolute;
transform: translateX(10px) translateY(-50px);
left: 120px;
top: 110px;
width: 150px;
}
</style>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
function verifyGetBoundingClientRectAttributesAreCorrect(id) {
var element = document.getElementById(id);
if (!element) {
document.body.style.backgroundColor = "#F44336";
} else {
var expected_left = 130;
var expected_top = 60;
bounding_rect = element.getBoundingClientRect();
if (bounding_rect["left"] != expected_left) {
console.log("getElementById(\'" + id +
"\').getBoundingClientRect()." + "left" + " == " +
bounding_rect["left"] + " != " + expected_left);
element.style.backgroundColor = "#F44336";
}
if (bounding_rect["top"] != expected_top) {
console.log("getElementById(\'" + id +
"\').getBoundingClientRect()." + "top" + " == " +
bounding_rect["top"] + " != " + expected_top);
element.style.backgroundColor = "#F44336";
}
}
}
function runTest() {
verifyGetBoundingClientRectAttributesAreCorrect("span-1");
verifyGetBoundingClientRectAttributesAreCorrect("span-2");
}
window.onload = function() {
runTest();
if (window.testRunner) {
window.testRunner.notifyDone();
}
}
</script>
</head>
<body>
<div id="div-1" class="absolutely-positioned-1">
<span id="span-1">Yes</span>
</div>
<div id="div-2" class="absolutely-positioned-2">
<span id="span-2">Yes</span>
</div>
</body>
</html>