Fix line distances breaking gradient across tile boundaries (#9220)

* Fix line line distances breaking gradients
Ensure scaled line distance is computed at least once when calculating the entire line distance, otherwise we hit a corner case where the distance isn't updated. Specifically when the beginning of the line doesn't have a sharp corner.
Fixes #8969

* Add render test for line gradient across tile boundaries

* Address review comments

src/data/bucket/line_bucket.js

@@ -231,6 +231,7 @@ class LineBucket implements Bucket {
             for (let i = 0; i < vertices.length - 1; i++) {
                 this.totalDistance += vertices[i].dist(vertices[i + 1]);
             }
+            this.updateScaledDistance();
         }
 
         const isPolygon = vectorTileFeatureTypes[feature.type] === 'Polygon';
@@ -526,9 +527,7 @@ class LineBucket implements Bucket {
         }
     }
 
-    updateDistance(prev: Point, next: Point) {
-        this.distance += prev.dist(next);
-
+    updateScaledDistance() {
         // Knowing the ratio of the full linestring covered by this tiled feature, as well
         // as the total distance (in tile units) of this tiled feature, and the distance
         // (in tile units) of the current vertex, we can determine the relative distance
@@ -537,6 +536,11 @@ class LineBucket implements Bucket {
             (this.clipStart + (this.clipEnd - this.clipStart) * this.distance / this.totalDistance)  * (MAX_LINE_DISTANCE - 1) :
             this.distance;
     }
+
+    updateDistance(prev: Point, next: Point) {
+        this.distance += prev.dist(next);
+        this.updateScaledDistance();
+    }
 }
 
 register('LineBucket', LineBucket, {omit: ['layers', 'patternFeatures']});

test/integration/render-tests/line-gradient/gradient-tile-boundaries/style.json

@@ -0,0 +1,56 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 128
+    }
+  },
+  "center": [
+    -77.02803308586635,
+    38.891047607560125
+  ],
+  "zoom": 18,
+  "sources": {
+    "gradient": {
+      "type": "geojson",
+      "data": {
+        "type": "Feature",
+        "properties": {},
+        "geometry": {
+          "type": "LineString",
+          "coordinates": [
+            [-77.028035, 38.890600 ],
+            [-77.028035, 38.891088 ]
+          ]
+        }
+      },
+      "lineMetrics": true
+    }
+  },
+  "layers": [
+    {
+      "id": "line",
+      "type": "line",
+      "source": "gradient",
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "paint": {
+        "line-width": 15,
+        "line-gradient": [
+          "interpolate",
+          ["linear"],
+          ["line-progress"],
+          0, "rgba(0, 0, 255, 0)",
+          0.1, "royalblue",
+          0.3, "cyan",
+          0.5, "lime",
+          0.7, "yellow",
+          1, "red"
+        ]
+      }
+    }
+  ]
+}