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

<div id="testElement"></div>

<script>

let zeroAngle = new CSSUnitValue(0, 'deg');

function angleValue(value, unit) {
  return new CSSUnitValue(value, unit);
}

function cssTransformWithRotate(angleValue) {
  return new CSSTransformValue([
      new CSSRotation(angleValue)]);
}

function cssTransformWithRotate3D(x, y, z, angleValue) {
  return new CSSTransformValue([
      new CSSRotation(x, y, z, angleValue)]);
}

runInlineStylePropertyMapTests( {
  property: 'transform',
  validKeywords: [
    'none',
  ],
  validObjects: [
    // Translations
    // TODO(meade)
    // Scales
    // TODO(meade)
    // Skews
    new CSSTransformValue([new CSSSkew(angleValue(30, 'deg'), zeroAngle)]),
    new CSSTransformValue([new CSSSkew(angleValue(10, 'rad'), zeroAngle)]),
    new CSSTransformValue([new CSSSkew(angleValue(2, 'grad'), zeroAngle)]),
    new CSSTransformValue([new CSSSkew(angleValue(0.2, 'turn'), zeroAngle)]),
    new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(30, 'deg'))]),
    new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(10, 'rad'))]),
    new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(2, 'grad'))]),
    new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(0.2, 'turn'))]),
    // Rotations
    cssTransformWithRotate(angleValue(30, 'deg')),
    cssTransformWithRotate(angleValue(10, 'rad')),
    cssTransformWithRotate(angleValue(2, 'grad')),
    cssTransformWithRotate(angleValue(0.2, 'turn')),
    cssTransformWithRotate3D(1, 2, 3, angleValue(30, 'deg')),
    cssTransformWithRotate3D(1, 2, 3, angleValue(10, 'rad')),
    cssTransformWithRotate3D(1, 2, 3, angleValue(2, 'grad')),
    cssTransformWithRotate3D(1, 2, 3, angleValue(0.2, 'turn')),
    // Perspectives
    new CSSTransformValue([new CSSPerspective(CSS.px(10))]),
    new CSSTransformValue([new CSSPerspective(CSS.em(5))]),
  ],
  // Values with these strings aren't used in Typed OM, but can also be
  // represented by the specified values.
  validStringMappings: {
    // Skews
    'skew(45deg)':
      new CSSTransformValue([new CSSSkew(angleValue(45, 'deg'), zeroAngle)]),
    'skew(1rad)':
      new CSSTransformValue([new CSSSkew(angleValue(1, 'rad'), zeroAngle)]),
    'skew(6.2grad)':
      new CSSTransformValue([new CSSSkew(angleValue(6.2, 'grad'), zeroAngle)]),
    'skew(0.31turn)':
      new CSSTransformValue([new CSSSkew(angleValue(0.31, 'turn'), zeroAngle)]),
    'skewX(45deg)':
      new CSSTransformValue([new CSSSkew(angleValue(45, 'deg'), zeroAngle)]),
    'skewX(1rad)':
      new CSSTransformValue([new CSSSkew(angleValue(1, 'rad'), zeroAngle)]),
    'skewX(6.2grad)':
      new CSSTransformValue([new CSSSkew(angleValue(6.2, 'grad'), zeroAngle)]),
    'skewX(0.31turn)':
      new CSSTransformValue([new CSSSkew(angleValue(0.31, 'turn'), zeroAngle)]),
    'skewY(45deg)':
      new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(45, 'deg'))]),
    'skewY(1rad)':
      new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(1, 'rad'))]),
    'skewY(6.2grad)':
      new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(6.2, 'grad'))]),
    'skewY(0.31turn)':
      new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(0.31, 'turn'))]),
    // Rotations
    'rotateX(45deg)': cssTransformWithRotate3D(1, 0, 0, angleValue(45, 'deg')),
    'rotateX(1rad)': cssTransformWithRotate3D(1, 0, 0, angleValue(1, 'rad')),
    'rotateX(6.2grad)':
      cssTransformWithRotate3D(1, 0, 0, angleValue(6.2, 'grad')),
    'rotateX(0.31turn)':
      cssTransformWithRotate3D(1, 0, 0, angleValue(0.31, 'turn')),
    'rotateY(45deg)': cssTransformWithRotate3D(0, 1, 0, angleValue(45, 'deg')),
    'rotateY(1rad)': cssTransformWithRotate3D(0, 1, 0, angleValue(1, 'rad')),
    'rotateY(6.2grad)':
      cssTransformWithRotate3D(0, 1, 0, angleValue(6.2, 'grad')),
    'rotateY(0.31turn)':
      cssTransformWithRotate3D(0, 1, 0, angleValue(0.31, 'turn')),
    'rotateZ(45deg)': cssTransformWithRotate3D(0, 0, 1, angleValue(45, 'deg')),
    'rotateZ(1rad)': cssTransformWithRotate3D(0, 0, 1, angleValue(1, 'rad')),
    'rotateZ(6.2grad)':
      cssTransformWithRotate3D(0, 0, 1, angleValue(6.2, 'grad')),
    'rotateZ(0.31turn)':
      cssTransformWithRotate3D(0, 0, 1, angleValue(0.31, 'turn')),
  },
  supportsMultiple: false,
  invalidObjects: [new CSSUnitValue(4, 'px')]
});

let crashTestStrings = {
  'rotate(calc(45deg + 1rad))': 'rotate(calc(102.296deg))',
  'rotate3d(1, 2, 3, calc(45deg + 1rad))': 'rotate3d(1, 2, 3, calc(102.296deg))',
  'skew(calc(5deg + 0.1rad))': 'skew(calc(10.7296deg))',
  'skew(calc(5deg + 0.1rad), 5deg)': 'skew(calc(10.7296deg), 5deg)',
  'skew(5deg, calc(5deg + 0.1rad))': 'skew(5deg, calc(10.7296deg))',
  'skewX(calc(5deg + 0.1rad))': 'skewX(calc(10.7296deg))',
  'skewY(calc(5deg + 0.1rad))': 'skewY(calc(10.7296deg))',
  'perspective(calc(10px + 5em))': 'perspective(calc(10px + 5em))',
};

for (let inputString in crashTestStrings) {
  test(() => {
    testElement.style.transform = inputString;
    let result = testElement.styleMap.get('transform');
    assert_equals(result.constructor, CSSStyleValue,
        'result is a base CSSStyleValue');
    assert_equals(result.toString(), crashTestStrings[inputString]);
  }, "Getting transform when it is set to " + inputString + " does not crash");
}

// TODO(meade): Remove/update this test once translate is supported.
test(function() {
  testElement.style.transform = 'translateY(50px)';
  testElement.styleMap.entries();
}, "Unhandled translate case doesn't crash.");

test(function() {
  // Clear transform
  let transform = new CSSTransformValue([new CSSPerspective(CSS.px(-5))]);
  assert_throws(new TypeError(), () => {
    testElement.styleMap.set('transform', transform);
  });
}, "Invalid perspective (negative length) doesn't crash");

</script>