Dimension test bed for VideoJS (pseudocode)

VideoJS dims

1) No Dims.
  <video data-setup=“{}” preload=“none”>

  check:
  player is visible
  player has class “vjs-default-dimensions”
  player width is 300.
  player height is 150.
  // I would like to handle this as a special case. Introducing 300 and 150 as
  // independent default values, as is currently done, creates serious complexities.

2) Width attribute only.
  <video width=“500” data-setup=“{}” preload=“none”>

  check:
  player width is 500
  // what about height?
  // Do we use a default AR, even though we aren’t in fluid mode?
  // I think we do have to handle single-attribute cases gracefully.

3) Height attribute only.
  <video height=“500” data-setup=“{}” preload=“none”>

  check:
  player height is 500
  // What about width?

4) Dimension attributes both zero.
  <video height=“0” width=“0” data-setup=“{}” preload=“none”>

  check:
  player height is 0
  player width is 0
  // Legit use case, useful for hiding.

5) Dimension options both auto.
  <video data-setup=“{‘width’:’auto’, ‘height’: ‘auto’}” preload=“none”>

  check:
  // What is the expected behavior here? We could treat this as a special
  // authoring technique to allow authors to not apply any classes or inline styles,
  // for people who want to write all their own custom css with lightweight selectors. 

6) Dimension attributes both empty string.

  <video data-setup=“{‘width’:’’, ‘height’: ‘’}” preload=“none”>

  check:
  player is visible
  player has class “vjs-default-dimensions”
  player width is 300.
  player height is 150.
  // Handle the same as case #1.
  // Is this the expected behavior here?

7) Height and width attributes set and then changed.
  <video height=“300” width=“400” data-setup=“{}” preload=“none”>

  check:
  player is 400 wide
  player is 300 high

  - change to width=700, height=600

  check:
  player width is 700.
  player height is 600.

8) No dims, Supplied aspectRatio.
  <video data-setup=“{‘aspectRatio’: ‘2.35’}” preload=“none”>

  check:
  player width is 300.
  player height is >127 and <128
  // Is this correct?

9) No dims. Preload metadata.
  <video data-setup=“{}” preload=“metadata”>

  check:
  player is visible
  player has class “vjs-default-dimensions”
  player width is 300.
  player height is 150.

  - Fire a synthetic loadedMetaData event on tech,
  with arbitrary intrinsic height and intrinsic width

  check:
  player does not have class “vjs-default-dimensions”
  player width is vid’s intrinsic width
  player height is vid’s intrinsic height
  (metadata defines playback area in the absence of attributes)

10) Height and width attributes, Preload metadata.
  <video height=“300” width=“400” data-setup=“{}” preload=“metadata”>

  - Fire a synthetic loadedMetaData event on tech,
  with arbitrary intrinsic height and intrinsic width

  check:
  player is 400 wide
  player is 300 high
  (metadata doesn’t affect the playback area when defined by author attributes/options)

11) No dimensions, Fluid mode.
  <video data-setup=“{‘fluid’: true}” preload=“none”>

  check:
  player has class “vjs-fluid”
  player has class “vjs-some-default-AR” (?)

12) No dimensions, Fluid mode, 16:9 aspect ratio.
  <video data-setup=“{‘fluid’: true, aspectRatio’: ‘16:9’}” preload=“none”>

  check:
  player has class “vjs-fluid”
  player has class “vjs-fluid-16-9”

13) No dimensions, Fluid mode, 4:3 aspect ratio.
  <video data-setup=“{‘fluid’: true, aspectRatio’: ‘4:3’}” preload=“none”>

  check:
  player has class “vjs-fluid”
  player has class “vjs-fluid-4-3”

14) No dimensions, Fluid mode, Arbitrary aspect ratio.
  <video data-setup=“{‘fluid’: true, aspectRatio’: ‘ARWidth:ARHeight’}” preload=“none”>

  check:
  player has class “vjs-fluid”
  player has inline padding-top of ARHeight/ARWidth * 100 + “”%”

15) No dimensions, Fluid mode, Preload metadata
  <video data-setup=“{‘fluid’: true}” preload=“metadata”>

  check:
  player has class “vjs-fluid”
  player has class “vjs-some-default-AR” (?)

  - Fire a synthetic loadedMetaData event on tech,
  with arbitrary intrinsic height and intrinsic width

  check:
  player does not have class “vjs-some-default-AR” (?)
  player has inline padding-top of intrinsicHeight/intrinsicWidth * 100 + “”%”
  // When metadata loads, its AR trumps the default AR.

16) No dimensions, Fluid mode,  4:3 aspect ratio, Preload different metadata
  <video data-setup=“{‘fluid’: true, ‘aspectRatio’: ‘4:3’}” preload=“metadata”>

  check:
  player has class “vjs-fluid”
  player has class “vjs-fluid-4-3” (?)

  - Fire a synthetic loadedMetaData event on tech,
  with arbitrary intrinsic height and intrinsic width

  check:
  player still has class “vjs-fluid-4-3” (?)
  // When metadata loads, it doesn’t override an author-supplied AR.

17) Width attribute, Fluid mode.
  <video height=“500” data-setup=“{‘fluid’: true}” >

  check:
  player has class “vjs-fluid”
  player has class “vjs-some-default-AR” (?)
  player width is 500.
  // Width API stays as is in fluid mode, no accommodations required.

18) Height attribute, Fluid mode.
  <video height=“500” data-setup=“{‘fluid’: true}” >

  check:
  player does not have class “vjs-fluid”
  player height is 500
  // This is the tricky hard case.
  // Setting explicit height must void fluid mode, because there’s no way
  // to compensate for the visual height from padding using only CSS height.
  // Do we want to actually reset the fluid option to be false when height is supplied,
  // or preserve the option as declared and simply not apply the vjs-fluid class?
  // And how do we handle width in this case?

  // And then…
  - Set height to empty string

  check:
  player has class “vjs-fluid”
  player height not including padding is zero
  player has class “vjs-some-default-AR” (?)
  // With height eliminated, should fluid mode get applied again?