{"record":{"id":"6f6587da966e5eeb","repo":"videojs/video.js","slug":"currentdimension-only-accepts-width-or-height-valu","errorCode":null,"errorMessage":"currentDimension only accepts width or height value","messagePattern":"currentDimension only accepts width or height value","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/js/component.js","lineNumber":1221,"sourceCode":"  }\n\n  /**\n   * Get the computed width or the height of the component's element.\n   *\n   * Uses `window.getComputedStyle`.\n   *\n   * @param {string} widthOrHeight\n   *        A string containing 'width' or 'height'. Whichever one you want to get.\n   *\n   * @return {number}\n   *         The dimension that gets asked for or 0 if nothing was set\n   *         for that dimension.\n   */\n  currentDimension(widthOrHeight) {\n    let computedWidthOrHeight = 0;\n\n    if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {\n      throw new Error('currentDimension only accepts width or height value');\n    }\n\n    computedWidthOrHeight = Dom.computedStyle(this.el_, widthOrHeight);\n\n    // remove 'px' from variable and parse as integer\n    computedWidthOrHeight = parseFloat(computedWidthOrHeight);\n\n    // if the computed value is still 0, it's possible that the browser is lying\n    // and we want to check the offset values.\n    // This code also runs wherever getComputedStyle doesn't exist.\n    if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {\n      const rule = `offset${toTitleCase(widthOrHeight)}`;\n\n      computedWidthOrHeight = this.el_[rule];\n    }\n\n    return computedWidthOrHeight;\n  }","sourceCodeStart":1203,"sourceCodeEnd":1239,"githubUrl":"https://github.com/videojs/video.js/blob/c3a7e0e6d20cf5400c9afbee29965fe4dff393c2/src/js/component.js#L1203-L1239","documentation":"currentDimension() is restricted to the literal strings 'width' or 'height'. The method reads the computed style for the requested axis via Dom.computedStyle, and any other value would propagate as an invalid CSS property, so video.js fails fast. This is an internal/protected API; user code rarely hits it unless a custom component calls it with a dynamic argument.","triggerScenarios":"Calling component.currentDimension('width') or currentDimension('height') works; passing any other string (e.g. 'min-width', 'padding', an empty string, or a variable that resolved to undefined) throws.","commonSituations":"Custom component subclassing that generalizes dimension reads; passing a user-supplied dimension string without whitelisting; refactors that alias the argument.","solutions":["Only pass the literals 'width' or 'height'.","If you need a different CSS property, use Dom.computedStyle(el, prop) directly instead of currentDimension.","Whitelist the input: if (prop !== 'width' && prop !== 'height') return;"],"exampleFix":"// before\nconst v = comp.currentDimension(this.axis); // this.axis may be 'min-width'\n// after\nconst v = (this.axis === 'width' || this.axis === 'height')\n  ? comp.currentDimension(this.axis)\n  : parseFloat(Dom.computedStyle(comp.el(), this.axis));","handlingStrategy":"type-guard","validationCode":"function safeDimension(comp, axis) {\n  if (axis !== 'width' && axis !== 'height') return 0;\n  return comp.currentDimension(axis);\n}","typeGuard":"const isWidthOrHeight = (v) => v === 'width' || v === 'height';","tryCatchPattern":null,"preventionTips":["Treat currentDimension as width/height-only.","For other CSS properties, call Dom.computedStyle directly.","Avoid passing dynamic user input to internal Component APIs."],"tags":["component","dom","validation","internal-api"],"backgroundTag":null,"analyzedSha":"c3a7e0e6d20cf5400c9afbee29965fe4dff393c2","analyzedAt":"2026-08-13T04:20:15.471Z","schemaVersion":2},"datasetVersion":"2026-08-13T09:17:06.757Z"}