1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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> </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>
|
