<!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: JavaScript event handlers on 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 JavaScript event handlers set on regions trigger
when multiple regions are absolutely positioned, overlap and have non-auto z-index." name="assert" />
<style>
#content {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
color: lime;
flow-into: f;
}
.region {
position: absolute;
top: 50px;
left: 50px;
width: 60px;
height: 60px;
border-left: 20px solid lime;
background-color: green;
overflow: hidden;
flow-from: f;
}
.region p {
height: 50%;
background-color: red;
}
#front {
height: 40px;
left: 90px;
top: 90px;
z-index: 42;
border-left-color: orange;
}
#front:hover {
border-color: black;
}
#middle {
left: 30px;
top: 70px;
z-index: 32;
border-left-color: lightblue;
}
#back {
left: 70px;
z-index: 16;
border-left-color: yellow;
}
#region-container {
position: relative;
}
</style>
</head>
<body>
<ol>
<li>You should see no red or the word "FAIL".</li>
<li>Move the mouse over the orange rectangle.</li>
<li>The orange rectangle should turn black.</li>
<li>Click on the black rectangle.</li>
<li>You should see the word "PASS", in green, below.</li>
</ol>
<div id="content">
<div id="block1">
xxx<br />xxx<br />xxx
</div>
<div id="block2">
xxx<br />xxx<br />xxx
</div>
<div id="block3">
xxx<br />xxx<br />xxx
</div>
</div>
<div id="region-container">
<div id="back" class="region">
<p> </p>
</div>
<div id="front" class="region">
<p> </p>
</div>
<div id="middle" class="region">
<p> </p>
</div>
</div>
<div id="result"></div>
<script>
var result = document.querySelector("#result");
function successHandler() {
console.log("this")
result.innerHTML = "PASS";
result.style.color = "green";
}
function failHandler() {
console.log("that")
result.innerHTML = "FAIL";
result.style.color = "red";
}
if (document.querySelector(".region p").getBoundingClientRect().width == 0) {
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#front").addEventListener("click", successHandler);
document.querySelector("#middle").addEventListener("click", failHandler);
document.querySelector("#back").addEventListener("click", failHandler);
});
} else {
failHandler();
}
</script>
</body></html>