blob: 4b26c99db8063e6c44f1d0f22deb099192989b3a [file] [log] [blame]
<!DOCTYPE html>
<!--
| Test CSSOM View extensions to the HTMLElement Interface.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
}
.absolutely-positioned {
position: absolute;
left: 30px;
top: 20px;
}
.level-1 {
background-color: #b3e5fc;
padding: 10px 15px;
}
.level-2 {
background-color: #40c4ff;
padding: 20px 20px;
}
.level-3 {
background-color: #00b0ff;
padding: 40px 40px;
}
.level-4 {
background-color: #0091ea;
height: 50px;
width: 50px;
}
.absolutely-positioned.level-4 {
background-color: #01579b;
}
</style>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
// Compare value with document.getElementById(id)[property], and
// change the element's background color to red if they are not equal.
function verifyElementPropertyById(id, property, value) {
var element = document.getElementById(id);
if (!element) {
document.body.style.backgroundColor = "#F44336";
} else
if (element[property] != value) {
console.log("getElementById(\'" + id + "\')." + property +
" == " + element[property] +
" != \'" + value + "\'");
element.style.backgroundColor = "#F44336";
}
}
function runTest() {
verifyElementPropertyById("level-1", "offsetLeft", 30);
verifyElementPropertyById("level-1", "offsetTop", 20);
verifyElementPropertyById("level-1", "offsetWidth", 200);
verifyElementPropertyById("level-1", "offsetHeight", 190);
verifyElementPropertyById("level-2", "offsetLeft", 15);
verifyElementPropertyById("level-2", "offsetTop", 10);
verifyElementPropertyById("level-2", "offsetWidth", 170);
verifyElementPropertyById("level-2", "offsetHeight", 170);
verifyElementPropertyById("level-3", "offsetLeft", 35);
verifyElementPropertyById("level-3", "offsetTop", 30);
verifyElementPropertyById("level-3", "offsetWidth", 130);
verifyElementPropertyById("level-3", "offsetHeight", 130);
verifyElementPropertyById("level-4", "offsetLeft", 75);
verifyElementPropertyById("level-4", "offsetTop", 70);
verifyElementPropertyById("level-4", "offsetWidth", 50);
verifyElementPropertyById("level-4", "offsetHeight", 50);
}
window.onload = function() {
runTest();
if (window.testRunner) {
window.testRunner.notifyDone();
}
}
</script>
</head>
<body>
<div id="level-1" class="absolutely-positioned level-1">
<div id="level-2" class="level-2">
<div id="level-3" class="level-3">
<div id="level-4" class="level-4"></div>
</div>
</div>
</div>
</body>
</html>