Bug Tracker

Ticket #760: jquery-css-fontsize-ie-proof.html

File jquery-css-fontsize-ie-proof.html, 3.0 KB (added by haruka, September 01, 2009 02:54AM UTC)

this is a proof of the patch's concept.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
	<title>font-size test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<style><!--
body { font-size: 16px; }
div.test-em { font-size: 2.0em; }
div.test-percent { font-size: 150%; }
--></style>
<script><!--
$(document).ready(function(){
	function test (expected, target) {
		var result = $(target).css("font-size");
		if (parseInt(result.replace(/px$/)) == expected) {
			return "OK [" + target + "] font-size:" + result;
		}else{
			return "NG [" + target + "] font-size:" + result + ", expected:"+expected;
		}
	}

	function print (message) {
		$("<div></div>").text(message).appendTo($("#result"));
	}

	print("before patch");
	print(test(32, "div.test-em"));
	print(test(24, "div.test-percent"));

	dynamic_patch();

	print("after patched");
	print(test(32, "div.test-em"));
	print(test(24, "div.test-percent"));
});

function dynamic_patch() {
	var	defaultView = document.defaultView || {};
	
	jQuery.curCSS = function( elem, name, force ) {
		var ret, style = elem.style;

		// We need to handle opacity special in IE
		if ( name == "opacity" && !jQuery.support.opacity ) {
			ret = jQuery.attr( style, "opacity" );

			return ret == "" ?
				"1" :
				ret;
		}

		// Make sure we're using the right name for getting the float value
		if ( name.match( /float/i ) )
			name = styleFloat;

		if ( !force && style && style[ name ] )
			ret = style[ name ];

		else if ( defaultView.getComputedStyle ) {

			// Only "float" is needed here
			if ( name.match( /float/i ) )
				name = "float";

			name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();

			var computedStyle = defaultView.getComputedStyle( elem, null );

			if ( computedStyle )
				ret = computedStyle.getPropertyValue( name );

			// We should always get a number back from opacity
			if ( name == "opacity" && ret == "" )
				ret = "1";

		} else if ( elem.currentStyle ) {
			var camelCase = name.replace(/\-(\w)/g, function(all, letter){
				return letter.toUpperCase();
			});

			ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];

			// From the awesome hack by Dean Edwards
			// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291

			// If we're not dealing with a regular pixel number
			// but a number that has a weird ending, we need to convert it to pixels
			if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
				// Remember the original values
				var left = style.left, rsLeft = elem.runtimeStyle.left;

				// Put in the new values to get a computed value out
				elem.runtimeStyle.left = elem.currentStyle.left;
				style.left = (camelCase == "fontSize") ? "1em" : (ret || 0);
				ret = style.pixelLeft + "px";

				// Revert the changed values
				style.left = left;
				elem.runtimeStyle.left = rsLeft;
			}
		}

		return ret;
	};
}
--></script>
<body>
	body
	<div class="test-em">test</div>
	<div class="test-percent">test</div>
	<hr>
	<div id="result"></div>
</body>
</html>

Download in other formats:

Original Format