Merge pull request #9131 from fredj/opacity_cmp

Don't use strict comparison with style.opacity

src/ol/layer/Base.js

@@ -91,7 +91,7 @@ class BaseLayer extends BaseObject {
       layer: this,
       managed: true
     });
-    state.opacity = clamp(this.getOpacity(), 0, 1);
+    state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1);
     state.sourceState = this.getSourceState();
     state.visible = this.getVisible();
     state.extent = this.getExtent();

src/ol/layer/Layer.js

@@ -35,7 +35,7 @@ import SourceState from '../source/State.js';
 /**
  * @typedef {Object} State
  * @property {import("./Base.js").default} layer
- * @property {number} opacity
+ * @property {number} opacity Opacity, the value is rounded to two digits to appear after the decimal point.
  * @property {SourceState} sourceState
  * @property {boolean} visible
  * @property {boolean} managed

src/ol/renderer/canvas/ImageLayer.js

@@ -149,7 +149,7 @@ class CanvasImageLayerRenderer extends CanvasLayerRenderer {
     }
 
     const opacity = layerState.opacity;
-    if (opacity !== canvas.style.opacity) {
+    if (opacity !== parseFloat(canvas.style.opacity)) {
       canvas.style.opacity = opacity;
     }
 

src/ol/renderer/canvas/TileLayer.js

@@ -303,7 +303,7 @@ class CanvasTileLayerRenderer extends CanvasLayerRenderer {
     }
 
     const opacity = layerState.opacity;
-    if (opacity !== canvas.style.opacity) {
+    if (opacity !== parseFloat(canvas.style.opacity)) {
       canvas.style.opacity = opacity;
     }
 

src/ol/renderer/canvas/VectorLayer.js

@@ -180,7 +180,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     this.postRender(context, frameState);
 
     const opacity = layerState.opacity;
-    if (opacity !== canvas.style.opacity) {
+    if (opacity !== parseFloat(canvas.style.opacity)) {
       canvas.style.opacity = opacity;
     }
 

src/ol/renderer/canvas/VectorTileLayer.js

@@ -508,7 +508,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     }
 
     const opacity = layerState.opacity;
-    if (opacity !== canvas.style.opacity) {
+    if (opacity !== parseFloat(canvas.style.opacity)) {
       canvas.style.opacity = opacity;
     }
 

src/ol/renderer/webgl/PointsLayer.js

@@ -252,7 +252,7 @@ class WebGLPointsLayerRenderer extends LayerRenderer {
     const canvas = this.helper_.getCanvas();
 
     const opacity = layerState.opacity;
-    if (opacity !== canvas.style.opacity) {
+    if (opacity !== parseFloat(canvas.style.opacity)) {
       canvas.style.opacity = opacity;
     }
 

test/spec/ol/layer/layer.test.js

@@ -162,14 +162,14 @@ describe('ol.layer.Layer', function() {
     });
 
     it('returns a layerState from the properties values', function() {
-      layer.setOpacity(0.3);
+      layer.setOpacity(1 / 3);
       layer.setVisible(false);
       layer.setMaxResolution(500);
       layer.setMinResolution(0.25);
       layer.setZIndex(10);
       expect(layer.getLayerState()).to.eql({
         layer: layer,
-        opacity: 0.3,
+        opacity: 0.33,
         visible: false,
         managed: true,
         sourceState: 'ready',