| <!doctype html> |
| <meta charset="utf-8"> |
| <title>Arithmetic operations on CSSNumericValue tests</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssnumericvalue-add"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssnumericvalue-sub"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssnumericvalue-mul"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssnumericvalue-div"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssnumericvalue-min"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-cssnumericvalue-max"> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <script src="../../resources/testhelper.js"></script> |
| <script> |
| 'use strict'; |
| |
| const gArithmeticOps = [ |
| { methodName: 'add', mathType: CSSMathSum }, |
| { methodName: 'sub', mathType: CSSMathSum }, |
| { methodName: 'mul', mathType: CSSMathProduct }, |
| { methodName: 'div', mathType: CSSMathProduct }, |
| { methodName: 'min', mathType: CSSMathMin }, |
| { methodName: 'max', mathType: CSSMathMax }, |
| ]; |
| |
| for (const {methodName, mathType} of gArithmeticOps) { |
| test(() => { |
| const result = CSS.number(1)[methodName](); |
| assert_style_value_equals(result, CSS.number(1)); |
| }, 'Calling CSSUnitValue.' + methodName + ' with no arguments returns itself'); |
| |
| test(() => { |
| // Use an arithmetic expression that can't be simplified to a CSSUnitValue |
| const mathValue = new mathType(CSS.px(1), CSS.percent(1)); |
| const result = mathValue[methodName](); |
| assert_style_value_equals(result, mathValue); |
| }, 'Calling CSSMathValue.' + methodName + ' with no arguments returns itself'); |
| |
| test(() => { |
| const result = CSS.px(1)[methodName](CSS.percent(1)); |
| assert_equals(result.constructor.name, mathType.name); |
| }, 'Calling CSSNumericValue.' + methodName + ' with a single CSSNumericValue returns correct type'); |
| |
| test(() => { |
| const result = new mathType(CSS.px(1))[methodName](CSS.percent(1)); |
| assert_equals(result.constructor.name, mathType.name); |
| }, 'Calling CSSMathValue.' + methodName + ' with a single CSSNumericValue returns correct type'); |
| |
| test(() => { |
| const result = CSS.percent(1)[methodName](CSS.px(1), CSS.px(2), CSS.px(3)); |
| assert_equals(result.constructor.name, mathType.name); |
| }, 'Calling CSSNumericValue.' + methodName + ' with more than one number CSSNumericValues returns correct type'); |
| |
| test(() => { |
| const result = CSS.number(1)[methodName](1, CSS.number(2), 3); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| }, 'Calling CSSNumericValue.' + methodName + ' can take numberish values'); |
| |
| test(() => { |
| const result = new mathType(CSS.number(1))[methodName](CSS.number(2), CSS.number(3)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.unit, 'number'); |
| }, 'Calling ' + mathType.name + '.' + methodName + ' with number CSSUnitValues simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| assert_throws(new TypeError(), () => new CSS.px(0)[methodName](CSS.px(1), CSS.s(2))); |
| }, 'Calling CSSNumericValue.' + methodName + ' with incompatible types throws TypeError'); |
| } |
| |
| test(() => { |
| const result = CSS.px(10).add(CSS.px(5), CSS.px(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 17); |
| assert_equals(result.unit, 'px'); |
| }, 'Calling CSSUnitValue.add with CSSUnitValues with same unit simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.px(10).sub(CSS.px(5), CSS.px(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 3); |
| assert_equals(result.unit, 'px'); |
| }, 'Calling CSSUnitValue.sub with CSSUnitValues with same unit simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.number(10).mul(CSS.number(5), CSS.number(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 100); |
| assert_equals(result.unit, 'number'); |
| }, 'Calling CSSUnitValue.mul with all numbers simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.number(10).mul(CSS.px(5), CSS.number(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 100); |
| assert_equals(result.unit, 'px'); |
| }, 'Calling CSSUnitValue.mul with only one non-number simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.number(10).mul(CSS.px(5), CSS.px(2)); |
| assert_equals(result.constructor.name, CSSMathProduct.name); |
| }, 'Calling CSSUnitValue.mul with more than one non-number does not simplify to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.number(10).div(CSS.number(5), CSS.number(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 1); |
| assert_equals(result.unit, 'number'); |
| }, 'Calling CSSUnitValue.div with all numbers simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.px(10).div(CSS.number(5), CSS.number(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 1); |
| assert_equals(result.unit, 'px'); |
| }, 'Calling CSSUnitValue.div on a non-number value simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.number(10).div(CSS.px(5), CSS.number(2)); |
| assert_equals(result.constructor.name, CSSMathProduct.name); |
| }, 'Calling CSSUnitValue.div with a non-number value in the arguments does not simplify to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.px(10).min(CSS.px(5), CSS.px(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 2); |
| assert_equals(result.unit, 'px'); |
| }, 'Calling CSSUnitValue.min with CSSUnitValues with same unit simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.px(10).max(CSS.px(5), CSS.px(2)); |
| assert_equals(result.constructor.name, CSSUnitValue.name); |
| assert_equals(result.value, 10); |
| assert_equals(result.unit, 'px'); |
| }, 'Calling CSSUnitValue.max with CSSUnitValues with same unit simplifies to a CSSUnitValue'); |
| |
| test(() => { |
| const result = CSS.number(1).sub(CSS.number(1), new CSSMathNegate(1), new CSSMathSum(1)); |
| assert_style_value_equals(result, |
| new CSSMathSum(CSS.number(1), CSS.number(-1), CSS.number(1), new CSSMathNegate(new CSSMathSum(1)))); |
| }, 'Calling CSSNumericValue.sub negates all argument values'); |
| |
| test(() => { |
| const result = CSS.number(2).div(CSS.number(2), CSS.px(2), new CSSMathInvert(2), new CSSMathSum(2)); |
| assert_style_value_equals(result, |
| new CSSMathProduct(CSS.number(2), CSS.number(0.5), new CSSMathInvert(CSS.px(2)), CSS.number(2), new CSSMathInvert(new CSSMathSum(2)))); |
| }, 'Calling CSSNumericValue.div inverts all argument values'); |
| |
| </script> |
