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