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