Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 22:15:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985

Browse source
This commit is contained in:
Josh Matthews 2017-10-31 08:58:31 -04:00
parent 43a4f01647
commit 64e0a52537
12717 changed files with 59835 additions and 59820 deletions
Download patch file Download diff file Expand all files Collapse all files

122
tests/wpt/web-platform-tests/css/css-regions/stacking-context/javascript-stacking-context-002.html Normal file
View file

@ -0,0 +1,122 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: JavaScript event handlers on overlapping, positioned regions with non-auto z-index</title>
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
<meta name="flags" content="ahem">
<meta name="assert" content="Test checks that JavaScript event handlers set on regions trigger
when multiple regions are absolutely positioned, overlap and have non-auto z-index.">
<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 class="region" id="back">
<p>&nbsp;</p>
</div>
<div class="region" id="front">
<p>&nbsp;</p>
</div>
<div class="region" id="middle">
<p>&nbsp;</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>