heycusp.com

A React PureComponent (render returns null) mounted at app shell level. On mount it registers window resize (handleResize and a 300 ms debounced copy), an orientationchange handler that re-dispatches a resize after 300 ms, and a gesturestart preventDefault. It calls handleResize immediately, sets history.scrollRestoration to manual, and adds body classes from browser info. handleResize writes --vh from innerHeight on the next animation frame and dispatches onSwitchViewport with the viewport name from two matchMedia queries when the name differs from this.viewport. Unmount removes only the two resize listeners.

Next: Capture the missing input histories

0/5 assertions calibrated · 0 unchanged mappings retained

Targets: html, body

• componentDidMount adds window resize listeners for handleResize and the 300 ms debounced copy, and an orientationchange listener that re-dispatches a resize event after 300 ms.
• componentDidMount adds a document gesturestart listener that calls preventDefault.
• componentDidMount sets history.scrollRestoration to manual when the property exists.
• The viewport name comes from two matchMedia queries v.d and v.g. If the first matches, v.c is returned; otherwise if the second matches, v.f; otherwise v.a. The constant values are not resolved in this pass.
• handleResize dispatches onSwitchViewport(e) only when the detected viewport name differs from this.viewport. In the visible source, this.viewport is initialized to an empty string and not reassigned in this function, so the guard may pass on every call.
• A second resize listener uses debounceResize, which wraps handleResize with a 300 ms debounce.
• componentWillUnmount removes only the resize and debounced resize listeners. The orientationchange and gesturestart listeners are not removed in this component.

[]

[
  {
    "id": "page",
    "selector": "body",
    "label": "resize page",
    "kind": "resize",
    "viewport": {
      "width": 390,
      "height": 844
    },
    "waitMs": 768
  }
]

{
  "type": "page",
  "action": {
    "kind": "resize",
    "viewport": {
      "width": 1440,
      "height": 900
    },
    "waitMs": 768
  }
}

[
  {
    "id": "page",
    "selector": "body",
    "label": "resize page",
    "kind": "resize",
    "viewport": {
      "width": 390,
      "height": 844
    },
    "waitMs": 768
  }
]

{
  "check": {
    "kind": "equals",
    "atMs": 1600,
    "value": "--vh: 9px;"
  },
  "samples": []
}

{
  "check": {
    "kind": "equals",
    "atMs": 1600,
    "value": "noDevice Linux Chrome"
  },
  "samples": []
}

{
  "check": {
    "kind": "equals",
    "atMs": 768,
    "value": "--vh: 8.44px;"
  },
  "samples": []
}

{
  "check": {
    "kind": "equals",
    "atMs": 768,
    "value": "--vh: 9px;"
  },
  "samples": []
}

{
  "check": {
    "kind": "equals",
    "atMs": 768,
    "value": "--vh: 8.44px;"
  },
  "samples": []
}