<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test: document.elementFromPoint() for overlapping, positioned regions with non-auto z-index</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help" />
<meta content="ahem" name="flags" />
<meta content="Test checks that document.elementFromPoint() returns the correct
region when multiple regions are absolutely positioned, overlap and have non-auto z-index." name="assert" />
<style>
html, body {
margin: 0;
}
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lime;
flow-into: f;
}
.region {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border-left: 20px solid lightblue;
background-color: green;
flow-from: f;
}
.region p {
height: 50%;
background-color: red;
}
.front {
z-index: 42;
border-left-color: orange;
}
.middle {
z-index: 32;
border-left-color: lightblue;
}
.back {
z-index: 16;
border-left-color: yellow;
}
.left {
top: 50px;
left: 50px;
}
.center {
top: 90px;
left: 100px;
}
.right {
top: 130px;
left: 150px;
}
#log {
margin-top: 250px;
}
</style>
<link href="/resources/testharness.css" rel="stylesheet" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="content">
<div id="block1">
xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx
</div>
<div id="block2">
xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx
</div>
<div id="block3">
xxxxx<br />xxxxx<br />xxxxx<br />xxxxx<br />xxxxx
</div>
</div>
<div class="region">
<p> </p>
</div>
<div class="region">
<p> </p>
</div>
<div class="region">
<p> </p>
</div>
<div id="log"></div>
<script>
function applyClasses(selector, classes) {
var elements = document.querySelectorAll(selector),
length = elements.length;
for (var i = 0; i < length; i++) {
elements[i].className = "region " + classes[i];
}
document.body.offsetTop;
}
function runTests() {
var regionsEnabled = document.querySelector(".region p").getBoundingClientRect().width == 0;
test(function() {
applyClasses(".region", [ "middle", "front", "back" ]);
assert_true(regionsEnabled, "Regions is enabled");
assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front"));
}, "document.elementFromPoint() for point on region border, with all regions overlapping with non-auto z-index");
test(function() {
applyClasses(".region", [ "right middle", "left front", " center back" ]);
assert_true(regionsEnabled, "Regions is enabled");
assert_equals(document.elementFromPoint(60, 100), document.querySelector(".front"));
}, "document.elementFromPoint() for point on region border, with regions partially overlapping with non-auto z-index");
test(function() {
applyClasses(".region", [ "right middle", "center front", " left back" ]);
assert_true(regionsEnabled, "Regions is enabled");
//we're checking the "right middle" region, inside it
assert_equals(document.elementFromPoint(180, 210), document.querySelector("#block1"));
}, "document.elementFromPoint() for point inside region (effectively, content node), with regions partially overlapping with non-auto z-index");
}
runTests();
</script>
</body></html>