<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="testElement"></div>
<script>
var EPSILON = 1e-6; // float epsilon

function validateTransformWithSingleScale(transform, x, y, z, cssText) {
  assert_equals(transform.toString(), cssText);

  // Shouldn't be base StyleValue as for unsupported values.
  assert_equals(transform.constructor.name, CSSTransformValue.name);

  var components = [...transform.values()];
  assert_equals(components.length, 1);
  assert_equals(components[0].constructor.name, CSSScale.name);
  assert_equals(components[0].toString(), cssText);

  assert_approx_equals(components[0].x, x, EPSILON);
  assert_approx_equals(components[0].y, y, EPSILON);
  assert_approx_equals(components[0].z, z, EPSILON);
}

test(function() {
  testElement.style.transform = "scale(5)";

  validateTransformWithSingleScale(
      testElement.styleMap.get("transform"),
      5, 1, 1,
      "scale(5, 1)");
}, "Single argument rotation read from a StyleMap is correct");

test(function() {
  testElement.style.transform = "scale(5, 4)";

  validateTransformWithSingleScale(
      testElement.styleMap.get("transform"),
      5, 4, 1,
      "scale(5, 4)");
}, "Two-argument rotation read from a StyleMap is correct");

test(function() {
  testElement.style.transform = "scale3d(1, 2, 3)";
  validateTransformWithSingleScale(
      testElement.styleMap.get("transform"),
      1, 2, 3,
      "scale3d(1, 2, 3)");
}, "scale3d read from a StyleMap is correct");

test(function() {
  testElement.style.transform = "scaleX(4.5)";
  validateTransformWithSingleScale(
      testElement.styleMap.get("transform"),
      4.5, 1, 1,
      "scale(4.5, 1)");
}, "scaleX read from a StyleMap works");

test(function() {
  testElement.style.transform = "scaleY(8.1)";
  validateTransformWithSingleScale(
      testElement.styleMap.get("transform"),
      1, 8.1, 1,
      "scale(1, 8.1)");
}, "scaleY read from a StyleMap works");

test(function() {
  testElement.style.transform = "scaleZ(1.6)";
  validateTransformWithSingleScale(
      testElement.styleMap.get("transform"),
      1, 1, 1.6,
      "scale3d(1, 1, 1.6)");
}, "scaleZ read from a StyleMap results in a scale3d");

test(function() {
  testElement.styleMap.set(
      'transform',
      new CSSTransformValue([new CSSScale(1.2, 3.4)]));
  assert_equals(testElement.style.transform, 'scale(1.2, 3.4)');
}, "Set a 2-argument CSSScale into a styleMap");

test(function() {
  testElement.styleMap.set(
      'transform',
      new CSSTransformValue([new CSSScale(1.2, 3.4, 5.6)]));
  assert_equals(testElement.style.transform, 'scale3d(1.2, 3.4, 5.6)');
}, "Set a 3-argument CSSScale into a styleMap");

</script>