fix(color-contrast): correctly calculate contrast of flex/grid items …

…with z-index (#3884)

* fix(color-contrast): correctly calculate contrast of flex/grid items with z-index

* Update test/integration/rules/color-contrast/color-contrast.html

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

* Update test/commons/dom/get-element-stack.js

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>

* 🤖 Automated formatting fixes

* suggestions

* no inline flex/grid (with space)

* in test too

Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
Co-authored-by: straker <straker@users.noreply.github.com>

lib/commons/dom/create-grid.js

@@ -221,25 +221,27 @@ function isStackingContext(vNode, parentVNode) {
   }
 
   // a flex item or gird item with a z-index value other than "auto", that is the parent element display: flex|inline-flex|grid|inline-grid,
-  if (zIndex !== 'auto' && parentVNode) {
-    const parentDsiplay = parentVNode.getComputedStylePropertyValue('display');
-    if (
-      [
-        'flex',
-        'inline-flex',
-        'inline flex',
-        'grid',
-        'inline-grid',
-        'inline grid'
-      ].includes(parentDsiplay)
-    ) {
-      return true;
-    }
+  if (zIndex !== 'auto' && isFlexOrGridContainer(parentVNode)) {
+    return true;
   }
 
   return false;
 }
 
+/**
+ * Determine if element is a flex or grid container.
+ * @param {VirtualNode} vNode
+ * @return {Boolean}
+ */
+function isFlexOrGridContainer(vNode) {
+  if (!vNode) {
+    return false;
+  }
+
+  const display = vNode.getComputedStylePropertyValue('display');
+  return ['flex', 'inline-flex', 'grid', 'inline-grid'].includes(display);
+}
+
 /**
  * Determine the stacking order of an element. The stacking order is an array of
  * zIndex values for each stacking context parent.
@@ -253,7 +255,13 @@ function getStackingOrder(vNode, parentVNode) {
     vNode.getComputedStylePropertyValue('position') !== 'static';
   const floated = vNode.getComputedStylePropertyValue('float') !== 'none';
 
-  if (positioned && !['auto', '0'].includes(zIndex)) {
+  // flex and grid items can use z-index even if position: static
+  // @see https://www.w3.org/TR/css-flexbox-1/#painting
+  // @see https://www.w3.org/TR/css-grid-1/#z-order
+  if (
+    !['auto', '0'].includes(zIndex) &&
+    (positioned || isFlexOrGridContainer(parentVNode))
+  ) {
     // if a positioned element has a z-index > 0, find the first
     // true stack (not a "fake" stack created from positioned or
     // floated elements without a z-index) and create a new stack at