tor-browser

test_offsets.js (9368B)

---

var scrollbarWidth = 17,
 scrollbarHeight = 17;

function testElements(baseid, callback) {
 scrollbarWidth = scrollbarHeight = gcs($("scrollbox-test"), "width");

 var elements = $(baseid).getElementsByTagName("*");
 for (var t = 0; t < elements.length; t++) {
   var element = elements[t];

   // Ignore presentational content inside menus
   if (
     element.closest("menu, menuitem") &&
     element.closest("[aria-hidden=true]")
   ) {
     continue;
   }

   // Ignore content inside a <button>  This can be removed if/when
   // button switches to use shadow DOM.
   let buttonParent = element.closest("button");
   if (buttonParent && buttonParent !== element) {
     continue;
   }

   testElement(element);
 }

 var nonappended = document.createElementNS(
   "http://www.w3.org/1999/xhtml",
   "div"
 );
 nonappended.id = "nonappended";
 nonappended.setAttribute("_offsetParent", "null");
 testElement(nonappended);

 checkScrolledElement($("scrollbox"), $("scrollchild"));

 var div = $("noscroll");
 div.scrollLeft = 10;
 div.scrollTop = 10;
 is(element.scrollLeft, 0, element.id + " scrollLeft after nonscroll");
 is(element.scrollTop, 0, element.id + " scrollTop after nonscroll");

 callback();
}

function usesSVGLayout(e) {
 return e instanceof SVGElement && !(e instanceof SVGSVGElement);
}

function toNearestAppunit(v) {
 // 60 appunits per CSS pixel; round result to the nearest appunit
 return Math.round(v * 60) / 60;
}

function isEqualAppunits(a, b, msg) {
 is(toNearestAppunit(a), toNearestAppunit(b), msg);
}

function testElement(element) {
 var offsetParent = element.getAttribute("_offsetParent");
 offsetParent = $(
   offsetParent == "null" ? null : offsetParent ? offsetParent : "body"
 );

 var borderLeft = gcs(element, "borderLeftWidth");
 var borderTop = gcs(element, "borderTopWidth");
 var borderRight = gcs(element, "borderRightWidth");
 var borderBottom = gcs(element, "borderBottomWidth");
 var paddingLeft = gcs(element, "paddingLeft");
 var paddingTop = gcs(element, "paddingTop");
 var paddingRight = gcs(element, "paddingRight");
 var paddingBottom = gcs(element, "paddingBottom");
 var width = gcs(element, "width");
 var height = gcs(element, "height");

 if (element instanceof HTMLElement) {
   checkOffsetState(
     element,
     -10000,
     -10000,
     borderLeft + paddingLeft + width + paddingRight + borderRight,
     borderTop + paddingTop + height + paddingBottom + borderBottom,
     offsetParent,
     element.id
   );
 }

 var scrollWidth, scrollHeight, clientWidth, clientHeight;
 var doScrollCheck = true;
 {
   if (element.id == "scrollbox") {
     clientWidth = paddingLeft + width + paddingRight - scrollbarWidth;
     clientHeight = paddingTop + height + paddingBottom - scrollbarHeight;
   } else {
     clientWidth = paddingLeft + width + paddingRight;
     clientHeight = paddingTop + height + paddingBottom;
   }
   if (element.id == "overflow-visible") {
     scrollWidth = 200;
     scrollHeight = 201;
   } else if (
     element.scrollWidth > clientWidth ||
     element.scrollHeight > clientHeight
   ) {
     // The element overflows. Don't check scrollWidth/scrollHeight since the
     // above calculation is not correct.
     doScrollCheck = false;
   } else {
     scrollWidth = clientWidth;
     scrollHeight = clientHeight;
   }
 }

 if (doScrollCheck) {
   if (usesSVGLayout(element)) {
     checkScrollState(element, 0, 0, 0, 0, element.id);
   } else {
     checkScrollState(element, 0, 0, scrollWidth, scrollHeight, element.id);
   }
 }

 if (usesSVGLayout(element)) {
   checkClientState(element, 0, 0, 0, 0, element.id);
 } else {
   checkClientState(
     element,
     borderLeft,
     borderTop,
     clientWidth,
     clientHeight,
     element.id
   );
 }

 var boundingrect = element.getBoundingClientRect();
 isEqualAppunits(
   boundingrect.width,
   borderLeft + paddingLeft + width + paddingRight + borderRight,
   element.id + " bounding rect width"
 );
 isEqualAppunits(
   boundingrect.height,
   borderTop + paddingTop + height + paddingBottom + borderBottom,
   element.id + " bounding rect height"
 );
 isEqualAppunits(
   boundingrect.right - boundingrect.left,
   boundingrect.width,
   element.id + " bounding rect right"
 );
 isEqualAppunits(
   boundingrect.bottom - boundingrect.top,
   boundingrect.height,
   element.id + " bounding rect bottom"
 );

 var rects = element.getClientRects();
 if (element.id == "div-displaynone" || element.id == "nonappended") {
   is(rects.length, 0, element.id + " getClientRects empty");
 } else {
   is(rects[0].left, boundingrect.left, element.id + " getClientRects left");
   is(rects[0].top, boundingrect.top, element.id + " getClientRects top");
   is(
     rects[0].right,
     boundingrect.right,
     element.id + " getClientRects right"
   );
   is(
     rects[0].bottom,
     boundingrect.bottom,
     element.id + " getClientRects bottom"
   );
 }
}

function checkScrolledElement(element, child) {
 var elemrect = element.getBoundingClientRect();
 var childrect = child.getBoundingClientRect();

 var topdiff = childrect.top - elemrect.top;

 element.scrollTop = 20;
 is(element.scrollLeft, 0, element.id + " scrollLeft after vertical scroll");
 is(element.scrollTop, 20, element.id + " scrollTop after vertical scroll");
 // If the viewport has been transformed, then we might have scrolled to a subpixel value
 // that's slightly different from what we requested. After rounding, however, it should
 // be the same.
 is(
   Math.round(childrect.top - child.getBoundingClientRect().top),
   20,
   "child position after vertical scroll"
 );

 element.scrollTop = 0;
 is(
   element.scrollLeft,
   0,
   element.id + " scrollLeft after vertical scroll reset"
 );
 is(
   element.scrollTop,
   0,
   element.id + " scrollTop after vertical scroll reset"
 );
 // Scrolling back to the top should work precisely.
 is(
   child.getBoundingClientRect().top,
   childrect.top,
   "child position after vertical scroll reset"
 );

 element.scrollTop = 10;
 element.scrollTop = -30;
 is(
   element.scrollLeft,
   0,
   element.id + " scrollLeft after vertical scroll negative"
 );
 is(
   element.scrollTop,
   0,
   element.id + " scrollTop after vertical scroll negative"
 );
 is(
   child.getBoundingClientRect().top,
   childrect.top,
   "child position after vertical scroll negative"
 );

 element.scrollLeft = 18;
 is(
   element.scrollLeft,
   18,
   element.id + " scrollLeft after horizontal scroll"
 );
 is(element.scrollTop, 0, element.id + " scrollTop after horizontal scroll");
 is(
   Math.round(childrect.left - child.getBoundingClientRect().left),
   18,
   "child position after horizontal scroll"
 );

 element.scrollLeft = -30;
 is(
   element.scrollLeft,
   0,
   element.id + " scrollLeft after horizontal scroll reset"
 );
 is(
   element.scrollTop,
   0,
   element.id + " scrollTop after horizontal scroll reset"
 );
 is(
   child.getBoundingClientRect().left,
   childrect.left,
   "child position after horizontal scroll reset"
 );
}

function checkOffsetState(element, left, top, width, height, parent, testname) {
 checkCoords(element, "offset", left, top, width, height, testname);
 is(element.offsetParent, parent, testname + " offsetParent");
}

function checkScrollState(element, left, top, width, height, testname) {
 checkCoords(element, "scroll", left, top, width, height, testname);
}

function checkClientState(element, left, top, width, height, testname) {
 checkCoords(element, "client", left, top, width, height, testname);
}

function checkCoord(element, type, val, testname) {
 if (val != -10000) {
   is(element[type], Math.round(val), testname + " " + type);
 }
}

function checkCoordFuzzy(element, type, val, fuzz, testname) {
 if (val != -10000) {
   let v = element[type];
   ok(
     Math.abs(v - Math.round(val)) <= fuzz,
     `${testname} ${type}: ${v} vs. ${val}`
   );
 }
}

function checkCoords(element, type, left, top, width, height, testname) {
 checkCoord(element, type + "Left", left, testname);
 checkCoord(element, type + "Top", top, testname);

 if (type == "scroll") {
   // scrollWidth and scrollHeight can deviate by 1 pixel due to snapping.
   checkCoordFuzzy(element, type + "Width", width, 1, testname);
   checkCoordFuzzy(element, type + "Height", height, 1, testname);
 } else {
   checkCoord(element, type + "Width", width, testname);
   checkCoord(element, type + "Height", height, testname);
 }

 if (usesSVGLayout(element)) {
   return;
 }

 if (element.id == "outerpopup" && !element.parentNode.open) {
   // closed popup
   return;
 }

 if (element.id == "div-displaynone" || element.id == "nonappended") {
   // hidden elements
   ok(
     element[type + "Width"] == 0 && element[type + "Height"] == 0,
     element.id + " has zero " + type + " width and height"
   );
 }
}

function gcs(element, prop) {
 var propVal =
   usesSVGLayout(element) && (prop == "width" || prop == "height")
     ? element.getAttribute(prop)
     : getComputedStyle(element, "")[prop];
 if (propVal == "auto" || element.id == "nonappended") {
   return 0;
 }
 return parseFloat(propVal);
}