fix(color-contrast): correctly determine color contrast for element that exactly overlaps midpoint of node

lib/commons/dom/get-rect-stack.js

@@ -97,15 +97,17 @@ export function getRectStack(grid, rect, recursed = false) {
   // use center point of rect
   const x = rect.left + rect.width / 2;
   const y = rect.top + rect.height / 2;
+  const floorX = floor(x);
+  const floorY = floor(y);
 
   // NOTE: there is a very rare edge case in Chrome vs Firefox that can
   // return different results of `document.elementsFromPoint`. If the center
   // point of the element is <1px outside of another elements bounding rect,
   // Chrome appears to round the number up and return the element while Firefox
   // keeps the number as is and won't return the element. In this case, we
   // went with pixel perfect collision rather than rounding
-  const row = (y / gridSize) | 0;
-  const col = (x / gridSize) | 0;
+  const row = floor(y / gridSize);
+  const col = floor(x / gridSize);
 
   // we're making an assumption that there cannot be an element in the
   // grid which escapes the grid bounds. For example, if the grid is 4x4 there
@@ -124,13 +126,27 @@ export function getRectStack(grid, rect, recursed = false) {
         const rectX = clientRect.left;
         const rectY = clientRect.top;
 
+        if (gridCellNode.attr('id') === 'debugNode') {
+          console.log(JSON.stringify({
+            el: gridCellNode.actualNode.cloneNode(false).outerHTML,
+            y: y,
+            floorY: floorY,
+            'rectY': rectY,
+            height: clientRect.height,
+            'rectY+height': rectY + clientRect.height,
+            'floor(rectY+height)': floor(rectY + clientRect.height)
+          },null,2));
+        }
+
         // perform an AABB (axis-aligned bounding box) collision check for the
         // point inside the rect
+        // account for differences in how browsers handle floating point
+        // precision of bounding rects
         return (
-          x <= rectX + clientRect.width &&
-          x >= rectX &&
-          y <= rectY + clientRect.height &&
-          y >= rectY
+          floorX < floor(rectX + clientRect.width) &&
+          floorX >= floor(rectX) &&
+          floorY < floor(rectY + clientRect.height) &&
+          floorY >= floor(rectY)
         );
       });
     }) ?? [];
@@ -157,6 +173,11 @@ export function getRectStack(grid, rect, recursed = false) {
   return stack;
 }
 
+// equivalent to Math.floor(float) but is slightly faster
+function floor(float) {
+  return float | 0;
+}
+
 /**
  * Determine if node produces a stacking context.
  * References:
@@ -403,8 +424,9 @@ function visuallySort(a, b) {
 
     // bNode is a node that shares a host with some part of the a parent
     // shadow tree, find the aNode that shares the same host as bNode
-    aNode = boundaries.find(boundary => boundary.root === bNode.getRootNode())
-      .node;
+    aNode = boundaries.find(
+      boundary => boundary.root === bNode.getRootNode()
+    ).node;
 
     // sort child of shadow to it's host node by finding which element is
     // the child of the host and sorting it before the host