Filler plugin can have the wrong behavior when using null values

[charlesmass2]

There's an issue when using the filler plugin with the above/below options and null values.
I've created a unit test on my end to reproduce it easily :

test/fixtures/plugin.filler/line/boundary/above-below-line.json

  "debug": true,
    "config": {
        "type": "line",
        "data": {
            "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
            "datasets": [{
                "borderColor": "rgb(42, 90, 145)",
                "data": [4, 12, 30, 36, 45, 53, 68, 79, null, 18],
                "fill": {
                  "target": "+1",
                  "above": "rgba(4, 142, 43, 0.5)",
                  "below": "rgba(241, 49, 34, 0.5)"
                }
            }, {
                "borderColor": "#00ADEE",
                "data": [0, 0, 0, 0, 0, 0, 20, 108, null, 72],
                "fill": false
            }]
        },
        "options": {
            "responsive": false,
            "spanGaps": false,
            "scales": {
            },
            "elements": {
                "point": {
                    "radius": 0
                },
                "line": {
                    "cubicInterpolationMode": "monotone",
                    "borderColor": "transparent"
                }
            },
            "plugins": {
                "legend": false,
                "title": false,
                "tooltip": false
            }
        }
    },
    "options": {
        "canvas": {
            "height": 256,
            "width": 512
        }
    }
}

Expected Behavior

When I created this behavior, we would have expected this result :

I got this image by running the exact same unit test on commit 18e3bc0, which is the commit where this feature was merged.
You can reproduce this image by checking out 18e3bc0, installing gulp, and running gulp unittest.

Current Behavior

Right now, the config used in the unit test displays this chart :

Note that this happens because the two datasets have discontinuous lines.
If I replace the null values of the scond dataset with numbers, the filling works fine.

Possible Solution

I'd be happy to look into it if you want.
But since the code has had many changes since then, there might be a quicker solution.

After my first investigation, it seems that the clipping is the culprit, because with a few logs, the filling area seems allright.
The clipping area however seems to be built regardless of gaps between segments.

Steps to Reproduce

Create a simple unit test with the config above, and run npm run dev plugin.filler or npm test plugin.filler.
You may also want to checkout 18e3bc0 to reproduce the original behavior with the same config.

Context

Environment

• Chart.js version: latest (3.6.2 atm). The bug is reproducible at any version starting at 3.0.0
• Browser name and version: Chrome 96