<!DOCTYPE HTML>
<title>SVGLength, converting from 'px' to other units (detached)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<p></p>
<script>
var cssPixelsPerInch = 96;
setup(function() {
  window.svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svgElement.setAttribute("style", "visibility: hidden; font-size: initial; font-family: initial;");
  window.fontSize = parseInt(getComputedStyle(svgElement).fontSize);
  window.xHeight = calculateXHeight();

  function calculateXHeight() {
    // Crude hack to calculate the x-height
    var divElement = document.createElement("div");
    divElement.setAttribute("style", "height: 1ex; font-size: initial; font-family: initial;");
    var pElement = document.querySelector("p");
    pElement.appendChild(divElement);
    var xHeight = divElement.offsetHeight;
    pElement.removeChild(divElement);
    return xHeight;
  }
});

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "2px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER);
  assert_equals(length.valueAsString, "2");
  assert_equals(length.value, 2);
  assert_equals(length.valueInSpecifiedUnits, 2);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_NUMBER);
}, document.title + ", unitless");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "2px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
  assert_equals(length.valueAsString, "2%");
  assert_equals(length.value, 2);
  assert_equals(length.valueInSpecifiedUnits, 2);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
}, document.title + ", percentage");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "2px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS);
  var referenceValue = 2 / fontSize;
  assert_equals(length.valueAsString, referenceValue.toFixed(6) + "em");
  assert_approx_equals(length.valueInSpecifiedUnits, referenceValue, 0.1);
  assert_approx_equals(length.value, 2.0, 0.1);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_EMS);
}, document.title + ", ems");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "2px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EXS);
  var referenceValue = 2 / xHeight;
  // Don't check valueAsString here, it's unreliable across browsers.
  assert_approx_equals(length.valueInSpecifiedUnits, referenceValue, 0.1);
  assert_approx_equals(length.value, 2.0, 0.1);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_EXS);
}, document.title + ", exs");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "48px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM);
  var referenceValue = 48 * 2.54 / cssPixelsPerInch;
  assert_equals(length.valueAsString, referenceValue.toFixed(2) + "cm");
  assert_approx_equals(length.valueInSpecifiedUnits, referenceValue, 0.01);
  assert_approx_equals(length.value, 48, 0.001);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_CM);
}, document.title + ", cm");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "48px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM);
  var referenceValue = 48 * 25.4 / cssPixelsPerInch;
  assert_equals(length.valueAsString, referenceValue.toFixed(1) + "mm");
  assert_approx_equals(length.valueInSpecifiedUnits, referenceValue, 0.01);
  assert_equals(length.value, 48);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_MM);
}, document.title + ", mm");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "48px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);
  var referenceValue = 48 / cssPixelsPerInch;
  assert_equals(length.valueAsString, referenceValue + "in");
  assert_equals(length.valueInSpecifiedUnits, referenceValue);
  assert_equals(length.value, 48);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_IN);
}, document.title + ", in");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "4px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT);
  var referenceValue = 4 / cssPixelsPerInch * 72;
  assert_equals(length.valueAsString, referenceValue + "pt");
  assert_equals(length.valueInSpecifiedUnits, referenceValue);
  assert_equals(length.value, 4);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PT);
}, document.title + ", pt");

test(function() {
  var length = svgElement.createSVGLength();
  length.valueAsString = "16px";
  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PC);
  var referenceValue = 16 / cssPixelsPerInch * 6;
  // Don't check valueAsString here, it's unreliable across browsers.
  assert_equals(length.valueInSpecifiedUnits, referenceValue);
  assert_equals(length.value, 16);
  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PC);
}, document.title + ", pc");
</script>