Appearance runtime change render tests

GitOrigin-RevId: 21d5b5145f6581f5815c0919ee0df51b8157c891

Author: woodroof

test/ignores/all.js

@@ -282,6 +282,9 @@ const skip = [
     // Not implemented, https://mapbox.atlassian.net/browse/GLJS-1591
     "render-tests/slots/inner-slot-before-outer",
     "render-tests/slots/mixed-slot-order-with-imports",
+
+    // https://mapbox.atlassian.net/browse/GLJS-1647
+    "render-tests/appearance/runtime-changes/property-change",
 ];
 
 export default {todo, skip};

test/integration/render-tests/appearance/runtime-changes/expression-change/expected.png

@@ -0,0 +1,71 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 64,
+      "width": 64,
+      "operations": [
+        ["wait"],
+        ["setLayerProperty", "test_layer", "appearances",
+          [
+            {
+              "condition": [">=", ["zoom"], 0],
+              "properties": {
+                "icon-image": "bank-12"
+              }
+            },
+            {
+              "condition": true,
+              "properties": {
+                "icon-image": "bakery-12"
+              }
+            }
+          ]
+        ]
+      ]
+    }
+  },
+  "camera": {"camera-projection": "orthographic"},
+  "sources": {
+    "test_source": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [
+                0,
+                0
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "test_layer",
+      "type": "symbol",
+      "source": "test_source",
+      "appearances": [
+        {
+          "condition": [">", ["zoom"], 2],
+          "properties": {
+            "icon-image": "bank-12"
+          }
+        },
+        {
+          "condition": true,
+          "properties": {
+            "icon-image": "bakery-12"
+          }
+        }
+      ]
+    }
+  ]
+}

test/integration/render-tests/appearance/runtime-changes/expression-change/style.json

@@ -0,0 +1,71 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 64,
+      "width": 64,
+      "operations": [
+        ["wait"],
+        ["setLayerProperty", "test_layer", "appearances",
+          [
+            {
+              "condition": ["<", ["zoom"], 2],
+              "properties": {
+                "icon-image": "bank-12"
+              }
+            },
+            {
+              "condition": ["<", ["zoom"], 1],
+              "properties": {
+                "icon-image": "bakery-12"
+              }
+            }
+          ]
+        ]
+      ]
+    }
+  },
+  "camera": {"camera-projection": "orthographic"},
+  "sources": {
+    "test_source": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [
+                0,
+                0
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "test_layer",
+      "type": "symbol",
+      "source": "test_source",
+      "appearances": [
+        {
+          "condition": ["<", ["zoom"], 1],
+          "properties": {
+            "icon-image": "bakery-12"
+          }
+        },
+        {
+          "condition": ["<", ["zoom"], 2],
+          "properties": {
+            "icon-image": "bank-12"
+          }
+        }
+      ]
+    }
+  ]
+}

test/integration/render-tests/appearance/runtime-changes/order-change/expected.png

@@ -0,0 +1,59 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 64,
+      "width": 64,
+      "operations": [
+        ["wait"],
+        ["setLayerProperty", "test_layer", "appearances",
+          [
+            {
+              "condition": ["<", ["zoom"], 1],
+              "properties": {
+                "icon-image": "bank-12"
+              }
+            }
+          ]
+        ]
+      ]
+    }
+  },
+  "camera": {"camera-projection": "orthographic"},
+  "sources": {
+    "test_source": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "geometry": {
+              "type": "Point",
+              "coordinates": [
+                0,
+                0
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/sprite",
+  "layers": [
+    {
+      "id": "test_layer",
+      "type": "symbol",
+      "source": "test_source",
+      "appearances": [
+        {
+          "condition": ["<", ["zoom"], 1],
+          "properties": {
+            "icon-image": "bakery-12"
+          }
+        }
+      ]
+    }
+  ]
+}