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