| <!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(new 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> |
