fix opacity interpolation for composition expressions (#8818)

fix #8817

The interpolation factor could be outside of the range 0..1 which could result in rendering errors.

src/data/program_configuration.js

@@ -6,6 +6,7 @@ import {supportsPropertyExpression} from '../style-spec/util/properties';
 import {register, serialize, deserialize} from '../util/web_worker_transfer';
 import {PossiblyEvaluatedPropertyValue} from '../style/properties';
 import {StructArrayLayout1f4, StructArrayLayout2f8, StructArrayLayout4f16, PatternLayoutArray} from './array_types';
+import {clamp} from '../util/util';
 
 import EvaluationParameters from '../style/evaluation_parameters';
 import FeaturePositionMap from './feature_position_map';
@@ -381,10 +382,9 @@ class CompositeExpressionBinder<T> implements Binder<T> {
 
     interpolationFactor(currentZoom: number) {
         if (this.useIntegerZoom) {
-            return this.expression.interpolationFactor(Math.floor(currentZoom), this.zoom, this.zoom + 1);
-        } else {
-            return this.expression.interpolationFactor(currentZoom, this.zoom, this.zoom + 1);
+            currentZoom = Math.floor(currentZoom);
         }
+        return clamp(this.expression.interpolationFactor(currentZoom, this.zoom, this.zoom + 1), 0, 1);
     }
 
     setUniforms(context: Context, uniform: Uniform<*>,

test/integration/render-tests/regressions/mapbox-gl-js#8817/style.json

@@ -0,0 +1,68 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "comment": "The `pauseSource` prevents new tiles from loading and forces the map to use tiles outside of their ideal zoom range.",
+      "operations": [
+          ["pauseSource", "geojson"],
+          ["setZoom", 2],
+          ["wait"]
+      ]
+    }
+  },
+  "zoom": 0,
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              -10,
+              -10
+            ],
+            [
+              -10,
+              10
+            ],
+            [
+              10,
+              10
+            ],
+            [
+              10,
+              -10
+            ],
+            [
+              -10,
+              -10
+            ]
+          ]
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "fill",
+      "type": "fill",
+      "source": "geojson",
+      "paint": {
+        "fill-antialias": false,
+        "fill-color": "green",
+        "fill-opacity": [
+            "interpolate",
+            ["linear"],
+            ["zoom"],
+            0.5,
+            0,
+            1,
+            ["match", ["get", "fakeproptotriggercompositeexpression"], "nope", 1, 1]
+        ]
+      }
+    }
+  ]
+}

test/suite_implementation.js

@@ -172,6 +172,9 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im
             // consistent local ideograph rendering using fixtures in all runs of the test suite.
             map.setStyle(operation[1], {localIdeographFontFamily: false});
             applyOperations(map, operations.slice(1), callback);
+        } else if (operation[0] === 'pauseSource') {
+            map.style.sourceCaches[operation[1]].pause();
+            applyOperations(map, operations.slice(1), callback);
         } else {
             map[operation[0]](...operation.slice(1));
             applyOperations(map, operations.slice(1), callback);