SVGLength-px.html - mozsearch

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /svg/types/scripted/SVGLength-px.html - WPT Dashboard Interop Dashboard

<!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>

const 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

    let divElement = document.createElement("div");

    divElement.setAttribute("style", "height: 1ex; font-size: initial; font-family: initial;");

    let pElement = document.querySelector("p");

    pElement.appendChild(divElement);

    let xHeight = divElement.offsetHeight;

    pElement.removeChild(divElement);

    return xHeight;

});

function valueInPx(valueAndUnits) {

  let div = document.createElement("div");

  div.style.height = valueAndUnits;

  document.documentElement.appendChild(div);

  let pxValue = parseFloat(getComputedStyle(div).getPropertyValue("height"));

  document.documentElement.removeChild(div);

  return pxValue;

test(function() {

  let 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() {

  let 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() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "2px";

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS);

  let 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() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "2px";

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EXS);

  let 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() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "48px";

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM);

  let referenceValue = 48 * 2.54 / cssPixelsPerInch;

  assert_equals(length.valueAsString, referenceValue.toFixed(2) + "cm");

  assert_approx_equals(length.valueInSpecifiedUnits, referenceValue, 0.01);

  assert_equals(length.value, 48);

  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_CM);

}, document.title + ", cm");

test(function() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "48px";

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM);

  let 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() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "48q";

  assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);

  let referenceValue = valueInPx(length.valueAsString);

  assert_approx_equals(length.value, referenceValue, 0.01);

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM);

  referenceValue = 48 / 4;

  assert_equals(length.valueAsString, referenceValue + "mm");

  assert_approx_equals(length.valueInSpecifiedUnits, referenceValue, 0.01);

  length.value = valueInPx("12q");

  referenceValue = 3;

  assert_approx_equals(length.valueInSpecifiedUnits, referenceValue, 0.01);

}, document.title + ", q");

test(function() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "48px";

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);

  let 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() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "4px";

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT);

  let 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() {

  let length = svgElement.createSVGLength();

  length.valueAsString = "16px";

  length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PC);

  let 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>