docs: function (out) {
              var cfg = this._cfg;
              var state = cfg.stateObject;
              var sizeInfo = {
                  style : cfg.block ? 'display:block;' : '',
                  className : "xSimpleFrame " + this._cssPrefix + "frame " + cfg.cssClass
              };
  
              var verticalAlignApplied = this._verticalAlignApplied;
              if (verticalAlignApplied) {
                  sizeInfo.style += "line-height: " + this.innerHeight + "px;";
              }
  
              this._appendInnerSizeInfo(sizeInfo);
              if (!this._hasBorder(state.skipLeftBorder, cfg.iconsLeft)) {
                  sizeInfo.style = sizeInfo.style
                          + 'border-left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;';
              }
              if (!this._hasBorder(state.skipRightBorder, cfg.iconsRight)) {
                  sizeInfo.style = sizeInfo.style
                          + 'border-right:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;';
              }
  
              out.write('<span ' + (sizeInfo.style ? 'style="' + sizeInfo.style + '"' : '') + 'class="'
                      + sizeInfo.className + '">');
              if (verticalAlignApplied) {
                  var innerHeight = state.innerHeight;
                  if (ariaUtilsType.isNumber(innerHeight)) {
                      innerHeight += "px";
                  }
  
                  // Vertical align is added in this block, as this property has no effect without the heights information
                  out.write([
                      '<span style="display: inline-block;height:',
                      innerHeight,
                      ';line-height:',
                      innerHeight,
                      ';vertical-align:',
                      state.verticalAlign,
                      '">'
                  ].join(""));
              }
          }