Bug Tracker

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

File jquery-css-fontsize-ie-proof.html, 3.0 KB (added by haruka, 10 years ago)

this is a proof of the patch's concept.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
2<html>
3<head>
4        <title>font-size test</title>
5        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
6</head>
7<style><!--
8body { font-size: 16px; }
9div.test-em { font-size: 2.0em; }
10div.test-percent { font-size: 150%; }
11--></style>
12<script><!--
13$(document).ready(function(){
14        function test (expected, target) {
15                var result = $(target).css("font-size");
16                if (parseInt(result.replace(/px$/)) == expected) {
17                        return "OK [" + target + "] font-size:" + result;
18                }else{
19                        return "NG [" + target + "] font-size:" + result + ", expected:"+expected;
20                }
21        }
22
23        function print (message) {
24                $("<div></div>").text(message).appendTo($("#result"));
25        }
26
27        print("before patch");
28        print(test(32, "div.test-em"));
29        print(test(24, "div.test-percent"));
30
31        dynamic_patch();
32
33        print("after patched");
34        print(test(32, "div.test-em"));
35        print(test(24, "div.test-percent"));
36});
37
38function dynamic_patch() {
39        var     defaultView = document.defaultView || {};
40       
41        jQuery.curCSS = function( elem, name, force ) {
42                var ret, style = elem.style;
43
44                // We need to handle opacity special in IE
45                if ( name == "opacity" && !jQuery.support.opacity ) {
46                        ret = jQuery.attr( style, "opacity" );
47
48                        return ret == "" ?
49                                "1" :
50                                ret;
51                }
52
53                // Make sure we're using the right name for getting the float value
54                if ( name.match( /float/i ) )
55                        name = styleFloat;
56
57                if ( !force && style && style[ name ] )
58                        ret = style[ name ];
59
60                else if ( defaultView.getComputedStyle ) {
61
62                        // Only "float" is needed here
63                        if ( name.match( /float/i ) )
64                                name = "float";
65
66                        name = name.replace( /([A-Z])/g, "-$1" ).toLowerCase();
67
68                        var computedStyle = defaultView.getComputedStyle( elem, null );
69
70                        if ( computedStyle )
71                                ret = computedStyle.getPropertyValue( name );
72
73                        // We should always get a number back from opacity
74                        if ( name == "opacity" && ret == "" )
75                                ret = "1";
76
77                } else if ( elem.currentStyle ) {
78                        var camelCase = name.replace(/\-(\w)/g, function(all, letter){
79                                return letter.toUpperCase();
80                        });
81
82                        ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];
83
84                        // From the awesome hack by Dean Edwards
85                        // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
86
87                        // If we're not dealing with a regular pixel number
88                        // but a number that has a weird ending, we need to convert it to pixels
89                        if ( !/^\d+(px)?$/i.test( ret ) && /^\d/.test( ret ) ) {
90                                // Remember the original values
91                                var left = style.left, rsLeft = elem.runtimeStyle.left;
92
93                                // Put in the new values to get a computed value out
94                                elem.runtimeStyle.left = elem.currentStyle.left;
95                                style.left = (camelCase == "fontSize") ? "1em" : (ret || 0);
96                                ret = style.pixelLeft + "px";
97
98                                // Revert the changed values
99                                style.left = left;
100                                elem.runtimeStyle.left = rsLeft;
101                        }
102                }
103
104                return ret;
105        };
106}
107--></script>
108<body>
109        body
110        <div class="test-em">test</div>
111        <div class="test-percent">test</div>
112        <hr>
113        <div id="result"></div>
114</body>
115</html>