| <!DOCTYPE HTML> |
| <title>SVGLength, converting from 'px' to other units (attached)</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <p></p> |
| <script> |
| var cssPixelsPerInch = 96; |
| setup(function() { |
| // Setup a real SVG document, so SVGLength can resolve relative units. |
| var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); |
| svgElement.setAttribute("width", "150"); |
| svgElement.setAttribute("height", "50"); |
| svgElement.setAttribute("viewBox", "0 0 150 50"); |
| var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect"); |
| rectElement.setAttribute("style", "visibility: hidden; font-size: 12px; font-family: Ahem;"); |
| svgElement.appendChild(rectElement); |
| document.querySelector("p").appendChild(svgElement); |
| |
| // Extract test information |
| window.length = rectElement.x.baseVal; |
| window.svgWidth = svgElement.width.baseVal.value; |
| window.svgHeight = svgElement.height.baseVal.value; |
| window.fontSize = 12; |
| window.xHeight = calculateXHeight(); |
| |
| function calculateXHeight() { |
| // Crude hack to calculate the x-height |
| var divElement = document.createElement("div"); |
| divElement.setAttribute("style", "height: 1ex; font-size: 12px; font-family: Ahem;"); |
| var pElement = document.querySelector("p"); |
| pElement.appendChild(divElement); |
| var xHeight = divElement.offsetHeight; |
| pElement.removeChild(divElement); |
| return xHeight; |
| } |
| }); |
| |
| test(function() { |
| 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() { |
| length.valueAsString = "3px"; |
| length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE); |
| var referenceValue = 3 / svgWidth * 100; |
| assert_equals(length.valueAsString, referenceValue + "%"); |
| assert_equals(length.valueInSpecifiedUnits, referenceValue); |
| assert_equals(length.value, 3); |
| assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PERCENTAGE); |
| }, document.title + ", percentage"); |
| |
| test(function() { |
| length.valueAsString = "6px"; |
| length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS); |
| var referenceValue = 6 / fontSize; |
| assert_equals(length.valueAsString, referenceValue + "em"); |
| assert_equals(length.valueInSpecifiedUnits, referenceValue); |
| assert_equals(length.value, 6); |
| assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_EMS); |
| }, document.title + ", ems"); |
| |
| test(function() { |
| 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() { |
| 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.001); |
| assert_equals(length.value, 48); |
| assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_CM); |
| }, document.title + ", cm"); |
| |
| test(function() { |
| 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.001); |
| assert_equals(length.value, 48); |
| assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_MM); |
| }, document.title + ", mm"); |
| |
| test(function() { |
| 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() { |
| 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() { |
| 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> |