Target-size performance problem for element with many overlapping nodes

[straker]

Running the target-size rule on the following html (which creates a tabpanel with a table with 20 rows, with each row containing links and buttons) causes the rule to be super slow. With even more rows and or clickable objects inside the table it can cause the rule to hang indefinitely.

<main>
  <div id="tabpanel" role="tabpanel" tabindex="0">
    <table id="tab-table"></table>
  </div>
</main>

<script>
  let html = '';
  for (let i = 0; i < 20; i++) {
    html += `
      <tr>
        <td><a href="#">Hello</a></td>
        <td>Hello</td>
        <td>Hello</td>
        <td>Hello</td>
        <td>Hello</td>
        <td>Hello</td>
        <td>Hello</td>
        <td><button>view</button></td>
        <td><button>download</button></td>
        <td><button>expand</button></td>
      </tr>
    `;
    document.querySelector('#tab-table').innerHTML = html;
  }
</script>

The main culprit is the splitRect function used by the target-offset check. The check passes it a list of ~80 rects that are obscuring the tabpanel target (each of the anchors and buttons). Split rects loops over this list and tries to split each one with the tabpanel rect, which can add up to 4 rects per split to the uniqueRects array. Do this 80 times and the uniqueRects array ends up with 37000+ rects.

We need to come up with a better way to split the larger rect with a bunch of smaller rects.

[dbjorge]

Neat problem. Reminds me of https://stackoverflow.com/a/6634668, though not exactly the same without reduction

[straker]

As a stop-gap to fix the problem, we're going to make the splitRects function exit early and return null if it detects more than some determined amount of uniqueRects. That way axe will be able to complete the scan and not freeze up. We'll then look into finding a better way to split rects that doesn't run into this problem in a later version.