[GLJS-1165] Correctly stretch vector icons for >1 pixel ratio (internal-2130)

Author: underoot

src/style/load_iconset.ts

@@ -12,16 +12,28 @@ function getContentArea(icon: Icon): [number, number, number, number] | undefine
         return undefined;
     }
 
+    const dpr = browser.devicePixelRatio;
     const {left, top, width, height} = icon.metadata.content_area;
 
+    const scaledLeft = left * dpr;
+    const scaledTop = top * dpr;
+
     return [
-        left,
-        top,
-        left + width,
-        top + height
+        scaledLeft,
+        scaledTop,
+        scaledLeft + width * dpr,
+        scaledTop + height * dpr
     ];
 }
 
+function getStretchArea(stretchArea: [number, number][] | undefined): [number, number][] | undefined {
+    if (!stretchArea) {
+        return undefined;
+    }
+
+    return stretchArea.map(([l, r]) => [l * browser.devicePixelRatio, r * browser.devicePixelRatio]);
+}
+
 export function loadIconset(
     loadURL: string,
     requestManager: RequestManager,
@@ -44,8 +56,8 @@ export function loadIconset(
                 version: 1,
                 pixelRatio: browser.devicePixelRatio,
                 content: getContentArea(icon),
-                stretchX: icon.metadata ? icon.metadata.stretch_x_areas : undefined,
-                stretchY: icon.metadata ? icon.metadata.stretch_y_areas : undefined,
+                stretchX: icon.metadata ? getStretchArea(icon.metadata.stretch_x_areas) : undefined,
+                stretchY: icon.metadata ? getStretchArea(icon.metadata.stretch_y_areas) : undefined,
                 sdf: false,
                 usvg: true,
                 icon,

test/integration/render-tests/icon-text-fit/both-2x/expected.png

@@ -0,0 +1,45 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "spriteFormat": "icon_set",
+      "width": 128,
+      "height": 64,
+      "pixelRatio": 2
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Point",
+        "coordinates": [
+          0,
+          0
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/rect",
+  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "symbol",
+      "type": "symbol",
+      "source": "geojson",
+      "layout": {
+        "text-field": "ABCDEF",
+        "text-font": [
+          "Open Sans Semibold",
+          "Arial Unicode MS Bold"
+        ],
+        "icon-image": "rect",
+        "icon-text-fit": "both",
+        "icon-text-fit-padding": [0, 10, 0, 10]
+      },
+      "paint": {
+        "text-color": "white"
+      }
+    }
+  ]
+}