fix(color-contrast): correctly determine color contrast for element t…

…hat exactly overlaps midpoint of node (#3565)

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

* fix firefox

* test

* debug

* remove only

* increase logs

* change test to not use floats

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

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

* Update test/checks/color/color-contrast.js

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

* move test

* fix test

* revert playground

* dont prettier other files

* fix?

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

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
@@ -126,11 +128,13 @@ export function getRectStack(grid, rect, recursed = false) {
 
         // 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 +161,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 +412,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