devtools/server/tests/chrome/test_overflowing-children.html

   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>