test_overflowing-children.html (3374B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 Test InspectorUtils.GetOverflowingChildrenOfElement in various cases 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test InspectorUtils.GetOverflowingChildrenOfElement</title> 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 <style> 11 /* "e" is our custom tag name for "element" */ 12 e { 13 background: lightgray; 14 display: inline-block; 15 margin: 10px; 16 padding: 0; 17 border: 0; 18 width: 100px; 19 height: 100px; 20 overflow: auto; 21 } 22 23 /* "c" is our custom tag name for "child" */ 24 c { 25 display: block; 26 background: green; 27 } 28 29 .fixedSize { 30 width: 10px; 31 height: 10px; 32 } 33 34 .target { 35 background: red; 36 } 37 </style> 38 39 <script> 40 'use strict'; 41 42 SimpleTest.waitForExplicitFinish(); 43 const InspectorUtils = SpecialPowers.InspectorUtils; 44 45 const CASES = [ 46 {id: "no_children", expected: 0}, 47 {id: "one_child_no_overflow", expected: 0}, 48 {id: "margin_left_overflow", expected: 1}, 49 {id: "transform_overflow", expected: 1}, 50 {id: "nested_overflow", expected: 1}, 51 {id: "intermediate_overflow", expected: 1}, 52 {id: "multiple_overflow_at_different_depths", expected: 2}, 53 ]; 54 55 function runTests() { 56 // Assign each child element to an inner id so each of them can be identified for testing. 57 Array.from(document.getElementsByTagName('c')).forEach((e, i) => {e.id = `inner${i}`}); 58 59 for (const {id, expected} of CASES) { 60 info(`Checking element id ${id}.`); 61 62 const element = document.getElementById(id); 63 if (!element) { 64 ok(false, `Expected to find element with id ${id}.`); 65 continue; 66 } 67 const overflowing_children = InspectorUtils.getOverflowingChildrenOfElement(element); 68 69 is(overflowing_children.length, expected, `${id} has the expected number of children.`); 70 71 // Check that each child has the "target" class. Otherwise, we're getting the 72 // wrong children. We don't check each child with a test function, because we 73 // don't want to needlessly inflate the number of test functions in the log. 74 // But if we find a child that *doesn't* have the class "target", we report 75 // that as a test failure. 76 for (const child of overflowing_children) { 77 // child is a Node, but not necessarily an Element. We want to get the containing 78 // Element so that we can use its classList, tagName, and id properties. 79 let e = child; 80 if (child.nodeType !== Node.ELEMENT_NODE) { 81 e = child.parentElement; 82 } 83 if (!e.classList.contains("target")) { 84 ok(false, `${id} is reporting this unexpected child as a target: ${e.tagName} id=${e.id}`); 85 } 86 } 87 } 88 89 SimpleTest.finish(); 90 }; 91 window.onload = runTests; 92 </script> 93 </head> 94 <body onload="runTests()"> 95 96 <e id="no_children"></e> 97 98 <e id="one_child_no_overflow"> 99 <c></c> 100 </e> 101 102 <e id="margin_left_overflow"> 103 <c class="target" style="margin-left:100px">abcd</c> 104 </e> 105 106 <e id="transform_overflow"> 107 <c class="target" style="transform: translate(50px)">abcd</c> 108 </e> 109 110 <e id="nested_overflow"> 111 <c> 112 <c class="target" style="margin-left:100px">abcd</c> 113 </c> 114 </e> 115 116 <e id="intermediate_overflow"> 117 <c class="fixedSize target" style="margin-left:100px"> 118 <c></c> 119 </c> 120 </e> 121 122 <e id="multiple_overflow_at_different_depths"> 123 <c class="fixedSize target" style="margin-left:100px"> 124 <c></c> 125 </c> 126 <c style="margin-left:100px"> 127 <c class="target">abcd</c> 128 </c> 129 </e> 130 </body> 131 </html>