<!doctype html>
<meta charset="utf-8">
<title>Multiplying Two Numeric Types</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssnumericvalue-multiply-two-types">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/testhelper.js"></script>
<body>
<div id="log">
<script>
'use strict';

test(() => {
  const a = new CSSMathSum(new CSSUnitValue(0, 'px'), new CSSUnitValue(0, 'percent'));
  const b = new CSSMathSum(new CSSUnitValue(0, 's'), new CSSUnitValue(0, 'percent'));
  assert_throws_js(TypeError, () => new CSSMathProduct(a, b));
}, 'Multiplying two types with different non-null percent hints throws TypeError');

test(() => {
  const a = new CSSUnitValue(0, 'px');
  const b = new CSSUnitValue(0, 'px');
  const result = new CSSMathProduct(a, b);
  assert_numeric_type_equals(result.type(), { length: 2 });
}, 'Multiplying two types with same base types adds exponents');

test(() => {
  const a = new CSSUnitValue(0, 'px');
  const b = new CSSUnitValue(0, 's');
  const result = new CSSMathProduct(a, b);
  assert_numeric_type_equals(result.type(), { length: 1, time: 1 });
}, 'Multiplying two types with different base types adds exponents');

test(() => {
  const a = new CSSUnitValue(0, 'px');
  const b = new CSSMathInvert(new CSSUnitValue(0, 's'));
  const result = new CSSMathProduct(a, b);
  assert_numeric_type_equals(result.type(), { length: 1, time: -1 });
}, 'Multiplying two types respects the sign of the exponents');

test(() => {
  const a = new CSSUnitValue(0, 'px');
  const b = new CSSUnitValue(0, 'number');
  const result = new CSSMathProduct(a, b);
  assert_numeric_type_equals(result.type(), { length: 1 });
}, 'Multiplying a type with no exponents is a no-op');

test(() => {
  const a = new CSSMathSum(new CSSUnitValue(0, 'px'), new CSSUnitValue(0, 'percent'));
  const b = new CSSUnitValue(0, 'px');
  const result = new CSSMathProduct(a, b);
  assert_numeric_type_equals(result.type(), { length: 2, percentHint: 'length' });
}, 'Multiplying a type with percent hint applies the percent hint');

test(() => {
  const a = new CSSMathSum(new CSSUnitValue(0, 'px'), new CSSUnitValue(0, 'percent'));
  const b = new CSSMathSum(new CSSUnitValue(0, 'px'), new CSSUnitValue(0, 'percent'));
  const result = new CSSMathProduct(a, b);
  assert_numeric_type_equals(result.type(), { length: 2, percentHint: 'length' });
}, 'Multiplying two types with same percent hint applies the percent hint');

</script>
