Port line-pattern underscaling/overscaling fix

[chloekraw]

Ticket for developers and customers: mapbox/mapbox-gl-js#9394
GL-JS PR: mapbox/mapbox-gl-js#9266
WIP branch: 0572a16

---

The change fixes overscaling/underscaling of line pattern as well as render differences between different physical pixel ratio sprites when used as line patterns.

Videos on mobile

• before: before.mov.zip
• after: after.mov.zip

Visual differences

The behavior is changed to match the following:

1. When the line pattern fits on a line smaller than its own resolution, we downscale while keeping the aspect ratio at integer zoom level
2. When the line pattern fits on a line larger than its own resolution, we upscale while keeping the aspect ratio at integer zoom level
3. When the line pattern has different pixel ratio attributes (1x, 2x, 3x...), the pattern screenspace resolution should remain stable (e.g. the physical resolution shouldn't impact the size at which the pattern is rendered but instead increase the quality of the visual while keeping its logical resolution)

The current behavior does not account for 1. and 3.

Before

underscale-2x@2x

underscale-3x@2x

overscale-1x@2x

overscale-2x@2x

After

underscale-2x@2x

underscale-3x@2x

overscale-1x@2x

overscale-2x@2x

cc/ @karimnaaji

[stale]

This issue has been automatically detected as stale because it has not had recent activity and will be archived. Thank you for your contributions.