cssUnitValue.html | Explore in Territory

<!DOCTYPE html>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>

<script>

let lengthUnits = [
  'em',
  'ex',
  'px',
  'cm',
  'mm',
  'in',
  'pt',
  'pc',
  'vw',
  'vh',
  'vmin',
  'vmax',
  'rem',
  'ch'
];

let angleUnits = [
  'deg',
  'rad',
  'grad',
  'turn'
];

let timeUnits = [
  'ms',
  's',
];

let frequencyUnits = [
  'Hz',
  'kHz'
];

let resolutionUnits = [
  'dppx',
  'dpi',
  'dpcm'
];

function validateUnitValue(unitValue, value, unit, type, cssText) {
  assert_equals(unitValue.value, value, 'value');
  assert_equals(unitValue.unit, unit, 'unit');
}

function generateTests(unitList, typeString) {
  for (let unit of unitList) {
    let lowerUnit = unit.toLowerCase();
    test(() => {
      let unitValue = new CSSUnitValue(1, unit);
      validateUnitValue(unitValue, 1, lowerUnit, typeString, '1' + lowerUnit);
    }, 'CSSUnitValue supports ' + typeString + ' unit ' + unit);
    test(() => {
      let unitValue = CSS[unit](1);
      validateUnitValue(unitValue, 1, lowerUnit, typeString, '1' + lowerUnit);
    }, 'Factory method for ' + unit + ' produces valid CSSUnitValue');
  }
}

test(() => {
  assert_throws_js(TypeError, () => {
    new CSSUnitValue(100, 'bananas');
  });
}, 'CSSUnitValue throws for invalid unit in constructor');

test(() => {
  let unitValue = new CSSUnitValue(1, 'number');
  // For number/percent, the type is the same as the unit.
  validateUnitValue(unitValue, 1, 'number', 'number', '1');
}, 'CSSUnitValue supports numbers');

test(() => {
  let unitValue = CSS.number(1);
  validateUnitValue(unitValue, 1, 'number', 'number', '1');
}, 'Factory method for number produces valid CSSUnitValue');

test(() => {
  let unitValue = new CSSUnitValue(1, 'percent');
  // For number/percent, the type is the same as the unit.
  validateUnitValue(unitValue, 1, 'percent', 'percent', '1%');
}, 'CSSUnitValue supports percents');

test(() => {
  let unitValue = CSS.percent(1);
  validateUnitValue(unitValue, 1, 'percent', 'percent', '1%');
}, 'Factory method for percent produces valid CSSUnitValue');

generateTests(lengthUnits, 'length');
generateTests(angleUnits, 'angle');
generateTests(timeUnits, 'time');
generateTests(frequencyUnits, 'frequency');
generateTests(resolutionUnits, 'resolution');

</script>
chromium/third_party/blink/web_tests/typedcssom/cssUnitValue.html
