0.6.x/js/dom/15_XDomStyle.js

   1
   2
   3 /*
   4  * style 値の変更は、enterFrame 後にまとめて適用
   5  * width(), height(), x(), y() 1em の取得時にも適用
   6  * css3 の ie用 fix は X.UI レベルで行う
   7  *
   8  * use X.Dom.Event
   9  */
  10 X.Dom.Style = {
  11
  12         Type : {
  13                 LENGTH            : 1,
  14                 PERCENT           : 2,
  15                 COLOR             : 2 < 2,
  16                 U_DECIMAL         : 2 < 3,
  17                 NUMERICAL         : 2 < 4,
  18                 BOOLEAN           : 2 < 5,
  19                 QUARTET           : 2 < 6,
  20                 URL               : 2 < 7,
  21                 FONT_NAME         : 2 < 8,
  22                 TIME              : 2 < 9,
  23                 CONTENT           : 2 < 10,
  24                 LIST              : 2 < 11,
  25                 AUTO              : 2 < 12,
  26                 COMBI             : 2 < 13
  27         },
  28
  29         SPECIAL_VALUES : {
  30                 AUTO : Number.POSITIVE_INFINITY,
  31                 FULL : X.Dom // something unigue value; 100%
  32         },
  33
  34         PropNo : {},
  35
  36         UNIT : {
  37                 // '' : 0,
  38                 'px'   : 0,
  39                 'em'   : 1,
  40                 'cm'   : 2,
  41                 'mm'   : 3,
  42                 'in'   : 4,
  43                 '%'    : 5,
  44                 'pct'  : 5,
  45                 'ms'   : 6,
  46                 's'    : 7,
  47                 '#'    : 8,
  48                 'rgb'  : 9,
  49                 'rgba' : 10
  50         },
  51
  52         /* font-size -> fontSize */
  53         _DICTIONARY_CAMELIZE : {},
  54
  55         camelize : function( cssProp ){
  56                 var me  = X.Dom.Style,
  57                         parts, l, i, camelized;
  58
  59                 if( camelized = me._DICTIONARY_CAMELIZE[ cssProp ] ) return camelized;
  60                 parts = cssProp.split( ' ' ).join( '' ).split( '-' );
  61                 l     = parts.length;
  62                 if( l === 1 ) return parts[ 0 ];
  63
  64                 camelized = cssProp.charAt(0) === '-'
  65                   ? parts[ 0 ].charAt( 0 ).toUpperCase() + parts[ 0 ].substring( 1 )
  66                   : parts[ 0 ];
  67
  68                 for( i = 1; i < l; ++i ){
  69                         camelized += parts[ i ].charAt( 0 ).toUpperCase() + parts[ i ].substring( 1 );
  70                 };
  71                 return me._DICTIONARY_CAMELIZE[ cssProp ] = camelized;
  72         },
  73
  74         /* fontSize -> font-size */
  75         /*
  76         REG_LARGE : /[A-Z]/g,
  77         uncamelize: function( str ){
  78                 return str.split( ' ' ).join( '' ).replace( X.Dom.Style.REG_LARGE, '-$&' ).toLowerCase();
  79         }, */
  80
  81         CHAR_CODE_A : 'A'.charCodeAt( 0 ),
  82
  83         _DICTIONARY_UNCAMELIZE : {},
  84
  85         uncamelize : function( str ){
  86                 var me  = X.Dom.Style,
  87                         A   = me.CHAR_CODE_A,
  88                         Z   = A + 25,
  89                         uncamelized, l, chr, code;
  90                 str = str.split( ' ' ).join( '' );
  91                 if( uncamelized = me._DICTIONARY_UNCAMELIZE[ str ] ) return uncamelized;
  92                 uncamelized = '';
  93                 for( i = 0, l = str.length; i < l; ++i ){
  94                         chr = str.charAt( i );
  95                         code = chr.charCodeAt( 0 );
  96                         uncamelized += ( A <= code && code <= Z ) ? '-' + chr : chr;
  97                 };
  98                 return me._DICTIONARY_UNCAMELIZE[ str ] = uncamelized.toLowerCase();
  99         },
 100
 101 /*
 102  * CSS における display, position, float プロパティの相互関係
 103  * http://d.hatena.ne.jp/elm200/20080201/1201874740
 104  *
 105  * CSS21:9.7 Relationships between ’display’, ’position’, and ’float’
 106  * http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
 107  *
 108  *   display:none? -yes-> 非表示
 109  *    ↓
 110  *   position:absolute? -yes-> float:none,display:block;
 111  *    ↓
 112  *   float:none? -no-> display:block;
 113  *    ↓
 114  *   display:そのまま
 115  *
 116  *
 117 display         position                        float
 118 block           static|relative         none
 119 block           static|relative         right|left
 120 block           absolute                        none
 121 inline          static|relative         none
 122
 123 _DISPLAY_NONE
 124 _ABSOLUTE_BOX
 125 _FLOAT_BOX
 126 _GRNERAL
 127  */
 128         objToCssText : function( obj ){
 129                 var css           = [],
 130                         me            = X.Dom.Style,
 131                         uncamelize    = me.uncamelize,
 132                         VENDER_PREFIX = me.VENDER_PREFIX,
 133                         FIX_PROP      = me.SPECIAL_FIX_PROP,
 134                         SPECIAL_FIX   = me.SPECIAL_FIX,
 135                         n             = -1,
 136                         p, name, sp;
 137                 for( p in obj ){
 138                         name = uncamelize( p );
 139                         if( FIX_PROP[ name ] ){
 140                                 sp = 1;
 141                         } else {
 142                                 css[ ++n ] = [ VENDER_PREFIX[ name ] || name, obj[ p ] ].join( ':' );
 143                         };
 144                 };
 145                 sp && ( css[ ++n ] = 'filter:' + SPECIAL_FIX( obj ) );
 146                 return css.join( ';' );
 147         },
 148
 149         IE_FILTER_FIX :
 150                 X.UA.IE && X.UA.IE < 9 ?
 151                         {
 152                                 opacity : 1,
 153                                 textShadow : 1
 154                         } :
 155                 9 <= X.UA.IE && X.UA.IE < 10 ? // == 9
 156                         {} :
 157                         {},
 158
 159         _UNIT_RATIO      : null,
 160         _FONT_SIZE_RATIO : null,
 161
 162         //  https://developer.mozilla.org/en-US/docs/Web/CSS/transform
 163         //  Firefox 3.5, ie9, Opera 10.5, Safari 3.1, Chrome
 164         //  3D support Firefox 10, ie10, Safari 4.0, Chrome 12.0
 165         // transform : void 0,
 166
 167         //  https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_transitions
 168         //  Chrome 1.0, Firefox 4.0, ie10, Opera 10.5, Safari 3.2
 169         //  Android 2.1, Firefox Android 4.0, Opera Mobile 10, Safari Mobile 3.2
 170         // transition : void 0
 171
 172         // ブラウザ毎の getComputedStyle の戻り値 http://d.hatena.ne.jp/uupaa/20080928/1222543331
 173
 174         COLOR : {
 175                 BLACK         : 0x0,
 176                 RED           : 0xFF0000,
 177                 LIME          : 0x00FF00,
 178                 BLUE          : 0x0000FF,
 179                 YELLOW        : 0xFFFF00,
 180                 AQUA          : 0x00FFFF,
 181                 CYAN          : 0x00FFFF,
 182                 MAGENTA       : 0xFF00FF,
 183                 FUCHSIA       : 0xFF00FF,
 184                 WHITE         : 0xFFFFFF,
 185                 GREEN         : 0x008000,
 186                 PURPLE        : 0x800080,
 187                 MAROON        : 0x800000,
 188                 NAVY          : 0x000080,
 189                 OLIVE         : 0x808000,
 190                 TEAL          : 0x008080,
 191                 GRAY          : 0x808080,
 192                 SILVER        : 0xC0C0C0,
 193                 DIMGRAY       : 0x696969,
 194                 SLATEGRAY     : 0x708090,
 195                 DARKGRAY      : 0xA9A9A9,
 196                 GAINSBORO     : 0xDCDCDC,
 197                 MIDNIGHTBLUE  : 0x191970,
 198                 SLATEBLUE     : 0x6A5ACD,
 199                 MEDIUMBLUE    : 0x0000CD,
 200                 ROYALBLUE     : 0x4169E1,
 201                 DODGERBLUE    : 0x1E90FF,
 202                 SKYBLUE       : 0x87CEEB,
 203                 STEELBLUE     : 0x4682B4,
 204                 LIGHTBLUE     : 0xADD8E6,
 205                 PALETURQUOISE : 0xAFEEEE,
 206                 TURQUOISE     : 0x40E0D0,
 207                 LIGHTCYAN     : 0xE0FFFF,
 208                 AQUAMARINE    : 0x7FFFD4,
 209                 DARKGREEN     : 0x006400,
 210                 SEAGREEN      : 0x2E8B57,
 211                 LIGHTGREEN    : 0x90EE90,
 212                 CHARTREUSE    : 0x7FFF00,
 213                 GREENYELLOW   : 0xADFF2F,
 214                 LIMEGREEN     : 0x32CD32,
 215                 YELLOWGREEN   : 0x9ACD32,
 216                 OLIVEDRAB     : 0x6B8E23,
 217                 DARKKHAKI     : 0xBCB76B,
 218                 PALEGOLDENROD : 0xEEE8AA,
 219                 LIGHTYELLOW   : 0xFFFFE0,
 220                 GOLD          : 0xFFD700,
 221                 GOLDENROD     : 0xDAA520,
 222                 DARKGOLDENROD : 0xB8860B,
 223                 ROSYBROWN     : 0xBC8F8F,
 224                 INDIANRED     : 0xCD5C5C,
 225                 SADDLEBROWN   : 0x8B4513,
 226                 SIENNA        : 0xA0522D,
 227                 PERU          : 0xCD853F,
 228                 BURLYWOOD     : 0xDEB887,
 229                 BEIGE         : 0xF5F5DC,
 230                 WHEAT         : 0xF5DEB3,
 231                 SANDYBROWN    : 0xF4A460,
 232                 TAN           : 0xD2B48C,
 233                 CHOCOLATE     : 0xD2691E,
 234                 FIREBRICK     : 0xB22222,
 235                 BROWN         : 0xA52A2A,
 236                 SALMON        : 0xFA8072,
 237                 ORANGE        : 0xFFA500,
 238                 CORAL         : 0xFF7F50,
 239                 TOMATO        : 0xFF6347,
 240                 HOTPINK       : 0xFF69B4,
 241                 PINK          : 0xFFC0CB,
 242                 DEEPPINK      : 0xFF1493,
 243                 PALEVIOLETRED : 0xDB7093,
 244                 VIOLET        : 0xEE82EE,
 245                 PLUM          : 0xDDA0DD,
 246                 ORCHILD       : 0xDA70D6,
 247                 DARKVIOLET    : 0x9400D3,
 248                 BLUEVIOLET    : 0x8A2BE2,
 249                 MEDIUMPURPLE  : 0x9370DB,
 250                 THISTLE       : 0xD8BFD8,
 251                 LAVENDER      : 0xE6E6FA,
 252                 MISTYROSE     : 0xFFE4E1,
 253                 IVORY         : 0xFFFFF0,
 254                 LEMONCHIFFON  : 0xFFFACD
 255         },
 256
 257         PARAMS : ( function(){
 258                 var ret = {};
 259                 register( ret.percent = {},
 260                         'marginBottom,marginLeft,marginRight,marginTop,paddingBottom,paddingLeft,paddingRight,paddingTop,fontSize,textIndent'
 261                 );
 262                 register( ret.offset = {},
 263                         'height,width,bottom,left,right,top'
 264                 );
 265                 register( ret.size = {},
 266                         'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth,letterSpacing,wordSpacing'
 267                 );
 268                 register( ret.color = {},
 269                         'backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color'
 270                 );
 271                 register( ret.region = {},
 272                         'margin,padding,borderWidth,borderColor'
 273                 );
 274                 register( ret.special = {},
 275                         'clip,backgroundPosition,backgroundPositionX,backgroundPositionY,opacity,lineHeight,zIndex'
 276                 );
 277                 register( ret.unit = {}, 'px,cm,mm,in,pt,pc,em,%' );
 278
 279                 register( ret.margin = {}, 'marginBottom,marginLeft,marginRight,marginTop,paddingBottom' );
 280                 register( ret.padding = {}, 'paddingBottom,paddingLeft,paddingRight,paddingTop' );
 281                 register( ret.borderWidth = {}, 'borderBottomWidth,borderLeftWidth,borderRightWidth,borderTopWidth' );
 282                 register( ret.borderColor = {}, 'borderBottomColor,borderLeftColor,borderRightColor,borderTopColor' );
 283
 284                 function register( obj, params ){
 285                         params = params.split( ',' );
 286                         for( var i = params.length; i; ) obj[ params[ --i ] ] = true;
 287                 };
 288                 return ret;
 289         })(),
 290
 291         _CLIP_SEPARATOR : X.UA.IE && X.UA.IE < 8 ? ' ' : ',',
 292
 293         /*
 294          *
 295          */
 296         Property : X.Class.create(
 297                 'Property',
 298                 X.Class.POOL_OBJECT,
 299                 {
 300                         Constructor : function( name, value, unit, xnode ){
 301                                 this.name  = name;
 302                                 this.value = value;
 303                                 this.unit  = unit;
 304                                 this.xnode = xnode;
 305                         },
 306                         name    : '',
 307                         value   : 0,
 308                         unit    : '',
 309                         xnode   : null,
 310                         equal : function( prop ){
 311                                 if( this.unit === prop.unit ){
 312                                         return this.value === prop.value;
 313                                 };
 314                                 return Math.abs( this.toPx() - prop.toPx() ) < 1;
 315                         },
 316                         convert: function( prop ){
 317                                 var u = prop.unit, v;
 318                                 if( this.unit === u ) return;
 319                                 this.value = v = this.toPx();
 320                                 this.unit  = u;
 321                                 // %
 322                                 // bgpX, bgpY の場合 X.Dom.Image.getActualDimension( backgroundImage url を使用 )
 323                                 if( u !== 'px' ){
 324                                         this.value =
 325                                                 u === 'em' ?
 326                                                         v / this.xnode._getCharSize() :
 327                                                         v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
 328                                 };
 329                         },
 330                         setValue: function( v ){
 331                                 this.value = v;
 332                         },
 333                         getValue: function(){
 334                                 return this.value;
 335                         },
 336                         getOffset: function( prop ){
 337                                 return prop.value - this.value;
 338                         },
 339                         getUnit: function(){
 340                                 return this.unit;
 341                         },
 342                         getValueText: function(){
 343                                 return this.value === 0 ? '0' : this.value + this.unit;
 344                         },
 345                         toPx: function(){
 346                                 var v = this.value, u = this.unit;
 347                                 return
 348                                         u === 'px' ?
 349                                                 v :
 350                                         ( u === 'em' || ( u === '' && this.name === 'lineHeight' ) ) ?
 351                                                 v * this.xnode._getCharSize() :
 352                                         // u === '%'
 353                                                 v / ( X.Dom.Style._UNIT_RATIO[ u ] || 1 );
 354                         },
 355                         isValid: function(){
 356                                 var p = X.Dom.Style.PARAMS,
 357                                         n = this.name,
 358                                         v = this.value,
 359                                         u = this.unit,
 360                                         z = u !== '' ? true : v === 0;
 361                                 if( p.percent[ n ] === true ) return z;
 362                                 if( p.offset[ n ]  === true ) return z;
 363                                 if( p.size[ n ]    === true ) return z && u !== '%';
 364                                 if( p.special[ n ] === true ){
 365                                         if( n === 'lineHeight' ) return true;
 366                                         if( n === 'opacity' )    return 0 <= v && v <= 1 && u === '';
 367                                         if( n === 'zIndex'  )    return u === '';
 368                                 };
 369                                 return false;
 370                         }
 371                 }
 372         ),
 373
 374         /**
 375          * backgroundPosition, clip
 376          */
 377         PropertyGroup : X.Class.create(
 378                 'PropertyGroup',
 379                 X.Class.POOL_OBJECT,
 380                 {
 381                         Constructor : function( name ){
 382                                 this.name  = name;
 383                                 this.props = [];
 384                                 for( var i = 1, l = arguments.length; i<l; ++i ){
 385                                         this.props[ this.props.length ] = arguments[ i ];
 386                                 };
 387                         },
 388                         name  : '',
 389                         equal : function( prop ){
 390                                 var ps = this.props, i = ps.length;
 391                                 for( ; i; ){
 392                                         --i;
 393                                         if( ps[ i ].equal( prop[ i ] ) === false ) return false;
 394                                 };
 395                                 return true;
 396                         },
 397                         convert : function( prop ){
 398                                 var ps = this.props, i = ps.length;
 399                                 for( ; i; ){
 400                                         --i;
 401                                         ps[ i ].convert( prop[ i ] );
 402                                 };
 403                         },
 404                         setValue : function( ary ){
 405                                 var ps = this.props, i = 0, l = ps.length;
 406                                 for( ; i<l; ++i ){
 407                                         ps[ i ].setValue( ary[ i ] );
 408                                 };
 409                         },
 410                         getValue : function(){
 411                                 var ret = [], ps = this.props, i = 0, l = ps.length;
 412                                 for( ; i<l; ++i ){
 413                                         ret[ ret.length ] = ps[ i ].getValue();
 414                                 };
 415                                 return ret;
 416                         },
 417                         getOffset : function( prop ){
 418                                 var ret = [],
 419                                         ps  = this.props,
 420                                         _ps = prop.props,
 421                                         i   = 0,
 422                                         l = ps.length;
 423                                 for( ; i<l; ++i ){
 424                                         ret[ ret.length ] = ps[ i ].getOffset( _ps[ i ] );
 425                                 };
 426                                 return ret;
 427                         },
 428                         getUnit : function(){
 429                                 var ret = [], ps = this.props, i = 0, l = ps.length;
 430                                 for( ; i<l; ++i ){
 431                                         ret[ ret.length ] = ps[ i ].getUnit();
 432                                 };
 433                                 return ret;
 434                         },
 435                         getValueText : function(){
 436                                 var ret = [], ps = this.props, i = 0, l = ps.length;
 437                                 for( ; i<l; ++i ){
 438                                         ret[ ret.length ] = ps[ i ].getValueText();
 439                                 };
 440                                 if( this.name === 'clip' ){
 441                                         return 'rect(' + ret.join( X.Dom.Style._CLIP_SEPARATOR ) + ')';
 442                                 };
 443                                 return ret.join( ' ' );
 444                         },
 445                         onKill : function(){
 446                                 var ps = this.props, i = ps.length;
 447                                 for( ; i; ){
 448                                         ps[ --i ].kill();
 449                                 };
 450                         },
 451                         isValid : function( t ){
 452                                 t = t || this;
 453                                 var ps = t.props, i = ps.length;
 454                                 for( ; i; ){
 455                                         if( ps[ --i ].isValid() === false ) return false;
 456                                 };
 457                                 return true;
 458                         }
 459                 }
 460         ),
 461
 462         /*
 463          * http://css-eblog.com/ie-css-problems/rgba-pe.html
 464          * ie67 では rgb() は background-color で反応しない、、、
 465          */
 466
 467         ColorProperty : X.Class.create(
 468                 'ColorProperty',
 469                 X.Class.POOL_OBJECT, {
 470                         Constructor : function( name, x ){
 471                                 var pct = false,
 472                                         r   = 0,
 473                                         g   = 0,
 474                                         b   = 0,
 475                                         a   = 1,
 476                                         rgb;
 477                                 if( X.Type.isNumber( rgb = x ) || X.Type.isNumber( rgb = X.Dom.Style.COLOR[ x.toUpperCase() ] ) ){
 478                                         r = ( rgb & 0xff0000 ) >> 16;
 479                                         g = ( rgb & 0xff00 ) >> 8;
 480                                         b = ( rgb & 0xff );
 481                                 } else
 482                                 if( x.charAt( 0 ) === '#' ){
 483                                         if( x.length === 7 ){
 484                                                 r = parseInt( x.charAt( 1 ) + x.charAt( 2 ), 16 );
 485                                                 g = parseInt( x.charAt( 3 ) + x.charAt( 4 ), 16 );
 486                                                 b = parseInt( x.charAt( 5 ) + x.charAt( 6 ), 16 );
 487                                         } else
 488                                         if( x.length === 4 ){
 489                                                 r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
 490                                                 g = parseInt( x.charAt( 2 ) + x.charAt( 2 ), 16 );
 491                                                 b = parseInt( x.charAt( 3 ) + x.charAt( 3 ), 16 );
 492                                         } else
 493                                         if( x.length === 2 ){
 494                                                 r = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
 495                                                 g = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
 496                                                 b = parseInt( x.charAt( 1 ) + x.charAt( 1 ), 16 );
 497                                         };
 498                                 } else
 499                                 if( x.indexOf( 'rgb(' ) === 0 ){
 500                                         rgb = x.substr( 4 ).split( ',' );
 501                                         r = parseFloat( rgb[ 0 ] );
 502                                         g = parseFloat( rgb[ 1 ] );
 503                                         b = parseFloat( rgb[ 2 ] );
 504                                         if( x.indexOf( '%' ) !== -1 ) pct = true;
 505                                 } else
 506                                 if( x.indexOf( 'rgba(' ) === 0 ){
 507                                         rgb = x.substr( 5 ).split( ',' );
 508                                         r = parseFloat( rgb[ 0 ] );
 509                                         g = parseFloat( rgb[ 1 ] );
 510                                         b = parseFloat( rgb[ 2 ] );
 511                                         a = parseFloat( rgb[ 3 ] );
 512                                         if( x.indexOf( '%' ) !== -1 ) pct = true;
 513                                 } else {
 514                                         r = 255;
 515                                         g = 255;
 516                                         b = 255;
 517                                 };
 518
 519                                 this.name = name;
 520                                 this.r    = r;
 521                                 this.g    = g;
 522                                 this.b    = b;
 523                                 this.a    = a;
 524                                 this.pct  = pct;
 525                         },
 526                         name  : '',
 527                         r     : 0,
 528                         g     : 0,
 529                         b     : 0,
 530                         a     : 0,
 531                         pct   : false,
 532                         equal : function( prop ){
 533                                 if( this.pct === prop.pct ){
 534                                         return this.r === prop.r && this.g === prop.g && this.b === prop.b;
 535                                 };
 536                                 var rgb  = this._toPct(),
 537                                         _rgb = prop._toPct(),
 538                                         i    = rgb.length;
 539                                 for( ; i; ){
 540                                         --i;
 541                                         if( Math.abs( rgb[ i ] - _rgb[ i ] ) > 1 ) return false;
 542                                 };
 543                                 return true;
 544                         },
 545                         convert : function( prop ){
 546                                 var u = prop.pct, x;
 547                                 if( this.pct === u ) return;
 548                                 x = u === true ? 100 / 255 : 2.55;
 549                                 this.r  *= x;
 550                                 this.g  *= x;
 551                                 this.b  *= x;
 552                                 this.pct = u;
 553                         },
 554                         setValue : function( rgb ){
 555                                 this.r = rgb[ 0 ];
 556                                 this.g = rgb[ 1 ];
 557                                 this.b = rgb[ 2 ];
 558                         },
 559                         getValue : function(){
 560                                 return [ this.r, this.g, this.b ];
 561                         },
 562                         getOffset : function( prop ){
 563                                 return [ prop.r - this.r, prop.g - this.g, prop.b - this.b ];
 564                         },
 565                         getUnit : function(){
 566                                 return this.pct === true ? '%' : '';
 567                         },
 568                         getValueText : function(){
 569                                 if( this.pct === true ){
 570                                         return [ 'rgb(', this.r, '%,', this.g, '%,', this.b, '%)' ].join( '' );
 571                                 };
 572                                 var round = Math.round;
 573
 574                                 var rgb   = '00000' + ( ( round( this.r ) << 16 ) + ( round( this.g ) << 8 ) + round( this.b ) ).toString( 16 );
 575                                 return '#' + rgb.substr( rgb.length - 6 );
 576                         },
 577                         _toPct : function(){
 578                                 if( this.pct === true ) return [ this.r, this.g, this.b ];
 579                                 return [ this.r / 2.55, this.g / 2.55, this.b / 2.55 ];
 580                         },
 581                         isValid : function( t ){
 582                                 var isFinite = window.isFinite;
 583                                 if( !isFinite( this.r ) || !isFinite( this.g ) || !isFinite( this.b ) ) return false;
 584                                 if( 0 > this.r || 0 > this.g || 0 > this.b ) return false;
 585                                 if( this.pct === true ) return this.r <= 100 && this.g <= 100 && this.b <= 100;
 586                                 return this.r <= 255 && this.g <= 255 && this.b <= 255;
 587                         }
 588                 }
 589         ),
 590
 591         _getProperty : function( xnode, css, unit, p ){
 592
 593                 var XDomStyle     = X.Dom.Style,
 594                         me            = XDomStyle._getProperty,
 595                         PARAMS        = XDomStyle.PARAMS,
 596                         PropertyGroup = XDomStyle.PropertyGroup,
 597                         Property      = XDomStyle.Property,
 598                         ColorProperty = XDomStyle.ColorProperty,
 599                         name, width;
 600
 601                 if( PARAMS.special[ p ] === true || PARAMS.region[ p ] === true ){
 602                         switch( p ){
 603                                 case 'clip' :
 604                                         // rect(...)    クリップします。<top>, <bottom> は上端からの、 <right>, <left> は左端からのオフセットで指定します。Internet Explorer 4～7 では、カンマの代わりにスペースで区切る必要があります。
 605                                         // position:absolute または position:fixed を適用した要素に対してのみ有効です。
 606                                         var top    = me( p + 'Top' ),
 607                                                 right  = me( p + 'Right' ),
 608                                                 bottom = me( p + 'Bottom' ),
 609                                                 left   = me( p + 'Left' ),
 610                                                 ret    = new PropertyGroup( p, top, right, bottom, left ),
 611                                     all;
 612                                         if( ret.isValid() === true ) return ret;
 613                                         ret.kill();
 614                                         all = css[ p ].split( '(' )[ 1 ].split( ')' )[ 0 ].split( XDomStyle._CLIP_SEPARATOR );
 615                                         return
 616                                                 new PropertyGroup(
 617                                                         p,
 618                                                         new Property( p + 'Top',    all[ 0 ], 'px', xnode ),
 619                                                         new Property( p + 'Right',  all[ 1 ], 'px', xnode ),
 620                                                         new Property( p + 'Bottom', all[ 2 ], 'px', xnode ),
 621                                                         new Property( p + 'Left',   all[ 3 ], 'px', xnode )
 622                                                 );
 623
 624                                 case 'margin' :
 625                                 case 'padding' :
 626                                         name  = p;
 627                                         width = '';
 628                                 case 'borderWidth' :
 629                                         var props  = '$1Top$2,$1Right$2,$1Bottom$2,$1Left$2'.split( '$1' ).join( name || 'border' ).split( '$2' ).join( width || 'Width' ).split( ',' ),
 630                                                 top    = me( props[ 0 ] ),
 631                                                 right  = me( props[ 1 ] ),
 632                                                 bottom = me( props[ 2 ] ),
 633                                                 left   = me( props[ 3 ] ),
 634                                                 ret    = new PropertyGroup( p, top, right, bottom, left ),
 635                                                 all, _0, _1, _2, _3, vu, v, u;
 636                                         if( ret.isValid() === true ) return ret;
 637                                         ret.kill();
 638                                         all = css[ p ].split( ' ' );
 639                                         _0  = all[ 0 ];
 640                                         _1  = all[ 1 ];
 641                                         _2  = all[ 2 ];
 642                                         _3  = all[ 3 ];
 643                                         vu  = XDomStyle._Util._splitValueAndUnit( _0 );
 644                                         v   = vu[ 0 ];
 645                                         u   = vu[ 1 ];
 646                                         switch( all.length ){
 647                                                 case 1 :
 648                                                         top    = new Property( props[ 0 ], v, u, xnode );
 649                                                         right  = new Property( props[ 1 ], v, u, xnode );
 650                                                         bottom = new Property( props[ 2 ], v, u, xnode );
 651                                                         left   = new Property( props[ 3 ], v, u, xnode );
 652                                                         break;
 653                                                 case 2 :
 654                                                         top    = new Property( props[ 0 ], v, u, xnode );
 655                                                         bottom = new Property( props[ 2 ], v, u, xnode );
 656                                                         vu     = XDomStyle._Util._splitValueAndUnit( _1 );
 657                                                         v      = vu[ 0 ];
 658                                                         u      = vu[ 1 ];
 659                                                         right  = new Property( props[ 1 ], v, u, xnode );
 660                                                         left   = new Property( props[ 3 ], v, u, xnode );
 661                                                         break;
 662                                                 case 3 :
 663                                                         top    = new Property( props[ 0 ], v, u, xnode );
 664                                                         vu     = XDomStyle._Util._splitValueAndUnit( _1 );
 665                                                         v      = vu[ 0 ];
 666                                                         u      = vu[ 1 ];
 667                                                         right  = new Property( props[ 1 ], v, u, xnode );
 668                                                         left   = new Property( props[ 3 ], v, u, xnode );
 669                                                         vu     = XDomStyle._Util._splitValueAndUnit( _2 );
 670                                                         v      = vu[ 0 ];
 671                                                         u      = vu[ 1 ];
 672                                                         bottom = new Property( props[ 2 ], v, u, xnode );
 673                                                         break;
 674                                                 case 4 :
 675                                                         top    = new Property( props[ 0 ], v, u, xnode );
 676                                                         vu     = XDomStyle._Util._splitValueAndUnit( _1 );
 677                                                         v      = vu[ 0 ];
 678                                                         u      = vu[ 1 ];
 679                                                         right  = new Property( props[ 1 ], v, u, xnode );
 680                                                         vu     = XDomStyle._Util._splitValueAndUnit( _2 );
 681                                                         v      = vu[ 0 ];
 682                                                         u      = vu[ 1 ];
 683                                                         bottom = new Property( props[ 2 ], v,u, xnode );
 684                                                         vu     = XDomStyle._Util._splitValueAndUnit( _3 );
 685                                                         v      = vu[ 0 ];
 686                                                         u      = vu[ 1 ];
 687                                                         left   = new Property( props[ 3 ], v, u, xnode );
 688                                                         break;
 689                                         };
 690                                         return new PropertyGroup( p, top, right, bottom, left );
 691
 692                                 case 'borderColor' :
 693                                         var props  = 'borderTopColor,borderRightColor,borderBottomColor,borderLeftColor'.split( ',' ),
 694                                                 top    = me( props[ 0 ] ),
 695                                                 right  = me( props[ 1 ] ),
 696                                                 bottom = me( props[ 2 ] ),
 697                                                 left   = me( props[ 3 ] ),
 698                                                 ret    = new PropertyGroup( p, top, right, bottom, left ),
 699                                                 all, _0, _1;
 700                                         if( ret.isValid() === true ) return ret;
 701                                         ret.kill();
 702                                         all = css[ p ].split( ' ' );
 703                                         _0  = all[ 0 ];
 704                                         _1  = all[ 1 ];
 705                                         switch( all.length ){
 706                                                 case 1 :
 707                                                         top    = new ColorProperty( props[ 0 ], _0 );
 708                                                         right  = new ColorProperty( props[ 1 ], _0 );
 709                                                         bottom = new ColorProperty( props[ 2 ], _0 );
 710                                                         left   = new ColorProperty( props[ 3 ], _0 );
 711                                                         break;
 712                                                 case 2 :
 713                                                         top    = new ColorProperty( props[ 0 ], _0 );
 714                                                         right  = new ColorProperty( props[ 1 ], _1 );
 715                                                         bottom = new ColorProperty( props[ 2 ], _0 );
 716                                                         left   = new ColorProperty( props[ 3 ], _1 );
 717                                                         break;
 718                                                 case 3 :
 719                                                         top    = new ColorProperty( props[ 0 ], _0 );
 720                                                         right  = new ColorProperty( props[ 1 ], _1 );
 721                                                         bottom = new ColorProperty( props[ 2 ], all[ 2 ] );
 722                                                         left   = new ColorProperty( props[ 3 ], _1 );
 723                                                         break;
 724                                                 case 4 :
 725                                                         top    = new ColorProperty( props[ 0 ], _0 );
 726                                                         right  = new ColorProperty( props[ 1 ], _1 );
 727                                                         bottom = new ColorProperty( props[ 2 ], all[ 2 ] );
 728                                                         left   = new ColorProperty( props[ 3 ], all[ 3 ] );
 729                                                         break;
 730                                         };
 731                                         return new PropertyGroup( p, top, right, bottom, left );
 732
 733                                 case 'backgroundPosition' :
 734                                         var x   = me( p + 'X' ),
 735                                                 y   = me( p + 'Y' ),
 736                                                 ret = new PropertyGroup( p, x, y ),
 737                                                 xy;
 738                                         if( ret.isValid() === true ) return ret;
 739                                         ret.kill();
 740                                         xy = css[ p ].split( ' ' );
 741                                         x  = XDomStyle._Util._splitValueAndUnit( xy[ 0 ] );
 742                                         y  = XDomStyle._Util._splitValueAndUnit( xy[ 1 ] );
 743                                         return
 744                                                 new PropertyGroup(
 745                                                         p,
 746                                                         new Property( p + 'X', x[ 0 ], x[ 1 ], xnode ),
 747                                                         new Property( p + 'Y', y[ 0 ], y[ 1 ], xnode )
 748                                                 );
 749                         };
 750                         // opacity, zindex, lineHeight
 751                         vu = XDomStyle._Util._splitValueAndUnit( css[ p ] );
 752                         return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
 753                 };
 754                 var x = css[ p ], e, v, u;
 755                 /*
 756                 if( PARAMS.offset[ p ] === true ){
 757                         return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
 758
 759                         e = this.elm;
 760                         if( p === 'width'  ) v = e.offsetWidth;
 761                         if( p === 'height' ) v = e.offsetHeight;
 762                         if( p === 'top'    ) v = e.offsetTop;
 763                         if( p === 'bottom' ) v = e.offsetBottom;
 764                         if( p === 'left'   ) v = e.offsetLeft;
 765                         if( p === 'right'  ) v = e.offsetRight;
 766                         u = _getUnit( x, p );
 767                         // alert( p + XDomStyle._Util.pxTo( v, u ) + u )
 768                         return new Property( p, XDomStyle._Util.pxTo( v, u ), u, xnode );
 769                 }; */
 770                 if( p === 'fontSize' && ( v = XDomStyle._FONT_SIZE_RATIO[ x ] ) ){ // xx-small 等
 771                         return new Property( p, v, 'px', xnode );
 772                 };
 773                 if( PARAMS.offset[ p ] || PARAMS.percent[ p ] || PARAMS.size[ p ] ){
 774                         vu = XDomStyle._Util._splitValueAndUnit( x );
 775                         return new Property( p, vu[ 0 ], vu[ 1 ], xnode );
 776                 };
 777
 778                 if( PARAMS.color[ p ] ) return new ColorProperty( p, x );
 779         },
 780
 781         _Util : {
 782                 /*
 783                 getValue: function( x ){
 784                         return X.Type.isString( x ) ? parseInt( x ) :
 785                                X.Type.isNumber( x ) ? x : 0;
 786                 },
 787                 getUnit: function( x, p ){
 788
 789
 790         var REG_UINIT      = /.*\d(\w{1,2})?/,
 791                 $1             = '$1',
 792
 793
 794                         var u;
 795                         if( X.Type.isString( x ) === true ){
 796                                 u = x.replace( REG_UINIT, $1 );
 797                                 if( p === 'lineHeight' ) return u;
 798                                 if( PARAMS.unit[ u ] !== true ) return 'px';
 799                                 return u;
 800                         };
 801                         return 'px';
 802                 }, */
 803                 _splitValueAndUnit : function( v ){
 804                         var num, _num, i, u;
 805                         if( X.Type.isNumber( v ) ) return [ v || 0, '' ];
 806                         if( isNaN( num = parseInt( v ) ) ) return [ 0, '' ];
 807                         _num = '' + num;
 808                         i = v.indexOf( _num ) + _num.length;
 809                         u = v.substr( i );
 810                         return [ num, X.Dom.Style.UNIT[ u ] ? u : 'px' ];
 811                 }
 812         }
 813 };
 814
 815 X.Dom.Style._GET_VALUE_WITH_UNIT = {
 816         borderWidth  : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH,
 817         //borderStyle  : X.Dom.Style.Type.QUARTET,
 818         borderRadius : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH,
 819         margin       : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH  | X.Dom.Style.Type.PERCENT,
 820         padding      : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH  | X.Dom.Style.Type.PERCENT,
 821         clip         : X.Dom.Style.Type.QUARTET | X.Dom.Style.Type.LENGTH  | X.Dom.Style.Type.PERCENT,
 822
 823         backgroundColor    : X.Dom.Style.Type.COLOR,
 824         backgroundPosition : X.Dom.Style.Type.COMBI,
 825
 826         // boxShadow
 827
 828         fontSize      : X.Dom.Style.Type.LENGTH,
 829         lineHeight    : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT | X.Dom.Style.Type.NUMERICAL,
 830         textIndent    : X.Dom.Style.Type.LENGTH,
 831         letterSpacing : X.Dom.Style.Type.LENGTH,
 832         wordSpacing   : X.Dom.Style.Type.LENGTH,
 833         /*
 834         textShadowColor   : X.Dom.Style.Type.COLOR,
 835         textShadowOffsetX : X.Dom.Style.Type.LENGTH,
 836         textShadowOffsetY : X.Dom.Style.Type.LENGTH,
 837         textShadowBlur    : X.Dom.Style.Type.LENGTH, */
 838
 839         width         : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
 840         height        : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
 841
 842         left          : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
 843         top           : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
 844         bottom        : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
 845         right         : X.Dom.Style.Type.LENGTH | X.Dom.Style.Type.PERCENT,
 846
 847         // table
 848         borderSpacing : X.Dom.Style.Type.LENGTH
 849 };
 850
 851
 852 X.Dom.Style.SPECIAL_FIX =
 853         // ~IE8
 854         X.UA.IE && X.UA.IE < 9 ?
 855                 (function( obj ){
 856                         var test    = X.Dom.Style.SPECIAL_FIX_PROP,
 857                                 filters = [],
 858                                 n       = -1,
 859                                 p, id, v, dir;
 860                         for( p in obj ){
 861                                 if( !( id = test[ p ] ) ) continue;
 862                                 v = obj[ p ];
 863                                 switch( id ){
 864                                         case 1 : //'filter' :
 865                                                 filters[ ++n ] = v;
 866                                                 break;
 867                                         case 2 : //'opacity' :
 868                                                 filters[ ++n ] = 'alpha(opacity=' + v * 100 +')';
 869                                                 break;
 870                                         case 3 : //'boxShadow' :
 871                                                 // box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
 872                                                 //　スペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可
 873                                                 // shadow(color=#cccccc, strength=10, direction=135);
 874                                                 v = X.Dom.Style._getProperty( this, css, 'px', 'boxShadow' );
 875                                                 dir = Math.atan2( v[ 1 ], v[ 0 ] ) * 180 / Math.PI + 90;
 876                                                 dir += dir < 0 ? 360 : 0;
 877                                                 filters[ ++n ] = 'shadow(color=' + v[ 4 ] + ',strength=' + v[ 3 ] + ',direction=' + dir + ')';
 878                                                 break;
 879                                         case 4 : //'textShadow' :
 880                                                 //text-shadow: 5px 5px 2px blue; 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色 none
 881                                                 //glow(Color=yellow,Strength=10);
 882                                                 //どうやらCSSのbackgroundプロパティと同時に使えないようです。
 883
 884
 885                                                 break;
 886                                         case 5 : //'backgroundImage' :
 887                                                 //
 888                                 };
 889                         };
 890                         return filters.join( ' ' );
 891                 }) :
 892         // IE9 textShadow に filter を使用
 893         X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
 894                 (function( obj ){
 895                         var test    = X.Dom.Style.SPECIAL_FIX_PROP,
 896                                 filters = [], p, id, v;
 897                         for( p in obj ){
 898                                 if( !( id = test[ p ] ) ) continue;
 899                                 v = obj[ p ];
 900                                 switch( id ){
 901                                         case 1 : //'filter' :
 902                                                 filters[ filters.length ] = v;
 903                                                 break;
 904                                 };
 905                         };
 906                         if( filters ) return filters.join( ' ' );
 907                 }) :
 908                 (function( obj ){
 909                         var test    = X.Dom.Style.SPECIAL_FIX_PROP,
 910                                 ret = [], p, id, v;
 911                         for( p in obj ){
 912                                 if( !( id = test[ p ] ) ) continue;
 913                                 v = obj[ p ];
 914                                 switch( id ){
 915                                         case 1 : //'backgroundPositionX' :
 916                                                 bgpX = v;
 917                                                 break;
 918                                         case 2 : //'backgroundPositionY' :
 919                                                 bgpY = v;
 920                                                 break;
 921                                         case 3 : //'backgroundPositionX' :
 922                                                 clipT = v;
 923                                                 break;
 924                                         case 4 : //'backgroundPositionX' :
 925                                                 clipB = v;
 926                                                 break;
 927                                         case 5 : //'backgroundPositionX' :
 928                                                 clipL = v;
 929                                                 break;
 930                                         case 6 : //'backgroundPositionX' :
 931                                                 clipR = v;
 932                                                 break;
 933                                 };
 934                         };
 935                         if( bgpX || bgpY ) ret[ ret.length ] = 'background-position:';
 936                         if( clipT || clipB || clipL || clipR ){
 937                                 ret[ ret.length ] = 'clip:rect(';
 938                         };
 939                         return ret.join( ';' );
 940                 });
 941
 942
 943
 944
 945 // export
 946 // name getter
 947 // unitID, name 単位指定のプロパティ取得 geter
 948 // obj setter
 949 // name, value setter
 950
 951 X.Dom.Node.prototype.css = function( nameOrObj /* orUnitID, valuOrUnitOrName */ ){
 952         var XDomStyle = X.Dom.Style,
 953                 args = arguments,
 954                 css  = this._css,
 955                 p, name, v, camelize, unit, ieFix;
 956         if( this._xnodeType !== 1 ) return this;
 957 // setter:object
 958         if( X.Type.isObject( nameOrObj ) ){
 959                 if( !css ) css = this._css = {};
 960                 camelize = XDomStyle.camelize;
 961                 ieFix    = X.Dom.Style.IE_FILTER_FIX;
 962                 for( p in nameOrObj ){
 963                         if( ieFix[ p ] ){
 964                                 this._dirty |= X.Dom.Dirty.IE_FILTER;
 965                         };
 966                         v = nameOrObj[ p ];
 967                         v || v === 0 ? css[ camelize( p ) ] = v : delete css[ camelize( p ) ];
 968                         if( p === 'display' ){
 969                                 v === 'none' ? ( this._state |= X.Dom.State.IE5_DISPLAY_NONE_FIX ) : ( this._state &= ~X.Dom.State.IE5_DISPLAY_NONE_FIX );
 970                                 v === 'none' ? ( this._state |= X.Dom.State.DISPLAY_NONE ) : ( this._state &= ~X.Dom.State.DISPLAY_NONE );
 971                         };
 972                 };
 973                 this._dirty |= X.Dom.Dirty.CSS;
 974                 this.parent && this._reserveUpdate();
 975                 delete this._cssText;
 976                 return this;
 977         } else
 978         if( 1 < args.length ){
 979                 if( !( unit = XDomStyle.UNIT[ nameOrObj ] ) ){
 980 // setter name, value
 981                         if( !css ) css = this._css = {};
 982                         name = XDomStyle.camelize( nameOrObj );
 983                         v    = args[ 1 ];
 984                         if( css[ name ] === v ) return this;
 985                         if( X.Dom.Style.IE_FILTER_FIX[ name ] ){
 986                                 this._dirty |= X.Dom.Dirty.IE_FILTER;
 987                         };
 988                         if( !v && v !== 0 ){
 989                                 delete css[ name ];
 990                         } else {
 991                                 css[ name ] = v;
 992                         };
 993                         delete this._cssText;
 994                         this._dirty |= X.Dom.Dirty.CSS;
 995                         if( name === 'display' ){
 996                                 v === 'none' ? ( this._state |= X.Dom.State.IE5_DISPLAY_NONE_FIX ) : ( this._state &= ~X.Dom.State.IE5_DISPLAY_NONE_FIX );
 997                                 v === 'none' ? ( this._state |= X.Dom.State.DISPLAY_NONE ) : ( this._state &= ~X.Dom.State.DISPLAY_NONE );
 998                         };
 999                         // parent でなく this._root! でなくて this._state & in tree
1000                         this.parent && this._reserveUpdate();
1001                         return this;
1002                 };
1003 // getter unit
1004 // unit 付の値取得は fontSize と 画像サイズが確定していないと正確に取れない。内部のみにする？
1005                 if( !css ) return;
1006                 if( !XDomStyle._GET_VALUE_WITH_UNIT[ name = XDomStyle.camelize( args[ 1 ] ) ] ) return null;
1007                 p = XDomStyle._getProperty( this, css, unit, name );
1008                 v = p.pxTo( unit );
1009                 p.kill();
1010                 return v;
1011         };
1012 // getter
1013         if( !css ) return;
1014         // 集計 border, padding, margin, backgroundPosition, clip
1015         // border で正確なデータを返せない時は、null を返す
1016         return css[ XDomStyle.camelize( nameOrObj ) ];
1017 };
1018
1019 X.Dom.Node.prototype.cssText = function( v ){
1020         var obj, i, l, attr, name;
1021         if( X.Type.isString( v ) ){
1022                 delete this._css;
1023                 obj = {};
1024                 v   = v.split( ';' );
1025                 for( i = 0, l = v.length; i < l; ++i ){
1026                         attr = v[ i ].split( ':' );
1027                         ( name = attr[ 0 ] ) && ( obj[ name ] = attr[ 1 ] || true );
1028                 };
1029                 return this.css( obj );
1030         };
1031         // getter
1032         if( this._dirty & X.Dom.Dirty.CSS && !( this._cssText = X.Dom.Style.objToCssText( this._css ) ) ){
1033                 delete this._cssText;
1034         };
1035         return this._cssText;
1036 };
1037
1038 /*
1039  * ここでは HTMLElement のチャックは行わない！
1040  */
1041 X.Dom.Node.prototype._getCharSize =
1042         window.getComputedStyle ?
1043                 (function(){
1044                         return parseInt( getComputedStyle( this._rawNode, null ).fontSize );
1045                 }) :
1046         document.defaultView && document.defaultView.getComputedStyle ?
1047                 (function(){
1048                         return parseInt( document.defaultView.getComputedStyle( this._rawNode, null ).fontSize );
1049                 }) :
1050         X.UA.IE && 5.5 <= X.UA.IE ?
1051                 (function(){
1052                         if( this === Node.root && X.Dom.Event._lastFontSize ) return X.Dom.Event._lastFontSize;
1053                         var font = this._rawNode.currentStyle.fontSize,
1054                                 vu   = X.Dom.Style._Util._splitValueAndUnit( font ),
1055                                 v    = vu[ 0 ],
1056                                 u    = vu[ 1 ],
1057                                 elm;
1058                         if( v === 0 ){
1059                                 if( v = X.Dom.Style._FONT_SIZE_RATIO[ font ] ) return v;
1060                         } else {
1061                                 if( u = X.Dom.Style._UNIT_RATIO[ u ] ) return v / u;
1062                         };
1063                         switch( u ){
1064                                 case 'px' :
1065                                         return v;
1066                                 case 'em' :
1067                                 // body まで辿ってしまった場合は？
1068                                         if( this.parent ) return this.parent._getCharSize() * v;
1069                                         break;
1070                                 case '%' :
1071                                 // body まで辿ってしまった場合は？
1072                                         if( this.parent ) return this.parent._getCharSize() * v / 100;
1073                                         break;
1074                         };
1075                         elm = document.createElement( 'div' );
1076                         Node._systemNode._rawNode.appendChild( elm );
1077                         elm.style.cssText = 'position:absolute;top:0;left:0;overflow:hidden;line-height:1;height:1em;';
1078                         elm.innerText = 'X';
1079                         v = elm.offsetHeight;
1080                         Node._systemNode._rawNode.removeChild( elm );
1081                         return v;
1082                 }) :
1083         document.getElementById ?
1084                 (function(){
1085                         var elm = document.createElement( 'span' ),
1086                                 v;
1087                         this._rawNode.appendChild( elm );
1088                         elm.style.cssText = 'display:block;position:absolute;top:0;left:0;visivility:hidden;line-height:1;height:1em;';
1089                         elm.innerHTML = 'X';
1090                         v = elm.offsetHeight;
1091                         this._rawNode.removeChild( elm );
1092                         return v;
1093                 }) :
1094         X.UA.IE ?
1095                 (function(){
1096                         var elm = this._rawNode || this._ie4getRawNode(), v;
1097                         elm.insertAdjacentHTML( 'BeforeEnd', '<span style="visivility:hidden;line-height:1;">X</span>' );
1098                         elm = elm.children[ elm.children.length - 1 ];
1099                         v   = elm.offsetHeight;
1100                         elm.outerHTML = '';
1101                         return v * 0.75;
1102                 }) :
1103                 (function(){
1104                 });
1105
1106
1107 X.Dom.listenOnce( X.Dom.Event.DOM_PRE_INIT, function(){
1108         var testStyle = X.Dom._root.style;
1109
1110         X.Dom.Style.VENDER_PREFIX = (function(){
1111                 var ret       = {},
1112                         vendors   = 'webkit,Webkit,Moz,moz,ms,Ms,O,o,khtml,Khtml'.split( ',' ),
1113                         searches  =
1114                                 'opacity,boxSizing,' +
1115                                 'transform,transformOrigin,perspective,' +
1116                                 'transisiton,transitionDelay,transitionProperty,transitionDuration,transitionTimingFunction,' +
1117                                 'userSelect,touchAction,touchCallout,contentZooming,userDrag,tapHighlightColor'.split( ',' ),
1118                         vendor, i, search, prop;
1119                 //
1120                 vendors.unshift( '' );
1121
1122                 function findVenderPrefix( prop ){
1123                         var v, i = vendors.length;
1124                         vendor = null;
1125                         for( ; i; ){
1126                                 v = vendors[ --i ];
1127                                 if( testStyle[ v + prop ] !== undefined ){
1128                                         vendor = v;
1129                                         return v + prop;
1130                                 };
1131                         };
1132                 };
1133
1134                 for( i = searches.length; i; ){
1135                         search = searches[ --i ];
1136                         prop = findVenderPrefix( search );
1137                         if( search === 'transform' ) ret.transVender = vendor;
1138                         if( prop ) ret[ search ] = prop;
1139                 };
1140                 return ret;
1141         })();
1142
1143         X.Dom.Style.SPECIAL_FIX_PROP =
1144                 // ~IE8
1145                 X.UA.IE && X.UA.IE < 9 ?
1146                         {
1147                                 filter          : 1,
1148                                 opacity         : 2//, uinode ChromeNode で行う
1149                                 //boxShadow       : 3,
1150                                 //textShadow      : 4,
1151                                 //backgroundImage : 5
1152                         } :
1153                 // IE9
1154                 X.UA.IE && 9 <= X.UA.IE && X.UA.IE < 10 ?
1155                         {
1156                                 filter          : 1//,
1157                                 //textShadow      : 1
1158                         } :
1159                 {
1160                         backgroundPositionX : testStyle.backgroundPositionX === undefined ? 3 : 0,
1161                         backgroundPosiitonY : testStyle.backgroundPositionX === undefined ? 3 : 0,
1162                         clipTop             : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 3 : 0,
1163                         clipBottom          : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 4 : 0,
1164                         clipLeft            : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 5 : 0,
1165                         clipRight           : testStyle.clipTop === undefined && testStyle[ 'clip-top' ] === undefined ? 6 : 0
1166                 };
1167 } );
1168
1169 X.Dom.listenOnce( X.Dom.Event.DOM_INIT, function(){
1170         var xnode  = Node._systemNode,
1171                 output = X.Dom.Style._UNIT_RATIO = {},
1172                 list   = 'em,cm,mm,in,pt,pc'.split( ',' ),
1173                 unit,size, base, i;
1174
1175         for( i = list.length; i; ){
1176                 unit = list[ --i ];
1177                 output[ unit ] = xnode.css( 'width', 100 + unit ).width() / 100;
1178         };
1179
1180         output = X.Dom.Style._FONT_SIZE_RATIO = {},
1181         list   = 'xx-large,x-large,large,larger,medium,small,smaller,x-small,xx-small'.split( ',' );
1182         xnode.css( { lineHeight : '100%', height : '1em' } ).text( 'X' );
1183
1184         for( i = list.length; i; ){
1185                 size = list[ --i ];
1186                 output[ size ] = xnode.css( 'fontSize', size ).height();// / base;
1187         };
1188
1189         xnode.cssText( '' ).empty();
1190 } );
1191