☰

cypress-visibility

Code - github/cypress-io/cypress - to check if an element is visible

目前为 2024-01-03 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.cn-greasyfork.org/scripts/482857/1305426/cypress-visibility.js 

  1. // ==UserScript==
  2. // @name          cypress-visibility
  3. // @namespace     flomk.userscripts
  4. // @version       1.3
  5. // @description   Code - github/cypress-io/cypress - to check if an element is visible
  6. // @author        flomk
  7. // @grant         none
  8. // @require       https://unpkg.com/lodash
  9. // @include       *
  10. // @connect       unpkg.com
  11. // ==/UserScript==
  12.  
  13. ((global, factory) => {
  14.     global = typeof globalThis !== 'undefined' ? globalThis : global || self;
  15.     factory(global.cypressVisibility={});
  16. })(this, exports => {
  17.     const $document = (() => {
  18.         const docNode = Node.DOCUMENT_NODE;
  19.         const docFragmentNode = Node.DOCUMENT_FRAGMENT_NODE;
  20.         const isDocument = (obj) => {
  21.             try {
  22.                 let node = obj;
  23.                 return (node === null || node === void 0 ? void 0 : node.nodeType) === docNode || (node === null || node === void 0 ? void 0 : node.nodeType) === docFragmentNode;
  24.             }
  25.             catch (error) {
  26.                 return false;
  27.             }
  28.         };
  29.         const hasActiveWindow = (doc) => {
  30.             if (navigator.appCodeName === 'Mozilla' && !doc.location) return false;
  31.             return !!doc.defaultView;
  32.         };
  33.         const getDocumentFromElement = (el) => {
  34.             if (isDocument(el)) return el;
  35.             return el.ownerDocument;
  36.         };
  37.         return {
  38.             isDocument,
  39.             hasActiveWindow,
  40.             getDocumentFromElement
  41.         }
  42.     })();
  43.  
  44.  
  45.     const $window = (() => {
  46.         const isWindow = function (obj) {
  47.             try {
  48.                 return Boolean(obj && obj.window === obj);
  49.             }
  50.             catch (error) {
  51.                 return false;
  52.             }
  53.         };
  54.         const getWindowByDocument = (doc) => {
  55.             // parentWindow for IE
  56.             return doc.defaultView || doc.parentWindow
  57.         }
  58.         const getWindowByElement = function (el) {
  59.             if ($window.isWindow(el)) {
  60.                 return el
  61.             }
  62.  
  63.             const doc = $document.getDocumentFromElement(el)
  64.  
  65.             return getWindowByDocument(doc)
  66.         }
  67.         return {
  68.             isWindow,
  69.             getWindowByElement
  70.         }
  71.     })();
  72.  
  73.     const $detached = (() => {
  74.  
  75.         const isAttached = function (elem) {
  76.             if ($window.isWindow(elem)) return true;
  77.  
  78.             const nodes = [];
  79.             if (elem) nodes.push(elem);
  80.             if (nodes.length === 0) return false;
  81.  
  82.             return nodes.every((node) => {
  83.                 const doc = $document.getDocumentFromElement(node);
  84.                 if (!$document.hasActiveWindow(doc)) return false;
  85.                 return node.isConnected;
  86.             });
  87.         };
  88.  
  89.         const isDetached = elem => !isAttached(elem)
  90.  
  91.         return {
  92.             isDetached
  93.         }
  94.     })();
  95.  
  96.     const $utils = (() => {
  97.         function switchCase(value, casesObj, defaultKey = 'default') {
  98.             if (_.has(casesObj, value)) return _.result(casesObj, value);
  99.             if (_.has(casesObj, defaultKey)) return _.result(casesObj, defaultKey);
  100.             const keys = _.keys(casesObj);
  101.             throw new Error(`The switch/case value: '${value}' did not match any cases: ${keys.join(', ')}.`);
  102.         }
  103.  
  104.         const stringify = (el, form = 'long') => {
  105.             // if we are formatting the window object
  106.             if ($window.isWindow(el)) return '<window>';
  107.  
  108.             // if we are formatting the document object
  109.             if ($document.isDocument(el)) return '<document>';
  110.  
  111.             // convert this to jquery if its not already one
  112.             // const $el = $jquery.wrap(el);
  113.  
  114.             const long = () => {
  115.                 const str = el.cloneNode().outerHTML
  116.  
  117.                 const text = _.chain(el.textContent).clean().truncate({ length: 10 }).value();
  118.                 const children = el.children.length;
  119.  
  120.                 if (children) return str.replace('></', '>...</');
  121.  
  122.                 if (text) return str.replace('></', `>${text}</`);
  123.  
  124.                 return str;
  125.             };
  126.  
  127.             const short = () => {
  128.                 const id = el.id;
  129.                 const klass = el.getAttribute('class');
  130.                 let str = el.tagName.toLowerCase();
  131.  
  132.                 if (id) str += `#${id}`;
  133.  
  134.                 // using attr here instead of class because
  135.                 // svg's return an SVGAnimatedString object
  136.                 // instead of a normal string when calling
  137.                 // the property 'class'
  138.                 if (klass) str += `.${klass.split(/\s+/).join('.')}`;
  139.  
  140.                 // if we have more than one element,
  141.                 // format it so that the user can see there's more
  142.                 // if ($el.length > 1) {
  143.                 //     return `[ <${str}>, ${$el.length - 1} more... ]`;
  144.                 // }
  145.  
  146.                 return `<${str}>`;
  147.             };
  148.  
  149.             return switchCase(form, {
  150.                 long,
  151.                 short
  152.             });
  153.         };
  154.         return { stringify }
  155.     })();
  156.  
  157.     const $contenteditable = (() => {
  158.         const isContentEditable = (el) => {
  159.             return $nativeProps.getNativeProp(el, 'isContentEditable') || $document.getDocumentFromElement(el).designMode === 'on';
  160.         };
  161.  
  162.         const isDesignModeDocumentElement = el => {
  163.             return isElement(el) && $elementHelpers.getTagName(el) === 'html' && isContentEditable(el)
  164.         }
  165.  
  166.         return {
  167.             isDesignModeDocumentElement
  168.         }
  169.     })();
  170.  
  171.     const $complexElements = (() => {
  172.         const fixedOrStickyRe = /(fixed|sticky)/;
  173.  
  174.         const focusableSelectors = [
  175.             'a[href]',
  176.             'area[href]',
  177.             'input:not([disabled])',
  178.             'select:not([disabled])',
  179.             'textarea:not([disabled])',
  180.             'button:not([disabled])',
  181.             'iframe',
  182.             '[tabindex]',
  183.             '[contenteditable]'
  184.         ];
  185.         const isFocusable = elem => focusableSelectors.some(sel => elem.matches(sel)) || $contenteditable.isDesignModeDocumentElement(elem);
  186.  
  187.         const getFirstFixedOrStickyPositionParent = elem => {
  188.             if (isUndefinedOrHTMLBodyDoc(elem)) return null;
  189.  
  190.             if (fixedOrStickyRe.test(getComputedStyle(elem).position)) return elem;
  191.  
  192.             /* walk up the tree until we find an element with a fixed/sticky position */
  193.             return $find.findParent(elem, node => {
  194.  
  195.                 if (node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) return null
  196.                 else if (fixedOrStickyRe.test(getComputedStyle(node).position)) return node;
  197.  
  198.                 return null;
  199.             });
  200.         };
  201.  
  202.         const elOrAncestorIsFixedOrSticky = elem => {
  203.             return !!getFirstFixedOrStickyPositionParent(elem);
  204.         };
  205.         return {
  206.             isFocusable,
  207.             elOrAncestorIsFixedOrSticky
  208.         }
  209.     })();
  210.  
  211.  
  212.     const $shadow = (() => {
  213.         const isShadowRoot = (maybeRoot) => {
  214.             return (maybeRoot === null || maybeRoot === void 0 ? void 0 : maybeRoot.toString()) === '[object ShadowRoot]';
  215.         };
  216.         const isWithinShadowRoot = (node) => {
  217.             return isShadowRoot(node.getRootNode());
  218.         };
  219.         const getShadowElementFromPoint = (node, x, y) => {
  220.             var _a;
  221.             const nodeFromPoint = (_a = node === null || node === void 0 ? void 0 : node.shadowRoot) === null || _a === void 0 ? void 0 : _a.elementFromPoint(x, y);
  222.             if (!nodeFromPoint || nodeFromPoint === node)
  223.                 return node;
  224.             return getShadowElementFromPoint(nodeFromPoint, x, y);
  225.         };
  226.  
  227.         return {
  228.             isWithinShadowRoot,
  229.             getShadowElementFromPoint
  230.         }
  231.     })();
  232.  
  233.  
  234.     const $find = (() => {
  235.         const getParentNode = el => {
  236.             // if the element has a direct parent element,
  237.             // simply return it.
  238.             if (el.parentElement) return el.parentElement;
  239.  
  240.             const root = el.getRootNode();
  241.  
  242.             // if the element is inside a shadow root,
  243.             // return the host of the root.
  244.             if (root && $shadow.isWithinShadowRoot(el)) return root.host;
  245.  
  246.             return null;
  247.         };
  248.  
  249.         const getParent = elem => getParentNode(elem);
  250.  
  251.         const findParent = (el, condition) => {
  252.             const collectParent = node => {
  253.                 const parent = getParentNode(node);
  254.  
  255.                 if (!parent) return null;
  256.  
  257.                 const parentMatchingCondition = condition(parent, node);
  258.  
  259.                 if (parentMatchingCondition) return parentMatchingCondition;
  260.  
  261.                 return collectParent(parent);
  262.             };
  263.  
  264.             return collectParent(el);
  265.         };
  266.         const isUndefinedOrHTMLBodyDoc = elem => {
  267.             return !elem || elem.matches('body,html') || $document.isDocument(elem);
  268.         };
  269.  
  270.         const getAllParents = (el, untilSelectorOrEl) => {
  271.             const collectParents = (parents, node) => {
  272.                 const parent = getParentNode(node);
  273.                 const selOrElemMatch = _.isString(untilSelectorOrEl) ? parent.matches(untilSelectorOrEl) : parent === untilSelectorOrEl;
  274.                 // if (!parent || (untilSelectorOrEl && parent.matches(untilSelectorOrEl))) return parents;
  275.                 if (!parent || (untilSelectorOrEl && selOrElemMatch)) return parents;
  276.                 return collectParents(parents.concat(parent), parent);
  277.             };
  278.             return collectParents([], el);
  279.         };
  280.         const isAncestor = (elem, maybeAncestor) => {
  281.             return getAllParents(elem).indexOf(maybeAncestor) >= 0;
  282.         };
  283.         const isChild = (elem, maybeChild) => {
  284.             return Array.from(elem.children).indexOf(maybeChild) >= 0;
  285.         };
  286.         const isDescendent = (elem1, elem2) => {
  287.             if (!elem2) return false;
  288.             if (elem1 === elem2) return true;
  289.             return (findParent(elem2, node => {
  290.                 if (node === elem1) return node;
  291.             }) === elem1);
  292.         };
  293.  
  294.         const getTagName = el => {
  295.             const tagName = el.tagName || '';
  296.             return tagName.toLowerCase();
  297.         };
  298.         const getFirstParentWithTagName = (elem, tagName) => {
  299.             if (isUndefinedOrHTMLBodyDoc(elem) || !tagName) return null;
  300.             if (getTagName(elem) === tagName) return elem;
  301.             return findParent(elem, node => {
  302.                 if (getTagName(node) === tagName) return node;
  303.                 return null;
  304.             });
  305.         };
  306.  
  307.         const elementFromPoint = (doc, x, y) => {
  308.             let elFromPoint = doc.elementFromPoint(x, y);
  309.             return $shadow.getShadowElementFromPoint(elFromPoint, x, y);
  310.         };
  311.         
  312.         
  313.         return {
  314.             isAncestor,
  315.             isChild,
  316.             isDescendent,
  317.             isUndefinedOrHTMLBodyDoc,
  318.             getParent,
  319.             findParent,
  320.             elementFromPoint,
  321.             getFirstParentWithTagName,
  322.             getAllParents
  323.         }
  324.     })();
  325.  
  326.  
  327.     const $elementHelpers = (() => {
  328.         const getTagName = el => {
  329.             const tagName = el.tagName || '';
  330.             return tagName.toLowerCase();
  331.         };
  332.         const isElement = function (obj) {
  333.             try {
  334.                 return Boolean(obj && _.isElement(obj));
  335.             }
  336.             catch (error) {
  337.                 return false;
  338.             }
  339.         };
  340.         const isInput = (el) => getTagName(el) === 'input';
  341.         const isTextarea = (el) => getTagName(el) === 'textarea';
  342.         const isSelect = (el) => getTagName(el) === 'select';
  343.         const isButton = (el) => getTagName(el) === 'button';
  344.         const isBody = (el) => getTagName(el) === 'body';
  345.         const isHTML = el => getTagName(el) === 'html';
  346.         const isOption = el => getTagName(el) === 'option';
  347.         const isOptgroup = el => getTagName(el) === 'optgroup';
  348.         const isSvg = function (el) {
  349.             try {
  350.                 return 'ownerSVGElement' in el;
  351.             }
  352.             catch (error) {
  353.                 return false;
  354.             }
  355.         };
  356.         return {
  357.             isSvg,
  358.             isBody,
  359.             isHTML,
  360.             isOption,
  361.             isElement,
  362.             isOptgroup,
  363.             isButton,
  364.             isSelect,
  365.             isTextarea,
  366.             isInput
  367.         }
  368.     })();
  369.  
  370.  
  371.     const $nativeProps = (() => {
  372.         const descriptor = (klass, prop) => {
  373.             const desc = Object.getOwnPropertyDescriptor(window[klass].prototype, prop);
  374.             if (desc === undefined) {
  375.                 throw new Error(`Error, could not get property descriptor for ${klass}  ${prop}. This should never happen`);
  376.             }
  377.             return desc;
  378.         };
  379.         const _isContentEditable = function () {
  380.             if ($elementHelpers.isSvg(this)) return false;
  381.             return descriptor('HTMLElement', 'isContentEditable').get;
  382.         };
  383.         const _getValue = function () {
  384.             if ($elementHelpers.isInput(this)) return descriptor('HTMLInputElement', 'value').get;
  385.             if ($elementHelpers.isTextarea(this)) return descriptor('HTMLTextAreaElement', 'value').get;
  386.             if ($elementHelpers.isSelect(this)) return descriptor('HTMLSelectElement', 'value').get;
  387.             if ($elementHelpers.isButton(this)) return descriptor('HTMLButtonElement', 'value').get;
  388.             return descriptor('HTMLOptionElement', 'value').get;
  389.         };
  390.         const _getSelectionStart = function () {
  391.             if ($elementHelpers.isInput(this)) return descriptor('HTMLInputElement', 'selectionStart').get;
  392.             if ($elementHelpers.isTextarea(this)) return descriptor('HTMLTextAreaElement', 'selectionStart').get;
  393.             throw new Error('this should never happen, cannot get selectionStart');
  394.         };
  395.         const _getSelectionEnd = function () {
  396.             if ($elementHelpers.isInput(this)) return descriptor('HTMLInputElement', 'selectionEnd').get;
  397.             if ($elementHelpers.isTextarea(this)) return descriptor('HTMLTextAreaElement', 'selectionEnd').get;
  398.             throw new Error('this should never happen, cannot get selectionEnd');
  399.         };
  400.         const _getType = function () {
  401.             if ($elementHelpers.isInput(this)) return descriptor('HTMLInputElement', 'type').get;
  402.             if ($elementHelpers.isButton(this)) return descriptor('HTMLButtonElement', 'type').get;
  403.             throw new Error('this should never happen, cannot get type');
  404.         };
  405.         const _getMaxLength = function () {
  406.             if ($elementHelpers.isInput(this)) return descriptor('HTMLInputElement', 'maxLength').get;
  407.             if ($elementHelpers.isTextarea(this)) return descriptor('HTMLTextAreaElement', 'maxLength').get;
  408.             throw new Error('this should never happen, cannot get maxLength');
  409.         };
  410.         const nativeGetters = {
  411.             value: _getValue,
  412.             isContentEditable: _isContentEditable,
  413.             isCollapsed: descriptor('Selection', 'isCollapsed').get,
  414.             selectionStart: _getSelectionStart,
  415.             selectionEnd: _getSelectionEnd,
  416.             type: _getType,
  417.             activeElement: descriptor('Document', 'activeElement').get,
  418.             body: descriptor('Document', 'body').get,
  419.             frameElement: Object.getOwnPropertyDescriptor(window, 'frameElement').get,
  420.             maxLength: _getMaxLength,
  421.         };
  422.         const getNativeProp = function (obj, prop) {
  423.             const nativeProp = nativeGetters[prop];
  424.             if (!nativeProp) {
  425.                 const props = _.keys(nativeGetters).join(', ');
  426.                 throw new Error(`attempted to use a native getter prop called: ${prop}. Available props are: ${props}`);
  427.             }
  428.             let retProp = nativeProp.call(obj, prop);
  429.             if (_.isFunction(retProp)) {
  430.                 retProp = retProp.call(obj, prop);
  431.             }
  432.             return retProp;
  433.         };
  434.  
  435.         return {
  436.             getNativeProp
  437.         }
  438.     })();
  439.  
  440.  
  441.     const $elements = {
  442.         ...$find,
  443.         ...$elementHelpers,
  444.         ...$complexElements,
  445.         ...$detached,
  446.         ...$utils,
  447.         ...$nativeProps
  448.     };
  449.  
  450.     const $transform = (() => {
  451.         const existsInvisibleBackface = (list) => {
  452.             return !!_.find(list, { backfaceVisibility: 'hidden' });
  453.         };
  454.         
  455.         const extractTransformInfo = (el) => {
  456.             const style = getComputedStyle(el);
  457.             const backfaceVisibility = style.getPropertyValue('backface-visibility');
  458.             if (backfaceVisibility === '') return null;
  459.             return {
  460.                 backfaceVisibility,
  461.                 transformStyle: style.getPropertyValue('transform-style'),
  462.                 transform: style.getPropertyValue('transform'),
  463.             };
  464.         };
  465.         
  466.         const numberRegex = /-?[0-9]+(?:\.[0-9]+)?(?:[eE][+-]?[0-9]+)?/g;
  467.         const defaultNormal = [0, 0, 1];
  468.         const viewVector = [0, 0, -1];
  469.         const identityMatrix3D = [
  470.             1, 0, 0, 0,
  471.             0, 1, 0, 0,
  472.             0, 0, 1, 0,
  473.             0, 0, 0, 1,
  474.         ];
  475.         const TINY_NUMBER = 1e-5;
  476.         
  477.         const toMatrix3d = (m2d) => {
  478.             return [
  479.                 m2d[0], m2d[1], 0, 0,
  480.                 m2d[2], m2d[3], 0, 0,
  481.                 0, 0, 1, 0,
  482.                 m2d[4], m2d[5], 0, 1,
  483.             ];
  484.         };
  485.         
  486.         const parseMatrix3D = (transform) => {
  487.             if (transform === 'none') return identityMatrix3D;
  488.             if (transform.startsWith('matrix3d')) {
  489.                 const matrix = transform.substring(8).match(numberRegex).map((n) => {
  490.                     return parseFloat(n);
  491.                 });
  492.                 return matrix;
  493.             }
  494.             return toMatrix3d(transform.match(numberRegex).map((n) => parseFloat(n)));
  495.         };
  496.         
  497.         const nextPreserve3d = (i, list) => {
  498.             return i + 1 < list.length && list[i + 1].transformStyle === 'preserve-3d';
  499.         };
  500.         const finalNormal = (startIndex, list) => {
  501.             let i = startIndex;
  502.             let normal = findNormal(parseMatrix3D(list[i].transform));
  503.             while (nextPreserve3d(i, list)) {
  504.                 i++;
  505.                 normal = findNormal(parseMatrix3D(list[i].transform), normal);
  506.             }
  507.             return normal;
  508.         };
  509.         
  510.         
  511.         const checkBackface = (normal) => {
  512.             let dot = viewVector[2] * normal[2];
  513.             if (Math.abs(dot) < TINY_NUMBER) {
  514.                 dot = 0;
  515.             }
  516.             return dot >= 0;
  517.         };
  518.         const elIsBackface = (list) => {
  519.             if (list.length > 1 && list[1].transformStyle === 'preserve-3d') {
  520.                 if (list[0].backfaceVisibility === 'hidden') {
  521.                     let normal = finalNormal(0, list);
  522.                     if (checkBackface(normal)) return true;
  523.                 }
  524.                 else {
  525.                     if (list[1].backfaceVisibility === 'hidden') {
  526.                         if (list[0].transform === 'none') {
  527.                             let normal = finalNormal(1, list);
  528.                             if (checkBackface(normal)) return true;
  529.                         }
  530.                     }
  531.                     let normal = finalNormal(0, list);
  532.                     return isElementOrthogonalWithView(normal);
  533.                 }
  534.             }
  535.             else {
  536.                 for (let i = 0; i < list.length; i++) {
  537.                     if (i > 0 && list[i].transformStyle === 'preserve-3d') {
  538.                         continue;
  539.                     }
  540.                     if (list[i].backfaceVisibility === 'hidden' && list[i].transform.startsWith('matrix3d')) {
  541.                         let normal = findNormal(parseMatrix3D(list[i].transform));
  542.                         if (checkBackface(normal)) return true;
  543.                     }
  544.                 }
  545.             }
  546.             return false;
  547.         };
  548.         
  549.         const extractTransformInfoFromElements = (elem, list = []) => {
  550.             const info = extractTransformInfo(elem);
  551.             if (info) {
  552.                 list.push(info);
  553.             }
  554.             const parent = $elements.getParent(elem);
  555.             if ($document.isDocument(parent) || parent === null) return list;
  556.             return extractTransformInfoFromElements(parent, list);
  557.         };
  558.         
  559.         const isElementOrthogonalWithView = (normal) => {
  560.             const dot = viewVector[2] * normal[2];
  561.             return Math.abs(dot) < TINY_NUMBER;
  562.         };
  563.         
  564.         const toUnitVector = (v) => {
  565.             const length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);
  566.             return [v[0] / length, v[1] / length, v[2] / length];
  567.         };
  568.         
  569.         const findNormal = (matrix, normal = defaultNormal) => {
  570.             const m = matrix;
  571.             const v = normal;
  572.             const computedNormal = [
  573.                 m[0] * v[0] + m[4] * v[1] + m[8] * v[2],
  574.                 m[1] * v[0] + m[5] * v[1] + m[9] * v[2],
  575.                 m[2] * v[0] + m[6] * v[1] + m[10] * v[2],
  576.             ];
  577.             return toUnitVector(computedNormal);
  578.         };
  579.         
  580.         const is3DMatrixScaledTo0 = (m3d) => {
  581.             const xAxisScaledTo0 = m3d[0] === 0 && m3d[4] === 0 && m3d[8] === 0;
  582.             const yAxisScaledTo0 = m3d[1] === 0 && m3d[5] === 0 && m3d[9] === 0;
  583.             const zAxisScaledTo0 = m3d[2] === 0 && m3d[6] === 0 && m3d[10] === 0;
  584.             if (xAxisScaledTo0 || yAxisScaledTo0 || zAxisScaledTo0) return true;
  585.             return false;
  586.         };
  587.         
  588.         const isTransformedToZero = ({ transform }) => {
  589.             if (transform === 'none') return false;
  590.             if (transform.startsWith('matrix3d')) {
  591.                 const matrix3d = parseMatrix3D(transform);
  592.                 if (is3DMatrixScaledTo0(matrix3d)) return true;
  593.                 const normal = findNormal(matrix3d);
  594.                 return isElementOrthogonalWithView(normal);
  595.             }
  596.             const m = parseMatrix2D(transform);
  597.             if (is2DMatrixScaledTo0(m)) return true;
  598.             return false;
  599.         };
  600.         
  601.         const parseMatrix2D = (transform) => {
  602.             return transform.match(numberRegex).map((n) => parseFloat(n));
  603.         };
  604.         
  605.         const is2DMatrixScaledTo0 = (m) => {
  606.             const xAxisScaledTo0 = m[0] === 0 && m[2] === 0;
  607.             const yAxisScaledTo0 = m[1] === 0 && m[3] === 0;
  608.             if (xAxisScaledTo0 || yAxisScaledTo0) return true;
  609.             return false;
  610.         };
  611.         
  612.         const elIsTransformedToZero = (list) => {
  613.             if (list.some((info) => info.transformStyle === 'preserve-3d')) {
  614.                 const normal = finalNormal(0, list);
  615.                 return isElementOrthogonalWithView(normal);
  616.             }
  617.             return !!_.find(list, (info) => isTransformedToZero(info));
  618.         };
  619.         
  620.         const detectVisibility = (elem) => {
  621.             const list = extractTransformInfoFromElements(elem);
  622.             if (existsInvisibleBackface(list)) return elIsBackface(list) ? 'backface' : 'visible';
  623.             return elIsTransformedToZero(list) ? 'transformed' : 'visible';
  624.         };
  625.         return {
  626.             detectVisibility
  627.         }
  628.     })();
  629.  
  630.     const $coordinates = (() => {
  631.         const getElementAtPointFromViewport = (doc, x, y) => $elements.elementFromPoint(doc, x, y);
  632.         const isAutIframe = (win) => {
  633.             const parent = win.parent;
  634.             return $window.isWindow(parent) && !$elements.getNativeProp(parent, 'frameElement');
  635.         };
  636.         const getFirstValidSizedRect = (el) => {
  637.             return _.find(el.getClientRects(), (rect) => rect.width && rect.height) || el.getBoundingClientRect();
  638.         };
  639.  
  640.         const getCoordsByPosition = (left, top, xPosition = 'center', yPosition = 'center') => {
  641.             const getLeft = () => {
  642.                 switch (xPosition) {
  643.                     case 'left': return Math.ceil(left);
  644.                     case 'center': return Math.floor(left);
  645.                     case 'right': return Math.floor(left) - 1;
  646.                 }
  647.             };
  648.             const getTop = () => {
  649.                 switch (yPosition) {
  650.                     case 'top': return Math.ceil(top);
  651.                     case 'center': return Math.floor(top);
  652.                     case 'bottom': return Math.floor(top) - 1;
  653.                 }
  654.             };
  655.             return {
  656.                 x: getLeft(),
  657.                 y: getTop(),
  658.             };
  659.         };
  660.  
  661.         const getCenterCoordinates = (rect) => {
  662.             const x = rect.left + (rect.width / 2);
  663.             const y = rect.top + (rect.height / 2);
  664.             return getCoordsByPosition(x, y, 'center', 'center');
  665.         };
  666.  
  667.         const getElementPositioning = (el) => {
  668.             let autFrame;
  669.             const win = $window.getWindowByElement(el);
  670.             const rect = getFirstValidSizedRect(el);
  671.             const getRectFromAutIframe = (rect) => {
  672.                 let x = 0;
  673.                 let y = 0;
  674.                 let curWindow = win;
  675.                 let frame;
  676.                 while ($window.isWindow(curWindow) && !isAutIframe(curWindow) && curWindow.parent !== curWindow) {
  677.                     frame = $elements.getNativeProp(curWindow, 'frameElement');
  678.                     if (curWindow && frame) {
  679.                         const frameRect = frame.getBoundingClientRect();
  680.                         x += frameRect.left;
  681.                         y += frameRect.top;
  682.                     }
  683.                     curWindow = curWindow.parent;
  684.                 }
  685.                 autFrame = curWindow;
  686.                 return {
  687.                     left: x + rect.left,
  688.                     top: y + rect.top,
  689.                     right: x + rect.right,
  690.                     bottom: y + rect.top,
  691.                     width: rect.width,
  692.                     height: rect.height,
  693.                 };
  694.             };
  695.             const rectFromAut = getRectFromAutIframe(rect);
  696.             const rectFromAutCenter = getCenterCoordinates(rectFromAut);
  697.             const rectCenter = getCenterCoordinates(rect);
  698.             const topCenter = Math.ceil(rectCenter.y);
  699.             const leftCenter = Math.ceil(rectCenter.x);
  700.             return {
  701.                 scrollTop: el.scrollTop,
  702.                 scrollLeft: el.scrollLeft,
  703.                 width: rect.width,
  704.                 height: rect.height,
  705.                 fromElViewport: {
  706.                     doc: win.document,
  707.                     top: rect.top,
  708.                     left: rect.left,
  709.                     right: rect.right,
  710.                     bottom: rect.bottom,
  711.                     topCenter,
  712.                     leftCenter,
  713.                 },
  714.                 fromElWindow: {
  715.                     top: Math.ceil(rect.top + win.scrollY),
  716.                     left: rect.left + win.scrollX,
  717.                     topCenter: Math.ceil(topCenter + win.scrollY),
  718.                     leftCenter: leftCenter + win.scrollX,
  719.                 },
  720.                 fromAutWindow: {
  721.                     top: Math.ceil(rectFromAut.top + autFrame.scrollY),
  722.                     left: rectFromAut.left + autFrame.scrollX,
  723.                     topCenter: Math.ceil(rectFromAutCenter.y + autFrame.scrollY),
  724.                     leftCenter: rectFromAutCenter.x + autFrame.scrollX,
  725.                 },
  726.             };
  727.         };
  728.         return {
  729.             getElementPositioning,
  730.             getElementAtPointFromViewport
  731.         }
  732.     })();
  733.     const {
  734.         // find
  735.         isAncestor,
  736.         isChild,
  737.         isDescendent,
  738.         isUndefinedOrHTMLBodyDoc,
  739.         getParent,
  740.         getFirstParentWithTagName,
  741.         getAllParents,
  742.  
  743.         // elementHelpers
  744.         isElement,
  745.         isBody,
  746.         isHTML,
  747.         isOption,
  748.         isOptgroup,
  749.  
  750.         // complexElements
  751.         elOrAncestorIsFixedOrSticky,
  752.         isFocusable,
  753.  
  754.         // detached
  755.         isDetached,
  756.  
  757.  
  758.         // utils
  759.         stringify: stringifyElement
  760.     } = $elements;
  761.  
  762.  
  763.     const isZeroLengthAndTransformNone = (width, height, transform) => (width <= 0 && transform === 'none') || (height <= 0 && transform === 'none');
  764.     const isZeroLengthAndOverflowHidden = (width, height, overflowHidden) => (width <= 0 && overflowHidden) || (height <= 0 && overflowHidden);
  765.     const elOffsetWidth = elem => elem.offsetWidth;
  766.  
  767.     const elOffsetHeight = elem => elem.offsetHeight;
  768.  
  769.     const elHasNoOffsetWidthOrHeight = elem => (elOffsetWidth(elem) <= 0) || (elOffsetHeight(elem) <= 0);
  770.     const elHasVisibilityHidden = elem => getComputedStyle(elem).getPropertyValue('visibility') === 'hidden';
  771.     const elHasVisibilityCollapse = elem => getComputedStyle(elem).getPropertyValue('visibility') === 'collapse';
  772.     const elHasVisibilityHiddenOrCollapse = ($el) => elHasVisibilityHidden($el) || elHasVisibilityCollapse($el);
  773.     const elHasOpacityZero = elem => getComputedStyle(elem).getPropertyValue('opacity') === '0';
  774.     const elHasDisplayNone = elem => getComputedStyle(elem).getPropertyValue('display') === 'none';
  775.     const elHasDisplayInline = elem => getComputedStyle(elem).getPropertyValue('display') === 'inline';
  776.     const elHasOverflowHidden = elem => {
  777.         const style = getComputedStyle(elem);
  778.         const cssOverflow = [
  779.             style.getPropertyValue('overflow'),
  780.             style.getPropertyValue('overflow-y'),
  781.             style.getPropertyValue('overflow-x')
  782.         ];
  783.         return cssOverflow.includes('hidden');
  784.     };
  785.     const elHasPositionRelative = elem => getComputedStyle(elem).getPropertyValue('position') === 'relative';
  786.     const elHasPositionAbsolute = elem => getComputedStyle(elem).getPropertyValue('position') === 'absolute';
  787.     const ensureEl = (el, methodName) => {
  788.         if (!isElement(el)) {
  789.             throw new Error(`\`${methodName}\` failed because it requires a DOM element. The subject received was: \`${el}\``);
  790.         }
  791.     };
  792.     const elHasNoEffectiveWidthOrHeight = (el) => {
  793.         const style = getComputedStyle(el);
  794.         const transform = style.getPropertyValue('transform');
  795.         const width = elOffsetWidth(el);
  796.         const height = elOffsetHeight(el);
  797.         const overflowHidden = elHasOverflowHidden(el);
  798.         return isZeroLengthAndTransformNone(width, height, transform) || isZeroLengthAndOverflowHidden(width, height, overflowHidden) || (el.getClientRects().length <= 0);
  799.     };
  800.     const elDescendentsHavePositionFixedOrAbsolute = function (parent, child) {
  801.         const parents = getAllParents(child, parent);
  802.         const arr = [...parents, child];
  803.         return arr.some(elem => fixedOrAbsoluteRe.test(getComputedStyle(elem).getPropertyValue('position')))
  804.         // const $els = $jquery.wrap(parents).add(child);
  805.         // return _.some($els.get(), (el) => {
  806.         //     return fixedOrAbsoluteRe.test($jquery.wrap(el).css('position'));
  807.         // });
  808.     };
  809.     const elIsHiddenByAncestors = (elem, checkOpacity, origEl = elem) => {
  810.         const parent = getParent(elem);
  811.         if (isUndefinedOrHTMLBodyDoc(parent)) return false;
  812.         if (elHasOpacityZero(parent) && checkOpacity) return true;
  813.         if (elHasOverflowHidden(parent) && elHasNoEffectiveWidthOrHeight(parent)) return !elDescendentsHavePositionFixedOrAbsolute(parent, origEl);
  814.         return elIsHiddenByAncestors(parent, checkOpacity, origEl);
  815.     };
  816.     const elAtCenterPoint = elem => {
  817.         const doc = $document.getDocumentFromElement(elem);
  818.         const elProps = $coordinates.getElementPositioning(elem);
  819.         const { topCenter, leftCenter } = elProps.fromElViewport;
  820.         const el = $coordinates.getElementAtPointFromViewport(doc, leftCenter, topCenter);
  821.         if (el) return el
  822.     };
  823.     const elIsNotElementFromPoint = elem => {
  824.         const elAtPoint = elAtCenterPoint(elem);
  825.         if (isDescendent(elem, elAtPoint)) return false;
  826.         if ((getComputedStyle(elem).getPropertyValue('pointer-events') === 'none' || getComputedStyle(elem.parentElement).getPropertyValue('pointer-events') === 'none') &&
  827.             (elAtPoint && isAncestor(elem, elAtPoint))) return false;
  828.         return true;
  829.     };
  830.     const elHasClippableOverflow = elem => {
  831.         const style = getComputedStyle(elem)
  832.         return OVERFLOW_PROPS.includes(style.getPropertyValue('overflow')) || OVERFLOW_PROPS.includes(style.getPropertyValue('overflow-y')) || OVERFLOW_PROPS.includes(style.getPropertyValue('overflow-x'));
  833.     };
  834.     const canClipContent = (elem, ancestor) => {
  835.         if (!elHasClippableOverflow(ancestor)) return false;
  836.         const offsetParent = elem.offsetParent;
  837.         if (!elHasPositionRelative(elem) && isAncestor(ancestor, offsetParent)) return false;
  838.         if (elHasPositionAbsolute(offsetParent) && isChild(ancestor, offsetParent)) return false;
  839.         return true;
  840.     };
  841.     const elIsOutOfBoundsOfAncestorsOverflow = (elem, ancestor = getParent(elem)) => {
  842.         if (isUndefinedOrHTMLBodyDoc(ancestor)) return false;
  843.         const elProps = $coordinates.getElementPositioning(elem);
  844.         if (canClipContent(elem, ancestor)) {
  845.             const ancestorProps = $coordinates.getElementPositioning(ancestor);
  846.             if ((elProps.fromElWindow.left > (ancestorProps.width + ancestorProps.fromElWindow.left)) ||
  847.                 ((elProps.fromElWindow.left + elProps.width) < ancestorProps.fromElWindow.left) ||
  848.                 (elProps.fromElWindow.top > (ancestorProps.height + ancestorProps.fromElWindow.top)) ||
  849.                 ((elProps.fromElWindow.top + elProps.height) < ancestorProps.fromElWindow.top)) return true;
  850.         }
  851.         return elIsOutOfBoundsOfAncestorsOverflow(elem, getParent(ancestor));
  852.     };
  853.     const isHiddenByAncestors = (elem, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) => {
  854.         ensureEl(elem, methodName);
  855.         if (elIsHiddenByAncestors(elem, options.checkOpacity)) return true;
  856.  
  857.         // removed because I am just trying to find out if the element is "visible" outside the viewport
  858.         // if (elOrAncestorIsFixedOrSticky(elem)) return elIsNotElementFromPoint(elem);
  859.         return elIsOutOfBoundsOfAncestorsOverflow(elem);
  860.     };
  861.     const fixedOrAbsoluteRe = /(fixed|absolute)/;
  862.     const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto'];
  863.     const isVisible = elem => !isHidden(elem, 'isVisible()');
  864.     const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true }) => {
  865.         if (isStrictlyHidden(el, methodName, options, isHidden)) return true;
  866.         return isHiddenByAncestors(el, methodName, options);
  867.     };
  868.     const isStrictlyHidden = (elem, methodName = 'isStrictlyHidden()', options = { checkOpacity: true }, recurse) => {
  869.         ensureEl(elem, methodName);
  870.  
  871.         if (isBody(elem) || isHTML(elem)) return false;
  872.         if (isOption(elem) || isOptgroup(elem)) {
  873.             if (elHasDisplayNone(elem)) return true;
  874.             const select = getFirstParentWithTagName(elem, 'select');
  875.             if (select) return recurse ? recurse(select, methodName, options) : isStrictlyHidden(select, methodName, options);
  876.         }
  877.         if (elHasNoEffectiveWidthOrHeight(elem)) {
  878.             if (elHasDisplayInline(elem)) return !elHasVisibleChild(elem);
  879.             return true;
  880.         }
  881.         if (elHasVisibilityHiddenOrCollapse(elem)) return true;
  882.         // try {
  883.         if ($transform.detectVisibility(elem) !== 'visible') return true;
  884.         // } catch(err){}
  885.         if (elHasOpacityZero(elem) && options.checkOpacity) return true;
  886.         return false;
  887.     };
  888.     const isW3CRendered = elem => !(parentHasDisplayNone(elem) || getComputedStyle(elem).getPropertyValue('visibility') === 'hidden');
  889.     const isW3CFocusable = elem => isFocusable(elem) && isW3CRendered(elem);
  890.     const elHasVisibleChild = elem => Array.from(elem.children).some(child => isVisible(child));
  891.     const parentHasNoOffsetWidthOrHeightAndOverflowHidden = function ($el) {
  892.         if (isUndefinedOrHTMLBodyDoc($el)) return false;
  893.         if (elHasOverflowHidden($el) && elHasNoEffectiveWidthOrHeight($el)) return $el;
  894.         return parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent($el));
  895.     };
  896.     const parentHasDisplayNone = elem =>  {
  897.         if ($document.isDocument(elem) || elem === null) return false;
  898.         if (elHasDisplayNone(elem)) return elem;
  899.         return parentHasDisplayNone(getParent(elem));
  900.     };
  901.     const parentHasVisibilityHidden = elem => {
  902.         if ($document.isDocument(elem) || elem === null) return false;
  903.         if (elHasVisibilityHidden(elem)) return elem;
  904.         return parentHasVisibilityHidden(getParent(elem));
  905.     };
  906.     const parentHasVisibilityCollapse = elem => {
  907.         if ($document.isDocument(elem) || elem === null) return false;
  908.         if (elHasVisibilityCollapse(elem)) return elem;
  909.         return parentHasVisibilityCollapse(getParent(elem));
  910.     };
  911.     const parentHasOpacityZero = elem => {
  912.         if ($document.isDocument(elem) || elem === null) return false;
  913.         if (elHasOpacityZero(elem)) return elem;
  914.         return parentHasOpacityZero(getParent(elem));
  915.     };
  916.     const getReasonIsHidden = (elem, options = { checkOpacity: true }) => {
  917.         const node = stringifyElement(elem, 'short');
  918.         let width = elOffsetWidth(elem);
  919.         let height = elOffsetHeight(elem);
  920.         let $parent;
  921.         let parentNode;
  922.         if (elHasDisplayNone(elem)) return `This element \`${node}\` is not visible because it has CSS property: \`display: none\``;
  923.         if ($parent = parentHasDisplayNone(getParent(elem))) {
  924.             parentNode = stringifyElement($parent, 'short');
  925.             return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`display: none\``;
  926.         }
  927.         if ($parent = parentHasVisibilityHidden(getParent(elem))) {
  928.             parentNode = stringifyElement($parent, 'short');
  929.             return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: hidden\``;
  930.         }
  931.         if ($parent = parentHasVisibilityCollapse(getParent(elem))) {
  932.             parentNode = stringifyElement($parent, 'short');
  933.             return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`visibility: collapse\``;
  934.         }
  935.         if (isDetached(elem)) return `This element \`${node}\` is not visible because it is detached from the DOM`;
  936.         if (elHasVisibilityHidden(elem)) return `This element \`${node}\` is not visible because it has CSS property: \`visibility: hidden\``;
  937.         if (elHasVisibilityCollapse(elem)) return `This element \`${node}\` is not visible because it has CSS property: \`visibility: collapse\``;
  938.         if (elHasOpacityZero(elem) && options.checkOpacity) return `This element \`${node}\` is not visible because it has CSS property: \`opacity: 0\``;
  939.  
  940.         if (($parent = parentHasOpacityZero(getParent(elem))) && options.checkOpacity) {
  941.             parentNode = stringifyElement($parent, 'short');
  942.             return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`opacity: 0\``;
  943.         }
  944.         if (elHasNoOffsetWidthOrHeight(elem)) return `This element \`${node}\` is not visible because it has an effective width and height of: \`${width} x ${height}\` pixels.`;
  945.         const transformResult = $transform.detectVisibility(elem);
  946.         if (transformResult === 'transformed') return `This element \`${node}\` is not visible because it is hidden by transform.`;
  947.         if (transformResult === 'backface') return `This element \`${node}\` is not visible because it is rotated and its backface is hidden.`;
  948.         if ($parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden(getParent(elem))) {
  949.             parentNode = stringifyElement($parent, 'short');
  950.             width = elOffsetWidth($parent);
  951.             height = elOffsetHeight($parent);
  952.             return `This element \`${node}\` is not visible because its parent \`${parentNode}\` has CSS property: \`overflow: hidden\` and an effective width and height of: \`${width} x ${height}\` pixels.`;
  953.         }
  954.         if (elOrAncestorIsFixedOrSticky(elem)) {
  955.             if (elIsNotElementFromPoint(elem)) {
  956.                 const covered = stringifyElement(elAtCenterPoint(elem));
  957.                 if (covered) return `This element \`${node}\` is not visible because it has CSS property: \`position: fixed\` and it's being covered by another element:\n\n\`${covered}\``;
  958.                 return `This element \`${node}\` is not visible because its ancestor has \`position: fixed\` CSS property and it is overflowed by other elements. How about scrolling to the element with \`cy.scrollIntoView()\`?`;
  959.             }
  960.         }
  961.         else {
  962.             if (elIsOutOfBoundsOfAncestorsOverflow(elem)) return `This element \`${node}\` is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: \`hidden\`, \`scroll\` or \`auto\``;
  963.         }
  964.         return `This element \`${node}\` is not visible.`;
  965.     };
  966.  
  967.     Object.assign(exports, {
  968.         isVisible,
  969.         isHidden,
  970.         isStrictlyHidden,
  971.         isHiddenByAncestors,
  972.         getReasonIsHidden,
  973.         isW3CFocusable,
  974.         isW3CRendered
  975.     })
  976. })