Port icon-symbol-svg rendering tests

rendering/cases/icon-symbol-svg/main.js

@@ -0,0 +1,72 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import {Vector as VectorLayer, Tile as TileLayer} from '../../../src/ol/layer.js';
+import {Vector as VectorSource, XYZ} from '../../../src/ol/source.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Feature from '../../../src/ol/Feature.js';
+import {fromLonLat} from '../../../src/ol/proj.js';
+import {Style, Icon} from '../../../src/ol/style.js';
+
+const center = fromLonLat([8, 50]);
+
+const vectorSource = new VectorSource();
+let feature;
+
+// scales svg correctly
+feature = new Feature({
+  geometry: new Point(fromLonLat([3, 45]))
+});
+feature.setStyle(new Style({
+  image: new Icon({
+    src: '/data/me0.svg',
+    scale: 2
+  })
+}));
+vectorSource.addFeature(feature);
+
+// uses offset correctly
+feature = new Feature({
+  geometry: new Point(fromLonLat([3, 55]))
+});
+feature.setStyle(new Style({
+  image: new Icon({
+    src: '/data/me0.svg',
+    offset: [16, 0],
+    scale: 2
+  })
+}));
+vectorSource.addFeature(feature);
+
+// uses offset correctly if it is larger than size
+feature = new Feature({
+  geometry: new Point(fromLonLat([8, 55]))
+});
+feature.setStyle(new Style({
+  image: new Icon({
+    src: '/data/me0.svg',
+    offsetOrigin: 'bottom-left',
+    offset: [16, 0],
+    size: [64, 40]
+  })
+}));
+vectorSource.addFeature(feature);
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg'
+      })
+    }),
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 3
+  })
+});
+
+render();

rendering/data/me0.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="32"
+   height="20"
+   viewBox="0 0 32 19.999999"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="me0.svg"><metadata
+     id="metadata3776"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs3774" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1916"
+     inkscape:window-height="1033"
+     id="namedview3772"
+     showgrid="false"
+     inkscape:zoom="29.5"
+     inkscape:cx="7.3511697"
+     inkscape:cy="12.058448"
+     inkscape:window-x="0"
+     inkscape:window-y="45"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Layer_1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" /><g
+     id="g3754"
+     style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     transform="matrix(0.04324609,0,0,0.04111507,12.942501,-0.5123079)"><path
+       style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:25;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path3770"
+       d="m 256,25.6 c -95.4279,0 -172.8,77.3721 -172.8,172.8 0,95.4279 144,288 172.8,288 28.8,0 172.8,-192.5721 172.8,-288 C 428.8,102.9721 351.4279,25.6 256,25.6 Z m 0,288 c -63.5346,0 -115.2,-51.6942 -115.2,-115.2 0,-63.5058 51.6654,-115.2 115.2,-115.2 63.5346,0 115.2,51.6942 115.2,115.2 0,63.5058 -51.6654,115.2 -115.2,115.2 z"
+       inkscape:connector-curvature="0" /><polygon
+       style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-width:69.44444275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       transform="matrix(0.36,0,0,0.36,160.72934,103.79972)"
+       id="polygon3"
+       points="330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 259.216,29.942 "
+       stroke-miterlimit="10" /></g></svg>

test/rendering/ol/style/icon.test.js

@@ -1,117 +0,0 @@
-import Feature from '../../../../src/ol/Feature.js';
-import Point from '../../../../src/ol/geom/Point.js';
-import Map from '../../../../src/ol/Map.js';
-import WebGLMap from '../../../../src/ol/WebGLMap.js';
-import View from '../../../../src/ol/View.js';
-import VectorLayer from '../../../../src/ol/layer/Vector.js';
-import WebGLVectorLayer from '../../../../src/ol/layer/Vector.js';
-import VectorSource from '../../../../src/ol/source/Vector.js';
-import Icon from '../../../../src/ol/style/Icon.js';
-import Style from '../../../../src/ol/style/Style.js';
-
-
-describe('ol.rendering.style.Icon', function() {
-
-  let map, vectorSource;
-
-  const imgInfo = {
-    anchor: [0.5, 46],
-    anchorXUnits: 'fraction',
-    anchorYUnits: 'pixels',
-    opacity: 0.75,
-    scale: 0.5,
-    imgSize: [32, 48]
-  };
-
-  function createMap(renderer, width, height) {
-    const MapConstructor = renderer === 'webgl' ? WebGLMap : Map;
-    const LayerConstructor = renderer === 'webgl' ? WebGLVectorLayer : VectorLayer;
-
-    vectorSource = new VectorSource();
-    const vectorLayer = new LayerConstructor({
-      source: vectorSource
-    });
-
-    map = new MapConstructor({
-      pixelRatio: 1,
-      target: createMapDiv(width ? width : 50, height ? height : 50),
-      layers: [vectorLayer],
-      view: new View({
-        projection: 'EPSG:4326',
-        center: [0, 0],
-        resolution: 1
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-      map = null;
-    }
-  });
-
-  describe('#render', function() {
-
-    function createFeatures(src, imgInfo, callback) {
-      const feature = new Feature({
-        geometry: new Point([0, 0])
-      });
-
-      const img = new Image();
-      img.onload = function() {
-        imgInfo.img = img;
-        feature.setStyle(new Style({
-          image: new Icon(/** @type {module:ol/style/Icon~Options} */ (imgInfo))
-        }));
-        vectorSource.addFeature(feature);
-        callback();
-      };
-      img.src = src;
-    }
-
-    it('scales svg correctly in the canvas renderer', function(done) {
-      createMap('canvas', 512, 512);
-      createFeatures('rendering/ol/data/me0.svg', {
-        scale: 96 / 512,
-        imgSize: [512, 512]
-      }, function() {
-        expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-scale.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-    it('uses offset correctly in the canvas renderer', function(done) {
-      createMap('canvas', 256, 512);
-      createFeatures('rendering/ol/data/me0.svg', {
-        offset: [0, 256],
-        size: [256, 256],
-        imgSize: [512, 512]
-      }, function() {
-        expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-offset.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-    it('uses offset correctly if it is larger than size in the canvas renderer', function(done) {
-      createMap('canvas', 256, 512);
-      createFeatures('rendering/ol/data/me0.svg', {
-        offset: [0, 374],
-        size: [256, 256],
-        imgSize: [512, 512]
-      }, function() {
-        expectResemble(map, 'rendering/ol/style/expected/icon-canvas-svg-offset2.png',
-          IMAGE_TOLERANCE, done);
-      });
-    });
-
-    where('WebGL').it('tests the WebGL renderer', function(done) {
-      assertWebGL();
-      createMap('webgl');
-      createFeatures('rendering/ol/data/icon.png', imgInfo, function() {
-        expectResemble(map, 'rendering/ol/style/expected/icon-webgl.png',
-          2.0, done);
-      });
-    });
-  });
-});