Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +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

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

@ -0,0 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: document.elementFromPoint() for 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 document.elementFromPoint() returns the correct
region when multiple regions are absolutely positioned, overlap and have non-auto z-index.">
<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>
<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>&nbsp;</p>
</div>
<div class="region">
<p>&nbsp;</p>
</div>
<div class="region">
<p>&nbsp;</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>