/*
 * All classes here intentionally declare height/width/block-size
 * twice. Just reveals if keyword is supported.
 *
 * According to the spec, for the sizing properties,
 * height/min-height/max-height, and width/min-width/max-width,
 * if specified for the inline axis, use the min-content/max-content inline
 * size; otherwise behaves as the property’s initial value.
 *
 * The 'block-size' property (and its max-/min- properties) is just an alias
 * for height (or width) and accepts the same values. Since it's not
 * inline-axis, by definition, it always treats the 'min-content' and
 * 'max-content' values as the initial value.
 *
 * https://drafts.csswg.org/css-sizing/#sizing-values
 *
 */

.height-min-content {
  height: 0px;
  height: min-content;
}

.height-max-content {
  height: 0px;
  height: max-content;
}

.min-height-min-content {
  min-height: 600px;
  min-height: min-content;
}

.min-height-max-content {
  min-height: 600px;
  min-height: max-content;
}

.max-height-min-content {
  max-height: 0px;
  max-height: min-content;
}

.max-height-max-content {
  max-height: 0px;
  max-height: max-content;
}

.width-min-content {
  width: 0px;
  width: min-content;
}

.width-max-content {
  width: 0px;
  width: max-content;
}

.min-width-min-content {
  min-width: 600px;
  min-width: min-content;
}

.min-width-max-content {
  min-width: 600px;
  min-width: max-content;
}

.max-width-min-content {
  max-width: 0px;
  max-width: min-content;
}

.max-width-max-content {
  max-width: 0px;
  max-width: max-content;
}

.block-min-content {
  block-size: 0px;
  block-size: min-content;
}

.block-max-content {
  block-size: 0px;
  block-size: max-content;
}

.min-block-min-content {
  min-block-size: 600px;
  min-block-size: min-content;
}

.min-block-max-content {
  min-block-size: 600px;
  min-block-size: max-content;
}

.max-block-min-content {
  max-block-size: 0px;
  max-block-size: min-content;
}

.max-block-max-content {
  max-block-size: 0px;
  max-block-size: max-content;
}