third_party/WebKit/LayoutTests/svg/dom/SVGLength-px-with-context.html - chromium/src.git - Git at Google

 <!DOCTYPE HTML>
 <title>SVGLength, converting from 'px' to other units (attached)</title>
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <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 = parseInt(rectElement.style.fontSize);
   // TODO(shanmuga.m) : // Since calculateXHeight() triggers force layout, relative length units are resolved.
   // So make convertToSpecifiedUnits to update pending style sheet and do relayout if needed.
   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 = "2px";
   length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
   var referenceValue = Number(2 / svgWidth * 100).toFixed(5);
   assert_equals(length.valueAsString, referenceValue + "%");
   assert_equals(length.valueInSpecifiedUnits.toFixed(5), referenceValue);
   assert_equals(length.value.toFixed(1), "2.0");
   assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
 }, document.title + ", percentage");

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

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

 test(function() {
   length.valueAsString = "2px";
   length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM);
   var referenceValue = Number(2 * 2.54 / cssPixelsPerInch).toFixed(7);
   assert_equals(length.valueAsString, referenceValue + "cm");
   assert_equals(length.valueInSpecifiedUnits.toFixed(7), referenceValue);
   assert_equals(length.value.toFixed(1), "2.0");
   assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_CM);
 }, document.title + ", cm");

 test(function() {
   length.valueAsString = "2px";
   length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM);
   var referenceValue = Number(2 * 25.4 / cssPixelsPerInch).toFixed(6);
   assert_equals(length.valueAsString, referenceValue + "mm");
   assert_equals(length.valueInSpecifiedUnits.toFixed(6), referenceValue);
   assert_equals(length.value.toFixed(1), "2.0");
   assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_MM);
 }, document.title + ", mm");

 test(function() {
   length.valueAsString = "2px";
   length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);
   var referenceValue = Number(2 / cssPixelsPerInch).toFixed(7);
   assert_equals(length.valueAsString, referenceValue + "in");
   assert_equals(length.valueInSpecifiedUnits.toFixed(7), referenceValue);
   assert_equals(length.value.toFixed(1), "2.0");
   assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_IN);
 }, document.title + ", in");

 test(function() {
   length.valueAsString = "2px";
   length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT);
   var referenceValue = Number(2 / cssPixelsPerInch * 72);
   assert_equals(length.valueAsString, referenceValue + "pt");
   assert_equals(length.valueInSpecifiedUnits, referenceValue);
   assert_equals(length.value.toFixed(1), "2.0");
   assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PT);
 }, document.title + ", pt");

 test(function() {
   length.valueAsString = "2px";
   length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PC);
   var referenceValue = Number(2 / cssPixelsPerInch * 6).toFixed(3);
   // Don't check valueAsString here, it's unreliable across browsers.
   assert_equals(length.valueInSpecifiedUnits.toFixed(3), referenceValue);
   assert_equals(length.value.toFixed(1), "2.0");
   assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PC);
 }, document.title + ", pc");
 </script>
	<!DOCTYPE HTML>
	<title>SVGLength, converting from 'px' to other units (attached)</title>
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	<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 = parseInt(rectElement.style.fontSize);
	// TODO(shanmuga.m) : // Since calculateXHeight() triggers force layout, relative length units are resolved.
	// So make convertToSpecifiedUnits to update pending style sheet and do relayout if needed.
	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 = "2px";
	length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
	var referenceValue = Number(2 / svgWidth * 100).toFixed(5);
	assert_equals(length.valueAsString, referenceValue + "%");
	assert_equals(length.valueInSpecifiedUnits.toFixed(5), referenceValue);
	assert_equals(length.value.toFixed(1), "2.0");
	assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PERCENTAGE);
	}, document.title + ", percentage");

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

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

	test(function() {
	length.valueAsString = "2px";
	length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM);
	var referenceValue = Number(2 * 2.54 / cssPixelsPerInch).toFixed(7);
	assert_equals(length.valueAsString, referenceValue + "cm");
	assert_equals(length.valueInSpecifiedUnits.toFixed(7), referenceValue);
	assert_equals(length.value.toFixed(1), "2.0");
	assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_CM);
	}, document.title + ", cm");

	test(function() {
	length.valueAsString = "2px";
	length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM);
	var referenceValue = Number(2 * 25.4 / cssPixelsPerInch).toFixed(6);
	assert_equals(length.valueAsString, referenceValue + "mm");
	assert_equals(length.valueInSpecifiedUnits.toFixed(6), referenceValue);
	assert_equals(length.value.toFixed(1), "2.0");
	assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_MM);
	}, document.title + ", mm");

	test(function() {
	length.valueAsString = "2px";
	length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);
	var referenceValue = Number(2 / cssPixelsPerInch).toFixed(7);
	assert_equals(length.valueAsString, referenceValue + "in");
	assert_equals(length.valueInSpecifiedUnits.toFixed(7), referenceValue);
	assert_equals(length.value.toFixed(1), "2.0");
	assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_IN);
	}, document.title + ", in");

	test(function() {
	length.valueAsString = "2px";
	length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT);
	var referenceValue = Number(2 / cssPixelsPerInch * 72);
	assert_equals(length.valueAsString, referenceValue + "pt");
	assert_equals(length.valueInSpecifiedUnits, referenceValue);
	assert_equals(length.value.toFixed(1), "2.0");
	assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PT);
	}, document.title + ", pt");

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