fix(create-grid): correctly compute stack order for non-positioned stacking contexts

lib/commons/dom/create-grid.js

@@ -255,26 +255,41 @@ function getStackingOrder(vNode, parentVNode) {
     vNode.getComputedStylePropertyValue('position') !== 'static';
   const floated = vNode.getComputedStylePropertyValue('float') !== 'none';
 
-  // 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
+  if (isStackingContext(vNode, parentVNode)) {
+    // if an element creates a stacking context, 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
     // that point (step #5 and step #8)
     // @see https://www.w3.org/Style/css2-updates/css2/zindex.html
-    while (stackingOrder.find(value => value % 1 !== 0)) {
-      const index = stackingOrder.findIndex(value => value % 1 !== 0);
-      stackingOrder.splice(index, 1);
+    const index = stackingOrder.findIndex(
+      value => (value < 1 && value > 0.2) || value === 0
+    );
+    if (index !== -1) {
+      stackingOrder.splice(index, stackingOrder.length - index);
+    }
+
+    // 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))
+    ) {
+      stackingOrder.push(parseInt(zIndex));
+    }
+    // since many things can create a new stacking context without position or
+    // z-index, we need to know the order in the dom to sort them by. Use the
+    // nodeIndex property to create a number less than the "fake" stacks from
+    // positioned or floated elements but still larger than 0
+    // 10 pad gives us the ability to sort up to 1B nodes (padStart does not
+    // exist in ie11)
+    else {
+      let float = vNode.nodeIndex.toString();
+      while (float.length < 10) {
+        float = '0' + float;
+      }
+      stackingOrder.push(parseFloat('0.' + float));
     }
-    stackingOrder[stackingOrder.length - 1] = parseInt(zIndex);
-  }
-  if (isStackingContext(vNode, parentVNode)) {
-    stackingOrder.push(0);
   }
   // if a positioned element has z-index: auto or 0 (step #8), or if
   // a non-positioned floating element (step #5), treat it as its

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

@@ -399,6 +399,25 @@ describe('dom.getElementStack', () => {
       assert.deepEqual(stack, ['5', 'target', '4', '3', '2', '1', 'fixture']);
     });
 
+    it('should correctly position opacity elements and positioned elements', () => {
+      fixture.innerHTML = `
+        <div id="1" style="opacity: 0.9;">
+          <div id="2" style="position: relative; z-index: 2">
+           <h1 id="target">Hello World</h1>
+          </div>
+        </div>
+        <div id="3" style="opacity: 0.8;">
+          <div id="4" style="position: absolute; top: 20px; z-index: -1;">
+            <div id="5" style="height: 40px; width: 100vw; background: red"></div>
+          </div>
+        </div>
+      `;
+      axe.testUtils.flatTreeSetup(fixture);
+      const target = fixture.querySelector('#target');
+      const stack = mapToIDs(getElementStack(target));
+      assert.deepEqual(stack, ['5', '4', 'target', '2', '1', 'fixture']);
+    });
+
     it('should return empty array for hidden elements', () => {
       fixture.innerHTML =
         '<main id="1">' +