@oracle/oraclejet 11.1.7 → 11.1.8

package/dist/js/libs/oj/debug/ojeditablevalue.js

@@ -5,16 +5,16 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojlabel', 'ojs/ojthemeutils', 'ojs/ojcontext', 'ojs/ojlogger', 'ojs/ojvalidator-required', 'ojs/ojlabelledbyutils', 'ojs/ojtranslation', 'ojs/ojmessaging', 'ojs/ojconverterutils', 'ojs/ojvalidation-error', 'ojs/ojpopup', 'hammerjs', 'ojs/ojjquery-hammer', 'ojs/ojdomutils', 'ojs/ojanimation', 'ojs/ojfocusutils'], function (exports, oj, Components, $, ojlabel, ojthemeutils, Context, Logger, RequiredValidator, LabelledByUtils, Translations, Message, ConverterUtils, ojvalidationError, ojpopup, Hammer, ojjqueryHammer, DomUtils, AnimationUtils, FocusUtils) { 'use strict';
+define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojlabel', 'ojs/ojthemeutils', 'ojs/ojfocusutils', 'ojs/ojcontext', 'ojs/ojlogger', 'ojs/ojvalidator-required', 'ojs/ojlabelledbyutils', 'ojs/ojtranslation', 'ojs/ojmessaging', 'ojs/ojconverterutils', 'ojs/ojvalidation-error', 'ojs/ojpopup', 'hammerjs', 'ojs/ojjquery-hammer', 'ojs/ojdomutils', 'ojs/ojanimation'], function (exports, oj, Components, $, ojlabel, ojthemeutils, FocusUtils, Context, Logger, RequiredValidator, LabelledByUtils, Translations, Message, ConverterUtils, ojvalidationError, ojpopup, Hammer, ojjqueryHammer, DomUtils, AnimationUtils) { 'use strict';
 
   oj = oj && Object.prototype.hasOwnProperty.call(oj, 'default') ? oj['default'] : oj;
   $ = $ && Object.prototype.hasOwnProperty.call($, 'default') ? $['default'] : $;
+  FocusUtils = FocusUtils && Object.prototype.hasOwnProperty.call(FocusUtils, 'default') ? FocusUtils['default'] : FocusUtils;
   Context = Context && Object.prototype.hasOwnProperty.call(Context, 'default') ? Context['default'] : Context;
   RequiredValidator = RequiredValidator && Object.prototype.hasOwnProperty.call(RequiredValidator, 'default') ? RequiredValidator['default'] : RequiredValidator;
   LabelledByUtils = LabelledByUtils && Object.prototype.hasOwnProperty.call(LabelledByUtils, 'default') ? LabelledByUtils['default'] : LabelledByUtils;
   Message = Message && Object.prototype.hasOwnProperty.call(Message, 'default') ? Message['default'] : Message;
   ConverterUtils = ConverterUtils && Object.prototype.hasOwnProperty.call(ConverterUtils, 'default') ? ConverterUtils['default'] : ConverterUtils;
-  FocusUtils = FocusUtils && Object.prototype.hasOwnProperty.call(FocusUtils, 'default') ? FocusUtils['default'] : FocusUtils;
 
   /**
    * Base class for rendering the 'inside' labels. This is so InsideLabelStrategy
@@ -2973,6 +2973,44 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
         }
       },
 
+      /**
+       * Override to release resources held by this component.
+       * It is important to unregister Hammer events
+       * since they live outside of the component's DOM and would cause Detached Dom nodes
+       * when the component is removed.
+       * @memberof oj.editableValue
+       * @instance
+       * @protected
+       */
+      _ReleaseResources: function () {
+        this._super();
+        if (this._IsCustomElement()) {
+          // componentMessaging#releaseResources removes any resources that would
+          // otherwise cause a memory leak, like Hammer.
+          // We do not deactivate component messaging because that is a bigger change, and
+          // more risky to backport.
+          this._getComponentMessaging().releaseResources();
+          this._hammerIsUnregistered = true;
+        }
+      },
+      /**
+       * @memberof oj.editableValue
+       * @instance
+       * @protected
+       */
+      _SetupResources: function () {
+        this._super();
+        // Since initComponentMessaging gets called during component creation, and that activates
+        // all the component strategies which in turn sets up listeners, we only want to
+        // re-set up resources and when we have
+        // released them in ReleaseResources.
+        if (this._IsCustomElement() && (this._hammerIsUnregistered)) {
+          const messaging = this._getComponentMessaging();
+          messaging.setupResources();
+          this._hammerIsUnregistered = false;
+        }
+      },
+
       /**
        * If we have asynchronous converter loading, the input is readonly and a loading indicator
        * is shown to the user.
@@ -3069,6 +3107,20 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
             this._placeholderOptionChanged(flags);
             break;
 
+          case 'readOnly':
+            if (this._retainFocusOnReadonlyChange) {
+              // This setTimeout call is needed to allow the dom to update before we
+              // get the focus element (or the element will still be hidden).
+              setTimeout(() => {
+                this.GetFocusElement().focus();
+                if (this._resolveBusyStateFocusRestore) {
+                  this._resolveBusyStateFocusRestore();
+                  delete this._resolveBusyStateFocusRestore;
+                }
+              }, 0);
+            }
+            break;
+
           case 'title':
             // Ignore title attribute for custom element components.
             if (!this._IsCustomElement()) {
@@ -3228,6 +3280,9 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
       },
 
       /**
+       * JET-48463 - If we are in readonly mode, we call _GetReadonlyFocusElement, and fall back to
+       * _GetContentElement()[0] if _GetReadonlyFocusElement happens to return null.
+       * If not readonly, we just return _GetContentElement()[0]
        * @memberof oj.editableValue
        * @instance
        * @override
@@ -3235,7 +3290,20 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
        * @since 5.0.0
        */
       GetFocusElement: function () {
-        return this._GetContentElement()[0];
+        return this.options.readOnly === true ?
+          this._GetReadonlyFocusElement() || this._GetContentElement()[0] :
+          this._GetContentElement()[0];
+      },
+
+      /**
+       * Returns the readonly focus element if there is a readonly specific element, otherwise null
+       * @memberof oj.editableValue
+       * @instance
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this._getReadonlyDiv();
       },
 
       /**
@@ -3289,6 +3357,21 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
             }
             break;
           case 'readOnly':
+            this._retainFocusOnReadonlyChange = FocusUtils.containsFocus(this.widget()[0]);
+            if (this._retainFocusOnReadonlyChange) {
+              if (!this._resolveBusyStateFocusRestore) {
+                var domElem = this.element[0];
+                var busyContext = Context.getContext(domElem).getBusyContext();
+                var description = 'Waiting for focus on the component ';
+
+                if (domElem && domElem.id) {
+                  description += `with id="${domElem.id}" `;
+                }
+                description += 'to be restored.';
+                this._resolveBusyStateFocusRestore =
+                  busyContext.addBusyState({ description: description });
+              }
+            }
             this._addRemoveOjReadOnlyClassOnLabel(document.getElementById(this.options.labelledBy),
               value);
             break;
@@ -7431,8 +7514,7 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
     jqLauncher[0].removeEventListener('change', this._eatChangeAndClickOnPress, true);
 
     if (DomUtils.isTouchSupported()) {
-      jqLauncher.ojHammer().off('press');
-      jqLauncher.ojHammer('destroy');
+      this.releaseResources();
       jqLauncher.off('contextmenu', this._eatContextMenuOnOpenPopupListener);
       this._eatContextMenuOnOpenPopupListener = null;
       this._inPressEvent = null;
@@ -7449,55 +7531,39 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
   PopupMessagingStrategy.prototype._registerLauncherEvents = function () {
     var closeEvents;
     var closePopupCallback;
-    var compDefaults;
-    var events;
-    var hammerOptions;
     var jqLauncher = this.GetLauncher();
     var nonPressOpenEvents;
-    var openPopupCallback;
-    var pressEventIndex;
 
-    compDefaults = PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
-    events = compDefaults ? compDefaults.events :
-             PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+    const events = this._getPopupEventNamesToRegisterForComp();
 
     // 1. associate the ojPopup component to wrapper <div> for popup content
     // 2. wire up on() event handlers for registered events that open and close popup. E.g., focusin.
     // 3. autoDismissal happens automatically when focus leaves component. For other events like
     // mouseover it's required to call off()
     if (events.open) {
-      openPopupCallback = this._openPopupCallback;
-      if (!openPopupCallback) {
-        openPopupCallback = this._openPopup.bind(this);
-        this._openPopupCallback = openPopupCallback;
+      if (!this._openPopupCallback) {
+        this._openPopupCallback = this._openPopup.bind(this);
       }
 
       // separate out press event, namespace the events string, and attach event handler
-      pressEventIndex = events.open.indexOf('press');
+      const needsPressEvent = this._needsPressEvent(events);
       nonPressOpenEvents =
       this._getNamespacedEvents(events.open.replace('press', ''),
                                 PopupMessagingStrategy._OPEN_NAMESPACE);
-      jqLauncher.on(nonPressOpenEvents, openPopupCallback);
+      jqLauncher.on(nonPressOpenEvents, this._openPopupCallback);
 
       // The pressHold gesture also fires a contextmenu event on Windows 10 touch.
       // Prevent that here for components that use 'press' for popup messaging as
       // the context menu causes the popup message window to close. Note that this
       // means the context menu will be disabled for these components.
-      if (DomUtils.isTouchSupported() && pressEventIndex !== -1) {
+      if (DomUtils.isTouchSupported() && needsPressEvent) {
         this._eatContextMenuOnOpenPopupListener = function () {
           return false;
         };
 
         jqLauncher.on('contextmenu', this._eatContextMenuOnOpenPopupListener);
 
-        // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
-        // and checks it, so in this case we have to eat the click/change events. this happens
-        // in the openPopupCallback
-        hammerOptions = {
-          recognizers: [
-            [Hammer.Press, { time: 750 }]
-          ] };
-        jqLauncher.ojHammer(hammerOptions).on('press', openPopupCallback);
+        this.registerHammerOpenCallbackOnLauncher();
       }
     }
 
@@ -7514,6 +7580,62 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
     }
   };
 
+    /**
+     * Symmetrical method to releaseResources. Sets up resources that get
+     * removed in releaseResources.
+     * @private
+     * @memberof oj.PopupMessagingStrategy
+     * @instance
+     */
+    PopupMessagingStrategy.prototype.setupResources = function () {
+      const events = this._getPopupEventNamesToRegisterForComp();
+      const needsPressEvent = this._needsPressEvent(events);
+      if (DomUtils.isTouchSupported() && needsPressEvent) {
+        this.registerHammerOpenCallbackOnLauncher();
+      }
+    };
+
+    /**
+     * Register Hammer Press Event. Make sure you are on touch and you
+     * need the press event before calling this function.
+     * @private
+     * @memberof oj.PopupMessagingStrategy
+     * @instance
+     */
+    PopupMessagingStrategy.prototype.registerHammerOpenCallbackOnLauncher = function () {
+      const jqLauncher = this.GetLauncher();
+      if (jqLauncher == null) {
+        return;
+      }
+      // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
+      // and checks it, so in this case we have to eat the click/change events. this happens
+      // in the openPopupCallback
+      const hammerOptions = {
+        recognizers: [
+          [Hammer.Press, { time: 750 }]
+        ] };
+      jqLauncher.ojHammer(hammerOptions).on('press', this._openPopupCallback);
+    };
+
+    /**
+    * Releases resources that would otherwise leak memory if they were not released
+    * when the component's dom is removed.
+    * For example, Hammer events are put on the document and will result in
+    * detached dom memory leak if not removed.
+    * @private
+    * @memberof oj.PopupMessagingStrategy
+    * @instance
+    */
+    PopupMessagingStrategy.prototype.releaseResources = function () {
+      PopupMessagingStrategy.superclass.update.call(this);
+      const events = this._getPopupEventNamesToRegisterForComp();
+      const needsPressEvent = this._needsPressEvent(events);
+      if (DomUtils.isTouchSupported() && needsPressEvent) {
+        const jqLauncher = this.GetLauncher();
+        jqLauncher.off('press').ojHammer('destroy');
+      }
+    };
+
   /**
    * Turn the events string into an array, add namespace, and turn it back into a string.
    * @param {string} events e.g., "focusin mousedown"
@@ -7588,6 +7710,34 @@ define(['exports', 'ojs/ojcore-base', 'ojs/ojcomponentcore', 'jquery', 'ojs/ojla
     return popupPositionOptions;
   };
 
+  /**
+   * Returns the events
+   *
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype._getPopupEventNamesToRegisterForComp = function () {
+    const compDefaults =
+      PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
+    return compDefaults ? compDefaults.events :
+      PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+  };
+
+  /**
+   * Returns true if it needs a press event.
+   *
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype._needsPressEvent = function (events) {
+     if (events && events.open) {
+      return events.open.indexOf('press') !== -1;
+     }
+     return false;
+  };
+
   /**
    * Returns a jquery element that a messaging popup is bound to.
    *

package/dist/js/libs/oj/debug/ojjquery-hammer.js

@@ -26,6 +26,7 @@ define(['ojs/ojlogger', 'hammerjs', 'jquery'], function (Logger, Hammer, $) { 'u
               hammer.destroy();
               $el.removeData('ojHammer');
             }
+            $el.off('remove.ojHammer');
           });
 
         default:
@@ -33,7 +34,13 @@ define(['ojs/ojlogger', 'hammerjs', 'jquery'], function (Logger, Hammer, $) { 'u
           return this.each(function () {
             var $el = $(this);
             if (!$el.data('ojHammer')) {
-              $el.data('ojHammer', new Hammer.Manager($el[0], options));
+              const mgr = new Hammer.Manager($el[0], options);
+              $el.on('remove.ojHammer', evt => {
+                if (evt.target === $el[0]) {
+                  mgr.destroy();
+                }
+              });
+              $el.data('ojHammer', mgr);
             }
           });
       }

package/dist/js/libs/oj/debug/ojradioset.js

@@ -1193,6 +1193,16 @@ var __oj_radioset_metadata =
          * @since 5.0.0
          */
         GetFocusElement: function () {
+          // JET-48463 - oj-table issue where focus is lost
+          // GetFocusElement() needs to return the correct readonly element
+          // If _GetReadonlyFocusElement() returns null, fallback to the
+          // enabled element logic.
+          if (this.options.readOnly === true) {
+            const readonlyFocusElement = this._GetReadonlyFocusElement();
+            if (readonlyFocusElement) {
+              return readonlyFocusElement;
+            }
+          }
           // JET-43430 - dynamic form focus issue for radio buttonset
           // When tabbing through, the input element that is currently checked will be focused if
           // one is available. Otherwise the first input element will be given focus. We need to
@@ -1208,6 +1218,18 @@ var __oj_radioset_metadata =
           // If there is no checked inputs, simply return the first enabled input
           return this._GetContentElement().not(':disabled').first()[0];
         },
+        /**
+         * oj-radioset doesn't use .oj-text-field-readonly for the focusable readonly content,
+         * so we need to use a different selector.
+         * @memberof oj.ojRadioset
+         * @instance
+         * @override
+         * @protected
+         * @return {Element|null}
+         */
+        _GetReadonlyFocusElement: function () {
+          return this.widget()[0].querySelector('.oj-form-control-container');
+        },
         /**
          * Whether the component is required.
          *

package/dist/js/libs/oj/debug/ojselectcombobox.js

@@ -12681,6 +12681,25 @@ var __oj_select_many_metadata =
         }
       },
 
+      /**
+       * combobox-many doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.  Combobox-one doesn't need this override,
+       * so we just return the default readonly element.
+       * @memberof! _OjMultiCombobox
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        if (this.multiple) {
+          return this.widget()[0].querySelector('.oj-combobox-accessible-container');
+        }
+
+        // For oj-combobox-one return the default element
+        return this._super();
+      },
+
       // 19670748, dropdown popup should be closed on subtreeDetached notification.
       _NotifyDetached: function () {
         this._superApply(arguments);

package/dist/js/libs/oj/debug/ojswitch.js

@@ -656,6 +656,19 @@ var __oj_switch_metadata =
 
       // P R O T E C T E D    C O N S T A N T S   A N D   M E T H O D S
 
+      /**
+       * oj-switch doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojSwitch
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-switch-thumb');
+      },
+
       /**
        * @private
        * @const

package/dist/js/libs/oj/debug/ojtable.js

@@ -1569,6 +1569,11 @@ var __oj_table_metadata =
    */
   Table.RESIZE_OFFSET = 10;
 
+  /**
+   * @private
+   */
+  Table.SIZING_ERROR_MARGIN = 0.05;
+
   /**
    * @private
    */
@@ -3202,10 +3207,11 @@ var __oj_table_metadata =
     if (!this._resizeListener) {
       this._resizeListener = function () {
         var layoutManager = this._getLayoutManager();
-        var tableContainer = this._getTableContainer();
+        var containerStyle = window.getComputedStyle(this._getTableContainer());
         // Check if the width and height values should result in a sizing refresh
-        if (layoutManager.isSizingRefreshRequired(tableContainer.offsetWidth,
-                                                  tableContainer.offsetHeight)) {
+        if (layoutManager.isSizingRefreshRequired(
+              layoutManager.getExactOffsetWidth(containerStyle),
+              layoutManager.getExactOffsetHeight(containerStyle))) {
           layoutManager.notifyTableUpdate(Table._UPDATE._RESIZE);
           // refresh dimensions if no tasks are pending since refresh dimensions runs during final task
           if (!this._hasPendingTasks()) {
@@ -6066,8 +6072,6 @@ var __oj_table_metadata =
    * @private
    */
   TableLayoutManager.prototype._finalizeTableDimensions = function (scrollTop, scrollLeft) {
-    var tableContainer = this._table._getTableContainer();
-
     if (scrollTop != null) {
       var maxScrollTop = this.getScroller().scrollHeight - this.getScroller().clientHeight;
       var newScrollTop = scrollTop > maxScrollTop ? maxScrollTop : scrollTop;
@@ -6084,8 +6088,9 @@ var __oj_table_metadata =
 
     // cache the final dimensions
     var sizingState = this._getSizingState();
-    sizingState.outerWidth = tableContainer.offsetWidth;
-    sizingState.outerHeight = tableContainer.offsetHeight;
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    sizingState.outerWidth = this.getExactOffsetWidth(containerStyle);
+    sizingState.outerHeight = this.getExactOffsetHeight(containerStyle);
 
     this._clearTableUpdates();
     this._enableTableVisibility();
@@ -6258,7 +6263,16 @@ var __oj_table_metadata =
    * @return {Object} An object with boxSizing, borderWidth, and paddingWidth properties
    * @private
    */
-  TableLayoutManager.prototype._getBoxStyle = function (style) {
+  TableLayoutManager.prototype._getBoxStyle = function (style, isVert) {
+    if (isVert) {
+      return {
+        boxSizing: style[Table.CSS_PROP._BOX_SIZING],
+        borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_TOP_WIDTH]) || 0) +
+          (parseFloat(style[Table.CSS_PROP._BORDER_BOTTOM_WIDTH]) || 0),
+        paddingWidth: (parseFloat(style[Table.CSS_PROP._PADDING_TOP]) || 0) +
+          (parseFloat(style[Table.CSS_PROP._PADDING_BOTTOM]) || 0)
+      };
+    }
     return {
       boxSizing: style[Table.CSS_PROP._BOX_SIZING],
       borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_RIGHT_WIDTH]) || 0) +
@@ -6502,6 +6516,22 @@ var __oj_table_metadata =
     this._removeHeaderColumnAndCellColumnWidths();
   };
 
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype._getBottomSlotHeight = function () {
+    var tableBottomSlot = this._table._getTableBottomSlot();
+
+    // find Table's bottom slot height to use when determining if overflow if present
+    if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
+        tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
+      // offsetHeight does not include partial px values, so computed style should be used
+      var bottomSlotStyle = window.getComputedStyle(tableBottomSlot);
+      return this.getExactOffsetHeight(bottomSlotStyle);
+    }
+    return 0;
+  };
+
   /**
    * Returns an array describing the table container's scrollable state.
    * Index 0 describes the vertical state, while index 1 describeds the horizontal state.
@@ -6511,17 +6541,23 @@ var __oj_table_metadata =
    * @private
    */
   TableLayoutManager.prototype._getTableContainerScrollableState = function (bottomSlotHeight) {
-    var tableContainer = this._table._getTableContainer();
-    var tableElem = this._table._getTable();
+    // clientHeight and clientWidth do not include partial px values, so computed style should be used
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    var containerClientHeight = this.getExactClientHeight(containerStyle);
+    var containerClientWidth = this.getExactClientWidth(containerStyle);
+
+    // offsetHeight and offsetWidth do not include partial px values, so computed style should be used
+    var tableElemStyle = window.getComputedStyle(this._table._getTable());
+    var tableElemHeight = this.getExactOffsetHeight(tableElemStyle);
+    var tableElemWidth = this.getExactOffsetWidth(tableElemStyle);
 
     var result = [];
-    if (tableContainer.clientHeight > 0) {
-      var innerHeight = tableElem.offsetHeight + bottomSlotHeight;
-      // don't use tableContainer[0].scrollHeight as it may not be accurate
-      if (innerHeight > tableContainer.clientHeight) {
+    if (containerClientHeight > 0) {
+      var innerHeight = tableElemHeight + bottomSlotHeight;
+      if (innerHeight - containerClientHeight > Table.SIZING_ERROR_MARGIN) {
         // overflow
         result[0] = 1;
-      } else if (tableContainer.clientHeight - innerHeight > 0) {
+      } else if (containerClientHeight - innerHeight > Table.SIZING_ERROR_MARGIN) {
         // underflow
         result[0] = -1;
       } else {
@@ -6531,11 +6567,11 @@ var __oj_table_metadata =
       result[0] = 0;
     }
 
-    if (tableContainer.clientWidth > 0) {
-      if (tableElem.offsetWidth > tableContainer.clientWidth) {
+    if (containerClientWidth > 0) {
+      if (tableElemWidth - containerClientWidth > Table.SIZING_ERROR_MARGIN) {
         // overflow
         result[1] = 1;
-      } else if (tableContainer.clientWidth - tableElem.offsetWidth > 0) {
+      } else if (containerClientWidth - tableElemWidth > Table.SIZING_ERROR_MARGIN) {
         // underflow
         result[1] = -1;
       } else {
@@ -6904,6 +6940,42 @@ var __oj_table_metadata =
     return 0;
   };
 
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactClientHeight = function (computedStyle) {
+    var boxStyle = this._getBoxStyle(computedStyle, true);
+    var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]) - boxStyle.borderWidth -
+      boxStyle.paddingWidth;
+    return Math.round((height + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactClientWidth = function (computedStyle) {
+    var boxStyle = this._getBoxStyle(computedStyle);
+    var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]) - boxStyle.borderWidth -
+      boxStyle.paddingWidth;
+    return Math.round((width + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactOffsetHeight = function (computedStyle) {
+    var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]);
+    return Math.round((height + Number.EPSILON) * 1000) / 1000;
+  };
+
+  /**
+   * @private
+   */
+  TableLayoutManager.prototype.getExactOffsetWidth = function (computedStyle) {
+    var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]);
+    return Math.round((width + Number.EPSILON) * 1000) / 1000;
+  };
+
   /**
    * @private
    */
@@ -7352,9 +7424,7 @@ var __oj_table_metadata =
     this._verifyMinAndMaxWidths();
 
     // find Table's bottom slot height to use when determining if overflow if present
-    var bottomSlotHeight = (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-                            tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) ?
-          tableBottomSlot.offsetHeight : 0;
+    var bottomSlotHeight = this._getBottomSlotHeight();
 
     var tableContainerScrollableState = this._getTableContainerScrollableState(bottomSlotHeight);
     sizingState.hasVerticalOverflow = (tableContainerScrollableState[0] === 1);
@@ -7488,12 +7558,9 @@ var __oj_table_metadata =
         this._setColumnWidths(0);
       }
       // if bottom slot present, ensure bottom slot is pinned to bottom when underflow is present
-      if (bottomSlotHeight > 0) {
-        var availableHeight = tableContainer.clientHeight - bottomSlotHeight;
-        if (availableHeight !== tableElem.offsetHeight) {
-          tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
-          tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
-        }
+      if (bottomSlotHeight > 0 && tableContainerScrollableState[0] === -1) {
+        tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
+        tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
       }
     }
     if (this._table._isStatusMessageShown()) {
@@ -8240,17 +8307,7 @@ var __oj_table_metadata =
       scrollLeft = this._table._scrollLeft;
     }
 
-    var tableBottomSlot = this._table._getTableBottomSlot();
-
-    // find Table's bottom slot height to use when determining if overflow if present
-    var bottomSlotHeight;
-    if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-        tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
-      bottomSlotHeight = tableBottomSlot.offsetHeight;
-    } else {
-      bottomSlotHeight = 0;
-    }
-
+    var bottomSlotHeight = this._getBottomSlotHeight();
     var tableContainer = this._table._getTableContainer();
     var tableElem = this._table._getTable();
 
@@ -8313,16 +8370,19 @@ var __oj_table_metadata =
    * @private
    */
   TableStickyLayoutManager.prototype._setupTableHeight = function (bottomSlotHeight) {
-    var tableContainer = this._table._getTableContainer();
     var tableScroller = this._table._getTableScroller();
 
     // clear any previous table scroller styling
     tableScroller.removeAttribute(Table.DOM_ATTR._STYLE);
 
     // Size the table scroller to fit in the container height
-    var containerClientHeight = tableContainer.clientHeight;
+    var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+    var containerClientHeight = this.getExactClientHeight(containerStyle);
     var tableScrollerHeight = containerClientHeight - bottomSlotHeight;
-    if (tableScroller.offsetHeight !== tableScrollerHeight) {
+
+    var scrollerStyle = window.getComputedStyle(tableScroller);
+    var scrollerOffsetHeight = this.getExactOffsetHeight(scrollerStyle);
+    if (Math.abs(scrollerOffsetHeight - tableScrollerHeight) > Table.SIZING_ERROR_MARGIN) {
       tableScroller.style[Table.CSS_PROP._HEIGHT] = tableScrollerHeight + Table.CSS_VAL._PX;
     }
 
@@ -13486,6 +13546,7 @@ var __oj_table_metadata =
     _LEFT: 'left',
     _RIGHT: 'right',
     _PADDING_TOP: 'padding-top',
+    _PADDING_BOTTOM: 'padding-bottom',
     _PADDING_LEFT: 'padding-left',
     _PADDING_RIGHT: 'padding-right',
     _OVERFLOW: 'overflow',
@@ -13496,6 +13557,7 @@ var __oj_table_metadata =
     _MIN_HEIGHT: 'min-height',
     _FLOAT: 'float',
     _BORDER_TOP: 'border-top',
+    _BORDER_TOP_WIDTH: 'border-top-width',
     _BORDER_BOTTOM_WIDTH: 'border-bottom-width',
     _BORDER_LEFT_WIDTH: 'border-left-width',
     _BORDER_RIGHT_WIDTH: 'border-right-width',