1 <component lightWeight="true">
\r
2 <attach event="onpropertychange" onevent="checkPropertyChange()" />
\r
3 <attach event="ondetach" onevent="restore()" />
\r
7 var doc = element.document;
\r
10 updateBorderBoxWidth();
\r
11 updateBorderBoxHeight();
\r
14 function restore() {
\r
15 element.runtimeStyle.width = "";
\r
16 element.runtimeStyle.height = "";
\r
19 /* border width getters */
\r
20 function getBorderWidth(sSide) {
\r
21 if (element.currentStyle["border" + sSide + "Style"] == "none")
\r
23 var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
\r
27 function getBorderLeftWidth() { return getBorderWidth("Left"); }
\r
28 function getBorderRightWidth() { return getBorderWidth("Right"); }
\r
29 function getBorderTopWidth() { return getBorderWidth("Top"); }
\r
30 function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
\r
31 /* end border width getters */
\r
33 /* padding getters */
\r
34 function getPadding(sSide) {
\r
35 var n = parseInt(element.currentStyle["padding" + sSide]);
\r
39 function getPaddingLeft() { return getPadding("Left"); }
\r
40 function getPaddingRight() { return getPadding("Right"); }
\r
41 function getPaddingTop() { return getPadding("Top"); }
\r
42 function getPaddingBottom() { return getPadding("Bottom"); }
\r
43 /* end padding getters */
\r
45 function getBoxSizing() {
\r
46 var s = element.style;
\r
47 var cs = element.currentStyle
\r
49 if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
\r
51 if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
\r
52 return s["box-sizing"];
\r
53 if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
\r
54 return cs.boxSizing;
\r
55 if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
\r
56 return cs["box-sizing"];
\r
57 return getDocumentBoxSizing();
\r
60 function getDocumentBoxSizing() {
\r
61 if (doc.compatMode == null || doc.compatMode == "BackCompat")
\r
62 return "border-box";
\r
63 return "content-box"
\r
66 /* width and height setters */
\r
67 function setBorderBoxWidth(n) {
\r
68 element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
\r
69 getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
\r
72 function setBorderBoxHeight(n) {
\r
73 element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
\r
74 getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
\r
77 function setContentBoxWidth(n) {
\r
78 element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
\r
79 getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
\r
82 function setContentBoxHeight(n) {
\r
83 element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
\r
84 getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
\r
86 /* end width and height setters */
\r
88 function updateBorderBoxWidth() {
\r
89 element.runtimeStyle.width = "";
\r
90 if (getDocumentBoxSizing() == getBoxSizing())
\r
92 var csw = element.currentStyle.width;
\r
93 if (csw != "auto" && csw.indexOf("px") != -1) {
\r
94 if (getBoxSizing() == "border-box")
\r
95 setBorderBoxWidth(parseInt(csw));
\r
97 setContentBoxWidth(parseInt(csw));
\r
101 function updateBorderBoxHeight() {
\r
102 element.runtimeStyle.height = "";
\r
103 if (getDocumentBoxSizing() == getBoxSizing())
\r
105 var csh = element.currentStyle.height;
\r
106 if (csh != "auto" && csh.indexOf("px") != -1) {
\r
107 if (getBoxSizing() == "border-box")
\r
108 setBorderBoxHeight(parseInt(csh));
\r
110 setContentBoxHeight(parseInt(csh));
\r
114 function checkPropertyChange() {
\r
115 var pn = event.propertyName;
\r
118 if (pn == "style.boxSizing" && element.style.boxSizing == "") {
\r
119 element.style.removeAttribute("boxSizing");
\r
120 element.runtimeStyle.boxSizing = undef;
\r
125 case "style.width":
\r
126 case "style.borderLeftWidth":
\r
127 case "style.borderLeftStyle":
\r
128 case "style.borderRightWidth":
\r
129 case "style.borderRightStyle":
\r
130 case "style.paddingLeft":
\r
131 case "style.paddingRight":
\r
132 updateBorderBoxWidth();
\r
135 case "style.height":
\r
136 case "style.borderTopWidth":
\r
137 case "style.borderTopStyle":
\r
138 case "style.borderBottomWidth":
\r
139 case "style.borderBottomStyle":
\r
140 case "style.paddingTop":
\r
141 case "style.paddingBottom":
\r
142 updateBorderBoxHeight();
\r
146 case "style.boxSizing":
\r
147 updateBorderBoxWidth();
\r
148 updateBorderBoxHeight();
\r