Fix dynamic background color

[kikuchan]

Try to fix #14894

[github-actions]

📦 Preview the website for this branch here: https://deploy-preview-14895--ol-site.netlify.app/.

[kikuchan]

I'm not sure what should happen if the background function returns undefined again in the test code, btw.

If you want something like this;

--- test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
+++ test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js
@@ -334,6 +334,7 @@ describe('ol/renderer/canvas/VectorTileLayer', function () {
           undefined,
           'rgba(255, 0, 0, 0.5)',
           'rgba(0, 0, 255, 0.5)',
+          undefined,
         ];

         expect(resolution).to.be(map.getView().getResolution());
@@ -349,6 +350,8 @@ describe('ol/renderer/canvas/VectorTileLayer', function () {
         expect(layer.getRenderer().container.style.backgroundColor).to.be(
           'rgba(0, 0, 255, 0.5)'
         );
+        map.renderSync();
+        expect(layer.getRenderer().container.style.backgroundColor).to.be('');
         done();
       });
     });

The patch would look like this;

--- src/ol/renderer/canvas/Layer.js
+++ src/ol/renderer/canvas/Layer.js
@@ -195,12 +195,8 @@ class CanvasLayerRenderer extends LayerRenderer {
       this.container = container;
       this.context = context;
     }
-    if (
-      !this.containerReused &&
-      backgroundColor &&
-      !this.container.style.backgroundColor
-    ) {
-      this.container.style.backgroundColor = backgroundColor;
+    if (!this.containerReused && this.container && this.container.style) {
+      this.container.style.backgroundColor = backgroundColor || null;
     }
   }

[ahocevar]

Thanks for your attempt to fix this, @kikuchan. The solution you chose changes the behavior in the case where multiple layers in the layer stack have a background configured. So I would suggest setting the style to null before the container is passed to the first layer renderer, and leave the rest of the code as it was before your changes.

[kikuchan]

Thank you for your reply!
How about this?

[ahocevar]

Excellent, thanks for your continued effort! I added one minor suggestion, which you might want to consider.

[kikuchan]

Thank you for the suggestion.
I had to change a test code because it used dummy container directly, and it failed with the change.

[ahocevar]

Excellent, thanks @kikuchan!

[kikuchan]

Thank you!