12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
- /**
- * Checks whether a parent element visually overlaps a rectangle, either directly or via scrolling.
- * @method visuallyOverlaps
- * @memberof axe.commons.dom
- * @instance
- * @param {DOMRect} rect
- * @param {Element} parent
- * @return {boolean} True if rect is visually contained within parent
- */
- function visuallyOverlaps(rect, parent) {
- var parentRect = parent.getBoundingClientRect();
- var parentTop = parentRect.top;
- var parentLeft = parentRect.left;
- var parentScrollArea = {
- top: parentTop - parent.scrollTop,
- bottom: parentTop - parent.scrollTop + parent.scrollHeight,
- left: parentLeft - parent.scrollLeft,
- right: parentLeft - parent.scrollLeft + parent.scrollWidth
- };
- //In theory, we should just be able to look at the scroll area as a superset of the parentRect,
- //but that's not true in Firefox
- if (
- (rect.left > parentScrollArea.right && rect.left > parentRect.right) ||
- (rect.top > parentScrollArea.bottom && rect.top > parentRect.bottom) ||
- (rect.right < parentScrollArea.left && rect.right < parentRect.left) ||
- (rect.bottom < parentScrollArea.top && rect.bottom < parentRect.top)
- ) {
- return false;
- }
- var style = window.getComputedStyle(parent);
- if (rect.left > parentRect.right || rect.top > parentRect.bottom) {
- return (
- style.overflow === 'scroll' ||
- style.overflow === 'auto' ||
- parent instanceof window.HTMLBodyElement ||
- parent instanceof window.HTMLHtmlElement
- );
- }
- return true;
- }
- export default visuallyOverlaps;
|