add fractional testcases

packages/overlayscrollbars/src/lifecycles/overflowLifecycle.ts

@@ -266,7 +266,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
     const verticalPaddingValue = viewportPaddingStyle.paddingBottom as number;
 
     // horizontal
-    viewportStyleObj.maxWidth = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
+    viewportStyleObj.width = `calc(100% + ${hideOffsetY + horizontalMarginValue * -1}px)`;
     viewportStyleObj[horizontalMarginKey] = -hideOffsetY + horizontalMarginValue;
 
     // vertical
@@ -420,7 +420,7 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
         marginRight: 0,
         marginBottom: 0,
         marginLeft: 0,
-        maxWidth: '',
+        width: '',
         overflowY: '',
         overflowX: '',
       };
@@ -433,12 +433,10 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
         fixFlexboxGlue(viewportOverflowState, !!heightIntrinsic);
       }
 
-      // TODO: enlargen viewport if div too small for firefox scrollbar hiding behavior
       // TODO: hide host overflow if scroll x or y and no padding element there
       // TODO: Test without content
       // TODO: Test without padding
       // TODO: overflow: visible on padding / host if overflow visible on both axis
-      // TODO: change lifecyclehub communication to single object & assign
 
       style(_viewport, viewportStyle);
 

packages/overlayscrollbars/src/lifecycles/paddingLifecycle.ts

@@ -45,7 +45,7 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
         right: 0,
         bottom: 0,
         left: 0,
-        maxWidth: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
+        width: paddingRelative ? `calc(100% + ${paddingHorizontal}px)` : '',
       };
       const viewportStyle: StyleObject = {
         paddingTop: paddingRelative ? padding!.t : 0,

packages/overlayscrollbars/src/styles/overlayscrollbars.scss

@@ -89,7 +89,6 @@
   padding: 0;
   margin: 0;
   border: none;
-  max-width: 100%;
   z-index: 0;
 }
 

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts

@@ -100,7 +100,7 @@ const plusMinusArr = (original: number, plusMinus: number) => {
 
 // @ts-ignore
 const msie11 = !!window.MSInputMethodContext && !!document.documentMode;
-const msedge = window.navigator.userAgent.indexOf('Edge') > -1;
+const msedge = window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
 
 msie11 && addClass(document.body, 'msie11');
 
@@ -234,10 +234,10 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
 
       should.equal(osInstance.state()._overflowAmount.w, comparisonMetrics.scroll.width, 'Overflow amount width equality.');
       should.equal(osInstance.state()._overflowAmount.h, comparisonMetrics.scroll.height, 'Overflow amount height equality.');
-    }
 
-    //should.equal(targetMetrics.hasOverflow.x, comparisonMetrics.hasOverflow.x, 'Has overflow x equality.');
+      should.equal(targetMetrics.hasOverflow.x, comparisonMetrics.hasOverflow.x, 'Has overflow x equality.');
-    //should.equal(targetMetrics.hasOverflow.y, comparisonMetrics.hasOverflow.y, 'Has overflow y equality.');
+      should.equal(targetMetrics.hasOverflow.y, comparisonMetrics.hasOverflow.y, 'Has overflow y equality.');
+    }
 
     if (targetMetrics.hasOverflow.x) {
       should.equal(style(targetViewport!, 'overflowX'), 'scroll', 'Overflow-X should result in scroll.');
@@ -262,6 +262,11 @@ const checkMetrics = async (checkComparison: CheckComparisonObj) => {
     should.equal(targetMetrics.endElm.height, comparisonMetrics.endElm.height, 'End Elements height equality.');
 
     await timeout(1);
+
+    // steady pace for ie11 or it will freeze progressively
+    if (msie11) {
+      await timeout(25);
+    }
   });
 };
 
@@ -396,17 +401,19 @@ const overflowTest = async () => {
         height: comparison!.scrollHeight - comparison!.clientHeight,
       };
 
-      if (width) {
+      await waitForOrFailTest(() => {
-        should.ok(overflowAmountCheck.width >= addOverflow, 'Correct smallest possible overflow width.');
+        if (width) {
-      } else {
+          should.ok(overflowAmountCheck.width >= addOverflow, 'Correct smallest possible overflow width.');
-        should.equal(overflowAmountCheck.width, 0, 'Correct smallest possible overflow width.');
+        } else {
-      }
+          should.equal(overflowAmountCheck.width, 0, 'Correct smallest possible overflow width.');
+        }
 
-      if (height) {
+        if (height) {
-        should.ok(overflowAmountCheck.height >= addOverflow, 'Correct smallest possible overflow height.');
+          should.ok(overflowAmountCheck.height >= addOverflow, 'Correct smallest possible overflow height.');
-      } else {
+        } else {
-        should.equal(overflowAmountCheck.height, 0, 'Correct smallest possible overflow height.');
+          should.equal(overflowAmountCheck.height, 0, 'Correct smallest possible overflow height.');
-      }
+        }
+      });
 
       style(targetResize, styleObj);
 
@@ -458,13 +465,11 @@ const overflowTest = async () => {
       await iterateHeight(async () => {
         await iterateWidth(async () => {
           await iterateBorder(async () => {
-            // assume this part isn't critical for IE11, to boost test speed
+            // assume this part isn't critical
             /*
-            if (!msie11) {
+            await iterateFloat(async () => {
-              await iterateFloat(async () => {
+              await iterateMargin();
-                await iterateMargin();
+            });
-              });
-            }
             */
 
             await iteratePadding(async () => {

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss

@@ -234,10 +234,10 @@ body {
 }
 
 .minMaxFixed > .container {
-  min-height: 180px;
+  min-height: 180.5px;
-  min-width: 180px;
+  min-width: 180.5px;
-  max-height: 420px;
+  max-height: 420.3px;
-  max-width: 420px;
+  max-width: 420.8px;
 }
 
 .minMaxNone > .container {
@@ -307,6 +307,7 @@ body {
   .os-environment,
   .os-viewport {
     scrollbar-width: none !important;
+    -ms-overflow-style: none !important;
   }
 }