mozilla-central/devtools/server/tests/chrome/test_overflowing-children.html (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE HTML>
<html>
<!--
Test InspectorUtils.GetOverflowingChildrenOfElement in various cases
-->
<head>
<meta charset="utf-8">
<title>Test InspectorUtils.GetOverflowingChildrenOfElement</title>
<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>