Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 21:50:18 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

Browse source
This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

132
tests/wpt/css-tests/css-regions-1_dev/html/javascript-stacking-context-001.htm 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 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>&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>