Fix undefined behavior in fill_outline shaders (#4600)

src/shaders/fill_outline.fragment.glsl

@@ -8,7 +8,7 @@ void main() {
     #pragma mapbox: initialize lowp float opacity
 
     float dist = length(v_pos - gl_FragCoord.xy);
-    float alpha = smoothstep(1.0, 0.0, dist);
+    float alpha = 1.0 - smoothstep(0.0, 1.0, dist);
     gl_FragColor = outline_color * (alpha * opacity);
 
 #ifdef OVERDRAW_INSPECTOR

src/shaders/fill_outline_pattern.fragment.glsl

@@ -26,7 +26,7 @@ void main() {
     // find distance to outline for alpha interpolation
 
     float dist = length(v_pos - gl_FragCoord.xy);
-    float alpha = smoothstep(1.0, 0.0, dist);
+    float alpha = 1.0 - smoothstep(0.0, 1.0, dist);
 
 
     gl_FragColor = mix(color1, color2, u_mix) * alpha * opacity;

test/integration/render-tests/fill-outline-color/fill/style.json

@@ -0,0 +1,55 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "ignored": {
+        "js": "https://github.com/mapbox/mapbox-gl-js/issues/4601"
+      }
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              -13,
+              -13
+            ],
+            [
+              -10,
+              7
+            ],
+            [
+              10,
+              10
+            ],
+            [
+              7,
+              -10
+            ],
+            [
+              -13,
+              -13
+            ]
+          ]
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "fill",
+      "type": "fill",
+      "source": "geojson",
+      "paint": {
+        "fill-color": "#CCC",
+        "fill-outline-color": "#000"
+      }
+    }
+  ]
+}