@exponential_app/eui 0.2.1 → 0.4.0

package/fixtures/zoom.json

@@ -0,0 +1,1382 @@
+{
+  "$comment": "AUTO-GENERATED by packages/exponential-ui/scripts/generate.ts — do not edit.\nSource of truth: packages/exponential-ui/catalog/core.catalog.json (+ tokens.json, style.json, basic-map.json, strings.json, locale.json, code.json, a11y.json, layout.json). EXP-1586: the ZoomableImage maths (catalog/style.json `zoomableImage`; src/zoom.ts, the Rust core's `zoom`). Inputs hand-written: `frames` = named {natural, viewport, initial?, maxScale?}, a case names its frame (`viewport` overrides it) and `from` = a view {scale, x, y} or \"rest\" (zoomRestView). `rest` = {fit: zoomFitScale, limits: zoomLimits, restScale: zoomRestScale, view: zoomRestView, tall: zoomIsTall}; `clamp` = zoomClamp; `zoomTo` = zoomTo; `wheel` = zoomWheel (⌘/ctrl); `scroll` = zoomScroll (a plain wheel); `ladder` = zoomLadder; `steps` = zoomStepScale; `doubleTap` = zoomDoubleTap; `keys` = zoomKey (null = not a zoom key); `rubberBand` = zoomRubberBand; `drag` = zoomDrag (held); `pinch` = zoomPinch (held); `momentum` = zoomMomentum; `momentumActive` = zoomMomentumActive; `panRoom` = zoomPanRoom; `resize` = zoomResize; `percent` = [scale, zoomPercent]; `menu` = zoomMenu (fit label \"Fit\"); `bounds` = zoomBounds. Compare numbers within 1e-6.",
+  "frames": {
+    "wide": {
+      "natural": {
+        "width": 2880,
+        "height": 1800
+      },
+      "viewport": {
+        "width": 1000,
+        "height": 700
+      }
+    },
+    "small": {
+      "natural": {
+        "width": 400,
+        "height": 300
+      },
+      "viewport": {
+        "width": 1000,
+        "height": 700
+      }
+    },
+    "tall": {
+      "natural": {
+        "width": 780,
+        "height": 25094
+      },
+      "viewport": {
+        "width": 1000,
+        "height": 700
+      }
+    },
+    "tallWide": {
+      "natural": {
+        "width": 1440,
+        "height": 9000
+      },
+      "viewport": {
+        "width": 390,
+        "height": 460
+      }
+    },
+    "phone": {
+      "natural": {
+        "width": 1440,
+        "height": 900
+      },
+      "viewport": {
+        "width": 390,
+        "height": 460
+      }
+    },
+    "capped": {
+      "natural": {
+        "width": 2880,
+        "height": 1800
+      },
+      "viewport": {
+        "width": 1000,
+        "height": 700
+      },
+      "maxScale": 2
+    },
+    "actual": {
+      "natural": {
+        "width": 2880,
+        "height": 1800
+      },
+      "viewport": {
+        "width": 1000,
+        "height": 700
+      },
+      "initial": "actual"
+    },
+    "forcedFit": {
+      "natural": {
+        "width": 780,
+        "height": 25094
+      },
+      "viewport": {
+        "width": 1000,
+        "height": 700
+      },
+      "initial": "fit"
+    },
+    "empty": {
+      "natural": {
+        "width": 0,
+        "height": 0
+      },
+      "viewport": {
+        "width": 1000,
+        "height": 700
+      }
+    },
+    "cappedLow": {
+      "natural": {
+        "width": 2880,
+        "height": 1800
+      },
+      "viewport": {
+        "width": 2000,
+        "height": 1500
+      },
+      "maxScale": 1.2
+    }
+  },
+  "rest": [
+    {
+      "name": "wide fits",
+      "frame": "wide",
+      "expected": {
+        "fit": 0.347222,
+        "limits": {
+          "min": 0.347222,
+          "max": 8
+        },
+        "restScale": 0.347222,
+        "view": {
+          "scale": 0.347222,
+          "x": 0,
+          "y": 37.5
+        },
+        "tall": false
+      }
+    },
+    {
+      "name": "small never upscales",
+      "frame": "small",
+      "expected": {
+        "fit": 1,
+        "limits": {
+          "min": 1,
+          "max": 8
+        },
+        "restScale": 1,
+        "view": {
+          "scale": 1,
+          "x": 300,
+          "y": 200
+        },
+        "tall": false
+      }
+    },
+    {
+      "name": "tall opens at fit width, top",
+      "frame": "tall",
+      "expected": {
+        "fit": 0.027895,
+        "limits": {
+          "min": 0.027895,
+          "max": 8
+        },
+        "restScale": 1,
+        "view": {
+          "scale": 1,
+          "x": 110,
+          "y": 0
+        },
+        "tall": true
+      }
+    },
+    {
+      "name": "tall wider than the phone",
+      "frame": "tallWide",
+      "expected": {
+        "fit": 0.051111,
+        "limits": {
+          "min": 0.051111,
+          "max": 8
+        },
+        "restScale": 0.270833,
+        "view": {
+          "scale": 0.270833,
+          "x": 0,
+          "y": 0
+        },
+        "tall": true
+      }
+    },
+    {
+      "name": "phone fit",
+      "frame": "phone",
+      "expected": {
+        "fit": 0.270833,
+        "limits": {
+          "min": 0.270833,
+          "max": 8
+        },
+        "restScale": 0.270833,
+        "view": {
+          "scale": 0.270833,
+          "x": 0,
+          "y": 108.125
+        },
+        "tall": false
+      }
+    },
+    {
+      "name": "initial actual",
+      "frame": "actual",
+      "expected": {
+        "fit": 0.347222,
+        "limits": {
+          "min": 0.347222,
+          "max": 8
+        },
+        "restScale": 1,
+        "view": {
+          "scale": 1,
+          "x": -940,
+          "y": 0
+        },
+        "tall": false
+      }
+    },
+    {
+      "name": "initial fit on a tall picture",
+      "frame": "forcedFit",
+      "expected": {
+        "fit": 0.027895,
+        "limits": {
+          "min": 0.027895,
+          "max": 8
+        },
+        "restScale": 0.027895,
+        "view": {
+          "scale": 0.027895,
+          "x": 489.120905,
+          "y": 0
+        },
+        "tall": true
+      }
+    },
+    {
+      "name": "no natural size yet",
+      "frame": "empty",
+      "expected": {
+        "fit": 1,
+        "limits": {
+          "min": 1,
+          "max": 8
+        },
+        "restScale": 1,
+        "view": {
+          "scale": 1,
+          "x": 500,
+          "y": 350
+        },
+        "tall": false
+      }
+    }
+  ],
+  "clamp": [
+    {
+      "name": "centred when it fits",
+      "frame": "wide",
+      "view": {
+        "scale": 0.3,
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "no gap left/top",
+      "frame": "wide",
+      "view": {
+        "scale": 1,
+        "x": 40,
+        "y": 30
+      },
+      "expected": {
+        "scale": 1,
+        "x": 0,
+        "y": 0
+      }
+    },
+    {
+      "name": "no gap right/bottom",
+      "frame": "wide",
+      "view": {
+        "scale": 1,
+        "x": -5000,
+        "y": -5000
+      },
+      "expected": {
+        "scale": 1,
+        "x": -1880,
+        "y": -1100
+      }
+    },
+    {
+      "name": "scale under the min",
+      "frame": "wide",
+      "view": {
+        "scale": 0.1,
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "scale over the max",
+      "frame": "wide",
+      "view": {
+        "scale": 20,
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "scale": 8,
+        "x": 0,
+        "y": 0
+      }
+    },
+    {
+      "name": "capped max",
+      "frame": "capped",
+      "view": {
+        "scale": 3,
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "scale": 2,
+        "x": 0,
+        "y": 0
+      }
+    },
+    {
+      "name": "one axis centred, one clamped",
+      "frame": "wide",
+      "view": {
+        "scale": 0.36,
+        "x": 100,
+        "y": 100
+      },
+      "expected": {
+        "scale": 0.36,
+        "x": 0,
+        "y": 26
+      }
+    }
+  ],
+  "zoomTo": [
+    {
+      "name": "100% about the cursor",
+      "frame": "wide",
+      "from": "rest",
+      "scale": 1,
+      "anchor": {
+        "x": 300,
+        "y": 200
+      },
+      "expected": {
+        "scale": 1,
+        "x": -564.000553,
+        "y": -268.0003
+      }
+    },
+    {
+      "name": "200% about the centre",
+      "frame": "wide",
+      "from": "rest",
+      "scale": 2,
+      "anchor": {
+        "x": 500,
+        "y": 350
+      },
+      "expected": {
+        "scale": 2,
+        "x": -2380.001843,
+        "y": -1450.001152
+      }
+    },
+    {
+      "name": "past the max clamps",
+      "frame": "wide",
+      "from": "rest",
+      "scale": 50,
+      "anchor": {
+        "x": 500,
+        "y": 350
+      },
+      "expected": {
+        "scale": 8,
+        "x": -11020.007373,
+        "y": -6850.004608
+      }
+    },
+    {
+      "name": "under the min clamps",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -200,
+        "y": -100
+      },
+      "scale": 0.01,
+      "anchor": {
+        "x": 10,
+        "y": 10
+      },
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "anchor at a corner",
+      "frame": "phone",
+      "from": "rest",
+      "scale": 1,
+      "anchor": {
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "scale": 1,
+        "x": 0,
+        "y": 0
+      }
+    }
+  ],
+  "wheel": [
+    {
+      "name": "cmd-wheel up zooms in",
+      "frame": "wide",
+      "from": "rest",
+      "deltaY": -100,
+      "mode": "pixel",
+      "anchor": {
+        "x": 700,
+        "y": 400
+      },
+      "expected": {
+        "scale": 0.424098,
+        "x": -154.981931,
+        "y": -42.7585
+      }
+    },
+    {
+      "name": "cmd-wheel down at fit stays",
+      "frame": "wide",
+      "from": "rest",
+      "deltaY": 120,
+      "mode": "pixel",
+      "anchor": {
+        "x": 700,
+        "y": 400
+      },
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "line mode",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "deltaY": 3,
+      "mode": "line",
+      "anchor": {
+        "x": 500,
+        "y": 350
+      },
+      "expected": {
+        "scale": 0.908464,
+        "x": -771.849622,
+        "y": -467.617614
+      }
+    },
+    {
+      "name": "trackpad pinch small delta",
+      "frame": "phone",
+      "from": "rest",
+      "deltaY": -8,
+      "mode": "pixel",
+      "anchor": {
+        "x": 195,
+        "y": 230
+      },
+      "expected": {
+        "scale": 0.275201,
+        "x": -3.145094,
+        "y": 106.159469
+      }
+    }
+  ],
+  "scroll": [
+    {
+      "name": "pans when zoomed",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "deltaX": 120,
+      "deltaY": -40,
+      "expected": {
+        "scale": 1,
+        "x": -1020,
+        "y": -510
+      }
+    },
+    {
+      "name": "stops at the edge",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "deltaX": 5000,
+      "deltaY": 5000,
+      "expected": {
+        "scale": 1,
+        "x": -1880,
+        "y": -1100
+      }
+    },
+    {
+      "name": "at fit nothing moves",
+      "frame": "wide",
+      "from": "rest",
+      "deltaX": 0,
+      "deltaY": 300,
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "tall scrolls down",
+      "frame": "tall",
+      "from": "rest",
+      "deltaX": 0,
+      "deltaY": 600,
+      "expected": {
+        "scale": 1,
+        "x": 110,
+        "y": -600
+      }
+    }
+  ],
+  "ladder": [
+    {
+      "name": "wide",
+      "frame": "wide",
+      "expected": [
+        0.347222,
+        0.5,
+        0.67,
+        1,
+        1.5,
+        2,
+        3,
+        4,
+        6,
+        8
+      ]
+    },
+    {
+      "name": "small",
+      "frame": "small",
+      "expected": [
+        1,
+        1.5,
+        2,
+        3,
+        4,
+        6,
+        8
+      ]
+    },
+    {
+      "name": "capped",
+      "frame": "capped",
+      "expected": [
+        0.347222,
+        0.5,
+        0.67,
+        1,
+        1.5,
+        2
+      ]
+    },
+    {
+      "name": "phone",
+      "frame": "phone",
+      "expected": [
+        0.270833,
+        0.33,
+        0.5,
+        0.67,
+        1,
+        1.5,
+        2,
+        3,
+        4,
+        6,
+        8
+      ]
+    }
+  ],
+  "steps": [
+    {
+      "name": "in from fit",
+      "frame": "wide",
+      "scale": 0.347222,
+      "direction": 1,
+      "expected": 0.5
+    },
+    {
+      "name": "out from fit stays",
+      "frame": "wide",
+      "scale": 0.347222,
+      "direction": -1,
+      "expected": 0.347222
+    },
+    {
+      "name": "in from between presets",
+      "frame": "wide",
+      "scale": 1.2,
+      "direction": 1,
+      "expected": 1.5
+    },
+    {
+      "name": "out from between presets",
+      "frame": "wide",
+      "scale": 1.2,
+      "direction": -1,
+      "expected": 1
+    },
+    {
+      "name": "in at the max stays",
+      "frame": "wide",
+      "scale": 8,
+      "direction": 1,
+      "expected": 8
+    },
+    {
+      "name": "out from 50% lands on fit",
+      "frame": "wide",
+      "scale": 0.5,
+      "direction": -1,
+      "expected": 0.347222
+    },
+    {
+      "name": "small in from 100%",
+      "frame": "small",
+      "scale": 1,
+      "direction": 1,
+      "expected": 1.5
+    }
+  ],
+  "doubleTap": [
+    {
+      "name": "large picture: fit to 100%",
+      "frame": "wide",
+      "from": "rest",
+      "point": {
+        "x": 250,
+        "y": 200
+      },
+      "expected": {
+        "scale": 1,
+        "x": -470.000461,
+        "y": -268.0003
+      }
+    },
+    {
+      "name": "medium picture: 2x fit",
+      "frame": "wide",
+      "viewport": {
+        "width": 2000,
+        "height": 1500
+      },
+      "from": "rest",
+      "point": {
+        "x": 1000,
+        "y": 750
+      },
+      "expected": {
+        "scale": 1.388889,
+        "x": -1000.00144,
+        "y": -500.0009
+      }
+    },
+    {
+      "name": "small picture: 200%",
+      "frame": "small",
+      "from": "rest",
+      "point": {
+        "x": 500,
+        "y": 350
+      },
+      "expected": {
+        "scale": 2,
+        "x": 100,
+        "y": 50
+      }
+    },
+    {
+      "name": "zoomed returns to rest",
+      "frame": "wide",
+      "from": {
+        "scale": 2,
+        "x": -1500,
+        "y": -900
+      },
+      "point": {
+        "x": 10,
+        "y": 10
+      },
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "capped at the max",
+      "frame": "cappedLow",
+      "from": "rest",
+      "point": {
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "scale": 1.2,
+        "x": 0,
+        "y": 0
+      }
+    },
+    {
+      "name": "phone double tap",
+      "frame": "phone",
+      "from": "rest",
+      "point": {
+        "x": 100,
+        "y": 230
+      },
+      "expected": {
+        "scale": 1,
+        "x": -269.231224,
+        "y": -220.000554
+      }
+    },
+    {
+      "name": "tall at fit width",
+      "frame": "tall",
+      "from": "rest",
+      "point": {
+        "x": 500,
+        "y": 100
+      },
+      "expected": {
+        "scale": 2,
+        "x": -280,
+        "y": -100
+      }
+    }
+  ],
+  "keys": [
+    {
+      "name": "+",
+      "frame": "wide",
+      "from": "rest",
+      "key": "+",
+      "expected": {
+        "scale": 0.5,
+        "x": -220.000461,
+        "y": -100.000288
+      }
+    },
+    {
+      "name": "=",
+      "frame": "wide",
+      "from": "rest",
+      "key": "=",
+      "expected": {
+        "scale": 0.5,
+        "x": -220.000461,
+        "y": -100.000288
+      }
+    },
+    {
+      "name": "-",
+      "frame": "wide",
+      "from": {
+        "scale": 2,
+        "x": -1500,
+        "y": -900
+      },
+      "key": "-",
+      "expected": {
+        "scale": 1.5,
+        "x": -1000,
+        "y": -587.5
+      }
+    },
+    {
+      "name": "0",
+      "frame": "wide",
+      "from": {
+        "scale": 2,
+        "x": -1500,
+        "y": -900
+      },
+      "key": "0",
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "1",
+      "frame": "wide",
+      "from": "rest",
+      "key": "1",
+      "expected": {
+        "scale": 1,
+        "x": -940.000922,
+        "y": -550.000576
+      }
+    },
+    {
+      "name": "not a zoom key",
+      "frame": "wide",
+      "from": "rest",
+      "key": "ArrowLeft",
+      "expected": null
+    }
+  ],
+  "rubberBand": [
+    {
+      "name": "zero",
+      "overshoot": 0,
+      "extent": 700,
+      "expected": 0
+    },
+    {
+      "name": "small pull",
+      "overshoot": 20,
+      "extent": 700,
+      "expected": 10.829817
+    },
+    {
+      "name": "big pull",
+      "overshoot": 600,
+      "extent": 700,
+      "expected": 224.271845
+    },
+    {
+      "name": "negative",
+      "overshoot": -120,
+      "extent": 1000,
+      "expected": -61.913696
+    },
+    {
+      "name": "no extent",
+      "overshoot": 50,
+      "extent": 0,
+      "expected": 0
+    }
+  ],
+  "drag": [
+    {
+      "name": "pan inside the bounds",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "dx": 100,
+      "dy": -50,
+      "expected": {
+        "scale": 1,
+        "x": -800,
+        "y": -600
+      }
+    },
+    {
+      "name": "past the left edge",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -50,
+        "y": -550
+      },
+      "dx": 200,
+      "dy": 0,
+      "expected": {
+        "scale": 1,
+        "x": 76.212471,
+        "y": -550
+      }
+    },
+    {
+      "name": "past the bottom edge",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -1050
+      },
+      "dx": 0,
+      "dy": -300,
+      "expected": {
+        "scale": 1,
+        "x": -900,
+        "y": -1214.925373
+      }
+    },
+    {
+      "name": "at fit both axes band",
+      "frame": "wide",
+      "from": "rest",
+      "dx": 120,
+      "dy": 80,
+      "expected": {
+        "scale": 0.347222,
+        "x": 61.913861,
+        "y": 78.897952
+      }
+    }
+  ],
+  "pinch": [
+    {
+      "name": "inside the limits",
+      "frame": "phone",
+      "from": "rest",
+      "factor": 3,
+      "anchor": {
+        "x": 195,
+        "y": 230
+      },
+      "expected": {
+        "scale": 0.812499,
+        "x": -390,
+        "y": -135.625
+      }
+    },
+    {
+      "name": "under the min bands",
+      "frame": "phone",
+      "from": "rest",
+      "factor": 0.5,
+      "anchor": {
+        "x": 195,
+        "y": 230
+      },
+      "expected": {
+        "scale": 0.212418,
+        "x": 42.058696,
+        "y": 134.411685
+      }
+    },
+    {
+      "name": "over the max bands",
+      "frame": "phone",
+      "from": {
+        "scale": 6,
+        "x": -4000,
+        "y": -2500
+      },
+      "factor": 2,
+      "anchor": {
+        "x": 195,
+        "y": 230
+      },
+      "expected": {
+        "scale": 9.72549,
+        "x": -6604.738425,
+        "y": -4195.09795
+      }
+    }
+  ],
+  "momentum": [
+    {
+      "name": "t 0",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "vx": 1,
+      "vy": -0.5,
+      "t": 0,
+      "expected": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      }
+    },
+    {
+      "name": "t 100",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "vx": 1,
+      "vy": -0.5,
+      "t": 100,
+      "expected": {
+        "scale": 1,
+        "x": -813.920981,
+        "y": -593.039509
+      }
+    },
+    {
+      "name": "t 325",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "vx": 1,
+      "vy": -0.5,
+      "t": 325,
+      "expected": {
+        "scale": 1,
+        "x": -694.560818,
+        "y": -652.719591
+      }
+    },
+    {
+      "name": "t 2000 stops at the edge",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "vx": 4,
+      "vy": 0,
+      "t": 2000,
+      "expected": {
+        "scale": 1,
+        "x": 0,
+        "y": -550
+      }
+    }
+  ],
+  "momentumActive": [
+    {
+      "name": "fast at 0",
+      "vx": 2,
+      "vy": 0,
+      "t": 0,
+      "expected": true
+    },
+    {
+      "name": "fast at 1500",
+      "vx": 2,
+      "vy": 0,
+      "t": 1500,
+      "expected": true
+    },
+    {
+      "name": "slow at 0",
+      "vx": 0.005,
+      "vy": 0.005,
+      "t": 0,
+      "expected": false
+    }
+  ],
+  "panRoom": [
+    {
+      "name": "at fit none",
+      "frame": "wide",
+      "from": "rest",
+      "expected": {
+        "x": false,
+        "y": false
+      }
+    },
+    {
+      "name": "zoomed both",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "expected": {
+        "x": true,
+        "y": true
+      }
+    },
+    {
+      "name": "tall at rest y only",
+      "frame": "tall",
+      "from": "rest",
+      "expected": {
+        "x": false,
+        "y": true
+      }
+    },
+    {
+      "name": "one axis",
+      "frame": "wide",
+      "from": {
+        "scale": 0.36,
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "x": true,
+        "y": false
+      }
+    }
+  ],
+  "resize": [
+    {
+      "name": "at rest refits",
+      "frame": "wide",
+      "from": "rest",
+      "fromViewport": {
+        "width": 1400,
+        "height": 900
+      },
+      "expected": {
+        "scale": 0.347222,
+        "x": 0,
+        "y": 37.5
+      }
+    },
+    {
+      "name": "zoomed keeps the scale about the centre",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -900,
+        "y": -550
+      },
+      "fromViewport": {
+        "width": 800,
+        "height": 600
+      },
+      "expected": {
+        "scale": 1,
+        "x": -800,
+        "y": -500
+      }
+    },
+    {
+      "name": "zoomed clamps after growing",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": -2000,
+        "y": -1200
+      },
+      "fromViewport": {
+        "width": 800,
+        "height": 600
+      },
+      "expected": {
+        "scale": 1,
+        "x": -1880,
+        "y": -1100
+      }
+    }
+  ],
+  "percent": [
+    [
+      0.347222,
+      "35%"
+    ],
+    [
+      0.5,
+      "50%"
+    ],
+    [
+      1,
+      "100%"
+    ],
+    [
+      1.005,
+      "100%"
+    ],
+    [
+      2,
+      "200%"
+    ],
+    [
+      8,
+      "800%"
+    ],
+    [
+      0.0049,
+      "0%"
+    ]
+  ],
+  "menu": [
+    {
+      "name": "at fit",
+      "frame": "wide",
+      "from": "rest",
+      "expected": [
+        {
+          "scale": null,
+          "label": "Fit",
+          "checked": true
+        },
+        {
+          "scale": 0.5,
+          "label": "50%",
+          "checked": false
+        },
+        {
+          "scale": 1,
+          "label": "100%",
+          "checked": false
+        },
+        {
+          "scale": 2,
+          "label": "200%",
+          "checked": false
+        },
+        {
+          "scale": 4,
+          "label": "400%",
+          "checked": false
+        }
+      ]
+    },
+    {
+      "name": "at 200%",
+      "frame": "wide",
+      "from": {
+        "scale": 2,
+        "x": 0,
+        "y": 0
+      },
+      "expected": [
+        {
+          "scale": null,
+          "label": "Fit",
+          "checked": false
+        },
+        {
+          "scale": 0.5,
+          "label": "50%",
+          "checked": false
+        },
+        {
+          "scale": 1,
+          "label": "100%",
+          "checked": false
+        },
+        {
+          "scale": 2,
+          "label": "200%",
+          "checked": true
+        },
+        {
+          "scale": 4,
+          "label": "400%",
+          "checked": false
+        }
+      ]
+    },
+    {
+      "name": "capped drops 4",
+      "frame": "capped",
+      "from": "rest",
+      "expected": [
+        {
+          "scale": null,
+          "label": "Fit",
+          "checked": true
+        },
+        {
+          "scale": 0.5,
+          "label": "50%",
+          "checked": false
+        },
+        {
+          "scale": 1,
+          "label": "100%",
+          "checked": false
+        },
+        {
+          "scale": 2,
+          "label": "200%",
+          "checked": false
+        }
+      ]
+    },
+    {
+      "name": "small drops 50%",
+      "frame": "small",
+      "from": "rest",
+      "expected": [
+        {
+          "scale": null,
+          "label": "Fit",
+          "checked": true
+        },
+        {
+          "scale": 1,
+          "label": "100%",
+          "checked": false
+        },
+        {
+          "scale": 2,
+          "label": "200%",
+          "checked": false
+        },
+        {
+          "scale": 4,
+          "label": "400%",
+          "checked": false
+        }
+      ]
+    }
+  ],
+  "bounds": [
+    {
+      "name": "at fit",
+      "frame": "wide",
+      "from": "rest",
+      "expected": {
+        "atMin": true,
+        "atMax": false
+      }
+    },
+    {
+      "name": "at the max",
+      "frame": "wide",
+      "from": {
+        "scale": 8,
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "atMin": false,
+        "atMax": true
+      }
+    },
+    {
+      "name": "between",
+      "frame": "wide",
+      "from": {
+        "scale": 1,
+        "x": 0,
+        "y": 0
+      },
+      "expected": {
+        "atMin": false,
+        "atMax": false
+      }
+    }
+  ]
+}