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
|
<!DOCTYPE HTML>
<html>
<!--
Test InspectorUtils.GetOverflowingChildrenOfElement in various cases
-->
<head>
<meta charset="utf-8">
<title>Test InspectorUtils.GetOverflowingChildrenOfElement</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<style>
/* "e" is our custom tag name for "element" */
e {
background: lightgray;
display: inline-block;
margin: 10px;
padding: 0;
border: 0;
width: 100px;
height: 100px;
overflow: auto;
}
/* "c" is our custom tag name for "child" */
c {
display: block;
background: green;
}
.fixedSize {
width: 10px;
height: 10px;
}
.target {
background: red;
}
</style>
<script>
'use strict';
SimpleTest.waitForExplicitFinish();
const InspectorUtils = SpecialPowers.InspectorUtils;
const CASES = [
{id: "no_children", expected: 0},
{id: "one_child_no_overflow", expected: 0},
{id: "margin_left_overflow", expected: 1},
{id: "transform_overflow", expected: 1},
{id: "nested_overflow", expected: 1},
{id: "intermediate_overflow", expected: 1},
{id: "multiple_overflow_at_different_depths", expected: 2},
];
function runTests() {
// Assign each child element to an inner id so each of them can be identified for testing.
Array.from(document.getElementsByTagName('c')).forEach((e, i) => {e.id = `inner${i}`});
for (const {id, expected} of CASES) {
info(`Checking element id ${id}.`);
const element = document.getElementById(id);
if (!element) {
ok(false, `Expected to find element with id ${id}.`);
continue;
}
const overflowing_children = InspectorUtils.getOverflowingChildrenOfElement(element);
is(overflowing_children.length, expected, `${id} has the expected number of children.`);
// Check that each child has the "target" class. Otherwise, we're getting the
// wrong children. We don't check each child with a test function, because we
// don't want to needlessly inflate the number of test functions in the log.
// But if we find a child that *doesn't* have the class "target", we report
// that as a test failure.
for (const child of overflowing_children) {
// child is a Node, but not necessarily an Element. We want to get the containing
// Element so that we can use its classList, tagName, and id properties.
let e = child;
if (child.nodeType !== Node.ELEMENT_NODE) {
e = child.parentElement;
}
if (!e.classList.contains("target")) {
ok(false, `${id} is reporting this unexpected child as a target: ${e.tagName} id=${e.id}`);
}
}
}
SimpleTest.finish();
};
window.onload = runTests;
</script>
</head>
<body onload="runTests()">
<e id="no_children"></e>
<e id="one_child_no_overflow">
<c></c>
</e>
<e id="margin_left_overflow">
<c class="target" style="margin-left:100px">abcd</c>
</e>
<e id="transform_overflow">
<c class="target" style="transform: translate(50px)">abcd</c>
</e>
<e id="nested_overflow">
<c>
<c class="target" style="margin-left:100px">abcd</c>
</c>
</e>
<e id="intermediate_overflow">
<c class="fixedSize target" style="margin-left:100px">
<c></c>
</c>
</e>
<e id="multiple_overflow_at_different_depths">
<c class="fixedSize target" style="margin-left:100px">
<c></c>
</c>
<c style="margin-left:100px">
<c class="target">abcd</c>
</c>
</e>
</body>
</html>
|
