colormatch/trunk/boxsizing.htc

<component lightWeight="true">
<attach event="onpropertychange" onevent="checkPropertyChange()" />
<attach event="ondetach" onevent="restore()" />
<script>
//<![CDATA[

var doc = element.document;

function init() {
        updateBorderBoxWidth();
        updateBorderBoxHeight();
}

function restore() {
        element.runtimeStyle.width = "";
        element.runtimeStyle.height = "";
}

/* border width getters */
function getBorderWidth(sSide) {
        if (element.currentStyle["border" + sSide + "Style"] == "none")
                return 0;
        var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
        return n || 0;
}

function getBorderLeftWidth() { return getBorderWidth("Left"); }
function getBorderRightWidth() { return getBorderWidth("Right"); }
function getBorderTopWidth() { return getBorderWidth("Top"); }
function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
/* end border width getters */

/* padding getters */
function getPadding(sSide) {
        var n = parseInt(element.currentStyle["padding" + sSide]);
        return n || 0;
}

function getPaddingLeft() { return getPadding("Left"); }
function getPaddingRight() { return getPadding("Right"); }
function getPaddingTop() { return getPadding("Top"); }
function getPaddingBottom() { return getPadding("Bottom"); }
/* end padding getters */

function getBoxSizing() {
        var s = element.style;
        var cs = element.currentStyle

        if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
                return s.boxSizing;
        if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
                return s["box-sizing"];
        if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
                return cs.boxSizing;
        if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
                return cs["box-sizing"];
        return getDocumentBoxSizing();
}

function getDocumentBoxSizing() {
        if (doc.compatMode == null || doc.compatMode == "BackCompat")
                return "border-box";
        return "content-box"
}

/* width and height setters */
function setBorderBoxWidth(n) {
        element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
                getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
}

function setBorderBoxHeight(n) {
        element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
                getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
}

function setContentBoxWidth(n) {
        element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
                getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
}

function setContentBoxHeight(n) {
        element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
                getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
}
/* end width and height setters */

function updateBorderBoxWidth() {
        element.runtimeStyle.width = "";
        if (getDocumentBoxSizing() == getBoxSizing())
                return;
        var csw = element.currentStyle.width;
        if (csw != "auto" && csw.indexOf("px") != -1) {
                if (getBoxSizing() == "border-box")
                        setBorderBoxWidth(parseInt(csw));
                else
                        setContentBoxWidth(parseInt(csw));
        }
}

function updateBorderBoxHeight() {
        element.runtimeStyle.height = "";       
        if (getDocumentBoxSizing() == getBoxSizing())
                return;
        var csh = element.currentStyle.height;
        if (csh != "auto" && csh.indexOf("px") != -1) {
                if (getBoxSizing() == "border-box")
                        setBorderBoxHeight(parseInt(csh));
                else
                        setContentBoxHeight(parseInt(csh));
        }
}

function checkPropertyChange() {
        var pn = event.propertyName;
        var undef;

        if (pn == "style.boxSizing" && element.style.boxSizing == "") {
                element.style.removeAttribute("boxSizing");
                element.runtimeStyle.boxSizing = undef;         
        }


        switch (pn) {
                case "style.width":
                case "style.borderLeftWidth":
                case "style.borderLeftStyle":
                case "style.borderRightWidth":
                case "style.borderRightStyle":
                case "style.paddingLeft":
                case "style.paddingRight":
                        updateBorderBoxWidth();
                        break;
                
                case "style.height":
                case "style.borderTopWidth":
                case "style.borderTopStyle":
                case "style.borderBottomWidth":
                case "style.borderBottomStyle":
                case "style.paddingTop":
                case "style.paddingBottom":
                        updateBorderBoxHeight();
                        break;
                
                case "className":
                case "style.boxSizing":
                        updateBorderBoxWidth();
                        updateBorderBoxHeight();
                        break;
        }
}

init();

//]]>
</script>
</component>
1	dpavlin	1	<component lightWeight="true">
2			<attach event="onpropertychange" onevent="checkPropertyChange()" />
3			<attach event="ondetach" onevent="restore()" />
4			<script>
5			//<![CDATA[
6
7			var doc = element.document;
8
9			function init() {
10			updateBorderBoxWidth();
11			updateBorderBoxHeight();
12			}
13
14			function restore() {
15			element.runtimeStyle.width = "";
16			element.runtimeStyle.height = "";
17			}
18
19			/* border width getters */
20			function getBorderWidth(sSide) {
21			if (element.currentStyle["border" + sSide + "Style"] == "none")
22			return 0;
23			var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
24			return n \|\| 0;
25			}
26
27			function getBorderLeftWidth() { return getBorderWidth("Left"); }
28			function getBorderRightWidth() { return getBorderWidth("Right"); }
29			function getBorderTopWidth() { return getBorderWidth("Top"); }
30			function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
31			/* end border width getters */
32
33			/* padding getters */
34			function getPadding(sSide) {
35			var n = parseInt(element.currentStyle["padding" + sSide]);
36			return n \|\| 0;
37			}
38
39			function getPaddingLeft() { return getPadding("Left"); }
40			function getPaddingRight() { return getPadding("Right"); }
41			function getPaddingTop() { return getPadding("Top"); }
42			function getPaddingBottom() { return getPadding("Bottom"); }
43			/* end padding getters */
44
45			function getBoxSizing() {
46			var s = element.style;
47			var cs = element.currentStyle
48
49			if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
50			return s.boxSizing;
51			if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
52			return s["box-sizing"];
53			if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
54			return cs.boxSizing;
55			if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
56			return cs["box-sizing"];
57			return getDocumentBoxSizing();
58			}
59
60			function getDocumentBoxSizing() {
61			if (doc.compatMode == null \|\| doc.compatMode == "BackCompat")
62			return "border-box";
63			return "content-box"
64			}
65
66			/* width and height setters */
67			function setBorderBoxWidth(n) {
68			element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
69			getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
70			}
71
72			function setBorderBoxHeight(n) {
73			element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
74			getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
75			}
76
77			function setContentBoxWidth(n) {
78			element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
79			getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
80			}
81
82			function setContentBoxHeight(n) {
83			element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
84			getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
85			}
86			/* end width and height setters */
87
88			function updateBorderBoxWidth() {
89			element.runtimeStyle.width = "";
90			if (getDocumentBoxSizing() == getBoxSizing())
91			return;
92			var csw = element.currentStyle.width;
93			if (csw != "auto" && csw.indexOf("px") != -1) {
94			if (getBoxSizing() == "border-box")
95			setBorderBoxWidth(parseInt(csw));
96			else
97			setContentBoxWidth(parseInt(csw));
98			}
99			}
100
101			function updateBorderBoxHeight() {
102			element.runtimeStyle.height = "";
103			if (getDocumentBoxSizing() == getBoxSizing())
104			return;
105			var csh = element.currentStyle.height;
106			if (csh != "auto" && csh.indexOf("px") != -1) {
107			if (getBoxSizing() == "border-box")
108			setBorderBoxHeight(parseInt(csh));
109			else
110			setContentBoxHeight(parseInt(csh));
111			}
112			}
113
114			function checkPropertyChange() {
115			var pn = event.propertyName;
116			var undef;
117
118			if (pn == "style.boxSizing" && element.style.boxSizing == "") {
119			element.style.removeAttribute("boxSizing");
120			element.runtimeStyle.boxSizing = undef;
121			}
122
123
124			switch (pn) {
125			case "style.width":
126			case "style.borderLeftWidth":
127			case "style.borderLeftStyle":
128			case "style.borderRightWidth":
129			case "style.borderRightStyle":
130			case "style.paddingLeft":
131			case "style.paddingRight":
132			updateBorderBoxWidth();
133			break;
134
135			case "style.height":
136			case "style.borderTopWidth":
137			case "style.borderTopStyle":
138			case "style.borderBottomWidth":
139			case "style.borderBottomStyle":
140			case "style.paddingTop":
141			case "style.paddingBottom":
142			updateBorderBoxHeight();
143			break;
144
145			case "className":
146			case "style.boxSizing":
147			updateBorderBoxWidth();
148			updateBorderBoxHeight();
149			break;
150			}
151			}
152
153			init();
154
155			//]]>
156			</script>
157			</component>