blob: 80ea9945e2738b8180609812d3b1053671eaf9c5 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Test CSSOM View extensions to the Element Interface, verifying that
| getBoundingClientRect() works properly with boxes being split.
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
font-size: 40px;
}
.absolutely-positioned-1 {
position: absolute;
left: 30px;
top: 20px;
}
.absolutely-positioned-2 {
position: absolute;
left: 30px;
top: 120px;
width: 150px;
}
</style>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
// Compare document.getElementById(id1).getBoundingClientRect()[attribute]
// with document.getElementById(id2).getBoundingClientRect()[attribute] and
// change the both element's background colors to red if they are not equal.
function verifyGetBoundingClientRectAttributeMatchesByElementIds(
id1, id2, attribute) {
var element1 = document.getElementById(id1);
var element2 = document.getElementById(id2);
if (!element1 || !element2) {
document.body.style.backgroundColor = "#F44336";
} else
if (element1.getBoundingClientRect()[attribute] !=
element2.getBoundingClientRect()[attribute]) {
console.log("getElementById(\'" + id1 + "\').getBoundingClientRect()." +
attribute + " == " +
element1.getBoundingClientRect()[attribute] + " != \'" +
"getElementById(\'" + id2 + "\').getBoundingClientRect()." +
attribute + " == " +
element2.getBoundingClientRect()[attribute] + "\'");
element1.style.backgroundColor = "#F44336";
element2.style.backgroundColor = "#F44336";
}
}
function runTest() {
verifyGetBoundingClientRectAttributeMatchesByElementIds("div-1", "span-1",
"width");
verifyGetBoundingClientRectAttributeMatchesByElementIds("div-2", "span-2",
"height");
}
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, that's written ما اسمك؟ Thanks.</span>
</div>
<div id="div-2" class="absolutely-positioned-2">
<span id="span-2">Yes, it's written like that.</span>
</div>
</body>
</html>