Rendering broken when data-driven fill-pattern references missing sprites

[vakila]

h/t to Community partner University of Luxembourg for discovering this one (cc @mikelmaron )

mapbox-gl-js version: any (tested with 0.50.0+, demo with 1.5.1)

browser: probably any (Tested with Firefox & Chrome)

Steps to Trigger Behavior

1. Add a fill layer with a data-driven fill-pattern paint property (in our example, each feature has a "pattern" property with the pattern icon name)
2. Provide an invalid value (e.g. "") for at least one of the target feature patterns

Link to Demonstration

https://jsfiddle.net/3ax2w97p

Expected Behavior

Either:

• The entire layer/map does not render, with an appropriate error
• The feature(s) with the broken pattern does not render, but features with valid patterns render properly, e.g.:

Actual Behavior

Rendering is broken - the exact nature of the breakage seems to vary based on where features with broken patterns fall in the tile rendering order.

Some features render with incorrect fill pattern and/or incorrect geometry - in our example we see both:

• Feature with missing pattern (Oregon) renders with the pattern of another feature (Washington)
• Feature with valid pattern (California) renders improperly, clipped at tile boundary

Interestingly the order in which features appear in the source seems to have an impact. For example, if states appear in the geojson data in the order [California, Oregon, Washington] we get the output above, but in order [Washington, Oregon, California] we get:

Tile rendering order seems also to matter somehow.

cc @ahk

[mikelmaron]

Thank you for diagnosing the issue @vakila. I've recommended the workarounds for them (either filtering data to just the property they're mapping, or provide a fallback value)

[vakila]

Seems this also happens with line layers: #8331

[SnailBones]

Closing as this seems to be fixed in v1.13.0 and later, behavior is now consistent with your Expected Behavior image. Here's a demo.