CP: Update one more frame after canvas source paused (#8130)

src/source/canvas_source.js

@@ -130,7 +130,10 @@ class CanvasSource extends ImageSource {
         };
 
         this.pause = function() {
-            this._playing = false;
+            if (this._playing) {
+                this.prepare();
+                this._playing = false;
+            }
         };
 
         this._finishLoading();

test/integration/render-tests/canvas/update/style.json

@@ -0,0 +1,57 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64,
+      "addFakeCanvas": {
+          "id": "fake-canvas",
+          "image": "./image/0.png"
+      },
+      "operations": [
+          ["wait"],
+          ["updateFakeCanvas", "canvas", "./image/1.png", "./image/0.png"]
+      ]
+    }
+  },
+  "center": [
+    -122.514426,
+    37.562984
+  ],
+  "zoom": 14,
+  "sources": {
+    "canvas": {
+      "type": "canvas",
+      "animate": false,
+      "coordinates": [
+        [
+          -122.51596391201019,
+          37.56238816766053
+        ],
+        [
+          -122.51467645168304,
+          37.56410183312965
+        ],
+        [
+          -122.51309394836426,
+          37.563391708549425
+        ],
+        [
+          -122.51423120498657,
+          37.56161849366671
+        ]
+      ],
+      "canvas": "fake-canvas"
+    }
+  },
+  "layers": [
+    {
+      "id": "canvas",
+      "type": "raster",
+      "source": "canvas",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}

test/suite_implementation.js

@@ -157,6 +157,16 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im
             map.addLayer(new customLayerImplementations[operation[1]](), operation[2]);
             map._render();
             applyOperations(map, operations.slice(1), callback);
+        } else if (operation[0] === 'updateFakeCanvas') {
+            const canvasSource = map.getSource(operation[1]);
+            canvasSource.play();
+            // update before pause should be rendered
+            updateFakeCanvas(window.document, options.addFakeCanvas.id, operation[2]);
+            canvasSource.pause();
+            // update after pause should not be rendered
+            updateFakeCanvas(window.document, options.addFakeCanvas.id, operation[3]);
+            map._render();
+            applyOperations(map, operations.slice(1), callback);
         } else if (operation[0] === 'setStyle') {
             // Disable local ideograph generation (enabled by default) for
             // consistent local ideograph rendering using fixtures in all runs of the test suite.
@@ -178,3 +188,9 @@ function createFakeCanvas(document, id, imagePath) {
     fakeCanvas.height = image.height;
     return fakeCanvas;
 }
+
+function updateFakeCanvas(document, id, imagePath) {
+    const fakeCanvas = document.getElementById(id);
+    const image = PNG.sync.read(fs.readFileSync(path.join(__dirname, './integration', imagePath)));
+    fakeCanvas.data = image.data;
+}