improve tests and code

packages/overlayscrollbars/dist/overlayscrollbars.js

@@ -339,11 +339,11 @@
   };
   var M = [ "-webkit-", "-moz-", "-o-", "-ms-" ];
   var P = [ "WebKit", "Moz", "O", "MS", "webkit", "moz", "o", "ms" ];
-  var F = {};
   var R = {};
-  var N = function cssProperty(r) {
+  var N = {};
-    var a = R[r];
+  var F = function cssProperty(r) {
-    if (s(R, r)) {
+    var a = N[r];
+    if (s(N, r)) {
       return a;
     }
     var e = I(r);
@@ -355,25 +355,25 @@
         return void 0 !== t[r];
       })));
     }));
-    return R[r] = a || "";
+    return N[r] = a || "";
   };
   var j = function jsAPI(r) {
-    var a = F[r] || window[r];
+    var a = R[r] || window[r];
-    if (s(F, r)) {
+    if (s(R, r)) {
       return a;
     }
     each(P, (function(e) {
       a = a || window[e + I(r)];
       return !a;
     }));
-    F[r] = a;
+    R[r] = a;
     return a;
   };
-  var B = j("MutationObserver");
+  var V = j("MutationObserver");
-  var V = j("IntersectionObserver");
+  var B = j("IntersectionObserver");
   var k = j("ResizeObserver");
-  var H = j("cancelAnimationFrame");
+  var U = j("cancelAnimationFrame");
-  var U = j("requestAnimationFrame");
+  var H = j("requestAnimationFrame");
   var q = /[^\x20\t\r\n\f]+/g;
   var W = function classListAction(r, a, e) {
     var t;
@@ -434,7 +434,7 @@
   };
   var rr = function clearTimeouts(r) {
     r && window.clearTimeout(r);
-    r && H(r);
+    r && U(r);
   };
   var ar = function noop() {};
   var er = function debounce(r, a) {
@@ -465,7 +465,7 @@
       if (v) {
         var s = isFunction(f) ? f() : f;
         var p = isNumber(s) && s >= 0;
-        var h = a > 0 ? c : U;
+        var h = a > 0 ? c : H;
         var w = d(r);
         var y = w || r;
         var m = l.bind(0, y);
@@ -693,15 +693,15 @@
   var Tr = Ir + "-flexbox-glue";
   var Mr = Tr + "-max";
   var Pr = "data-overlayscrollbars";
-  var Fr = Pr + "-overflow-x";
+  var Rr = Pr + "-overflow-x";
-  var Rr = Pr + "-overflow-y";
+  var Nr = Pr + "-overflow-y";
-  var Nr = "overflowVisible";
+  var Fr = "overflowVisible";
   var jr = "viewportStyled";
-  var Br = "os-padding";
+  var Vr = "os-padding";
-  var Vr = "os-viewport";
+  var Br = "os-viewport";
-  var kr = Vr + "-arrange";
+  var kr = Br + "-arrange";
-  var Hr = "os-content";
+  var Ur = "os-content";
-  var Ur = Vr + "-scrollbar-styled";
+  var Hr = Br + "-scrollbar-styled";
   var qr = "os-overflow-visible";
   var Wr = "os-size-observer";
   var Gr = Wr + "-appear";
@@ -791,9 +791,9 @@
   };
   var ca = function getNativeScrollbarStyling(r) {
     var a = false;
-    var e = Y(r, Ur);
+    var e = Y(r, Hr);
     try {
-      a = "none" === style(r, N("scrollbar-width")) || "none" === window.getComputedStyle(r, "::-webkit-scrollbar").getPropertyValue("display");
+      a = "none" === style(r, F("scrollbar-width")) || "none" === window.getComputedStyle(r, "::-webkit-scrollbar").getPropertyValue("display");
     } catch (t) {}
     e();
     return a;
@@ -833,13 +833,7 @@
     var a = window.screen.logicalXDPI || 1;
     return window.devicePixelRatio || r / a;
   };
-  var pa = function getDefaultInitializationStrategy(r) {
+  var pa = function createEnvironment() {
-    return {
-      A: !r,
-      D: false
-    };
-  };
-  var ha = function createEnvironment() {
     var r = document, a = r.body;
     var e = L('<div class="' + Ir + '"><div></div></div>');
     var t = e[0];
@@ -855,7 +849,10 @@
       x: 0 === l.x,
       y: 0 === l.y
     };
-    var h = pa(d);
+    var h = {
+      A: !d,
+      D: false
+    };
     var w = assignDeep({}, na);
     var y = {
       L: l,
@@ -863,20 +860,20 @@
       T: d,
       M: "-1" === style(t, "zIndex"),
       P: la(t, n),
-      F: da(t, n),
+      R: da(t, n),
-      R: function _addListener(r) {
+      N: function _addListener(r) {
         return v("_", r);
       },
-      N: assignDeep.bind(0, {}, h),
+      F: assignDeep.bind(0, {}, h),
       j: function _setInitializationStrategy(r) {
         assignDeep(h, r);
       },
-      B: assignDeep.bind(0, {}, w),
+      V: assignDeep.bind(0, {}, w),
-      V: function _setDefaultOptions(r) {
+      B: function _setDefaultOptions(r) {
         assignDeep(w, r);
       },
       k: assignDeep({}, h),
-      H: assignDeep({}, w)
+      U: assignDeep({}, w)
     };
     g(t, "style");
     E(t);
@@ -919,20 +916,24 @@
     }
     return y;
   };
-  var wa = function getEnvironment() {
+  var ha = function getEnvironment() {
     if (!va) {
-      va = ha();
+      va = pa();
     }
     return va;
   };
+  var wa = function resolveInitialization(r, a) {
+    return isFunction(r) ? r.apply(0, a) : r;
+  };
   var ya = function staticInitializationElement(r, a, e, t) {
-    var n = t || (isFunction(e) ? e.apply(0, r) : e);
+    return wa(t || wa(e, r), r) || a.apply(0, r);
-    return (isFunction(n) ? n.apply(0, r) : n) || a.apply(0, r);
   };
   var ma = function dynamicInitializationElement(r, a, e, t) {
-    var n = isBoolean(t) || !!t;
+    var n = wa(t, r);
-    var i = n ? t : isFunction(e) ? e.apply(0, r) : e;
+    if (isNull(n) || isUndefined(n)) {
-    return true === i || isNull(i) || isUndefined(i) || isFunction(i) ? a.apply(0, r) : i;
+      n = wa(e, r);
+    }
+    return true === n || isNull(n) || isUndefined(n) ? a.apply(0, r) : n;
   };
   var ba = 0;
   var _a = z.bind(0, "");
@@ -941,7 +942,7 @@
     E(r);
   };
   var Ca = function createUniqueViewportArrangeElement() {
-    var r = wa(), a = r.T, e = r.I, t = r.M;
+    var r = ha(), a = r.T, e = r.I, t = r.M;
     var n = !t && !a && (e.x || e.y);
     var i = n ? document.createElement("style") : false;
     if (i) {
@@ -951,12 +952,12 @@
     return i;
   };
   var Oa = function addDataAttrHost(r, a) {
-    attr(r, Pr, a || "");
+    attr(r, Pr, a);
     return g.bind(0, r, Pr);
   };
   var Aa = function createStructureSetupElements(r) {
-    var a = wa(), e = a.N, t = a.T;
+    var a = ha(), e = a.F, t = a.T;
-    var n = e(), o = n.U, u = n.q, s = n.A, p = n.D;
+    var n = e(), o = n.H, u = n.q, s = n.A, p = n.D;
     var h = isHTMLElement(r);
     var w = r;
     var _ = h ? r : w.target;
@@ -965,19 +966,19 @@
     var A = _.ownerDocument;
     var z = A.body;
     var L = A.defaultView;
-    var I = !!k && t;
+    var I = !!k && !S && t;
     var T = ya.bind(0, [ _ ]);
     var M = ma.bind(0, [ _ ]);
-    var P = T(_a, u, w.viewport);
+    var P = [ T(_a, u, w.viewport), T(_a, u), T(_a) ].filter((function(r) {
-    var F = P === _;
+      return !I ? r !== _ : true;
-    var R = I && F;
+    }))[0];
-    var N = F && !R ? T(_a) : P;
+    var R = P === _;
-    var j = {
+    var N = {
       W: _,
-      U: S ? T(_a, o, w.host) : _,
+      H: S ? T(_a, o, w.host) : _,
-      q: N,
+      q: P,
-      A: M(_a, s, w.padding),
+      A: !R && M(_a, s, w.padding),
-      D: M(_a, p, w.content),
+      D: !R && M(_a, p, w.content),
       G: !R && Ca(),
       X: L,
       Y: A,
@@ -988,72 +989,72 @@
       rr: h,
       ar: R,
       er: function _viewportHasClass(r, a) {
-        return R ? d(N, Pr, a) : G(N, r);
+        return R ? d(P, Pr, a) : G(P, r);
       },
       tr: function _viewportAddRemoveClass(r, a, e) {
-        return R ? l(N, Pr, a, e) : (e ? Y : X)(N, r);
+        return R ? l(P, Pr, a, e) : (e ? Y : X)(P, r);
       }
     };
-    var B = c(j).reduce((function(r, a) {
+    var F = c(N).reduce((function(r, a) {
-      var e = j[a];
+      var e = N[a];
       return v(r, e && !b(e) ? e : false);
     }), []);
-    var V = function elementIsGenerated(r) {
+    var j = function elementIsGenerated(r) {
-      return r ? i(B, r) > -1 : null;
+      return r ? i(F, r) > -1 : null;
     };
-    var H = j.W, U = j.U, q = j.A, W = j.q, $ = j.D, J = j.G;
+    var V = N.W, B = N.H, U = N.A, H = N.q, q = N.D, W = N.G;
-    var K = [];
+    var $ = [];
-    var Z = S && V(U);
+    var J = S && j(B);
-    var Q = S ? H : m([ $, W, q, U, H ].find((function(r) {
+    var K = S ? V : m([ q, H, U, B, V ].find((function(r) {
-      return false === V(r);
+      return false === j(r);
     })));
-    var rr = $ || W;
+    var Z = q || H;
-    var ar = Oa(U, R ? "viewport" : "host");
+    var Q = Oa(B, R ? "viewport" : "host");
-    var er = Y(q, Br);
+    var rr = Y(U, Vr);
-    var tr = Y(W, !R && Vr);
+    var ar = Y(H, !R && Br);
-    var nr = Y($, Hr);
+    var er = Y(q, Ur);
-    if (Z) {
+    if (J) {
-      D(H, U);
+      D(V, B);
-      v(K, (function() {
+      v($, (function() {
-        D(U, H);
+        D(B, V);
-        E(U);
+        E(B);
       }));
     }
-    O(rr, Q);
+    O(Z, K);
-    O(U, q);
+    O(B, U);
-    O(q || U, !R && W);
+    O(U || B, !R && H);
-    O(W, $);
+    O(H, q);
-    v(K, (function() {
+    v($, (function() {
-      ar();
+      Q();
-      g(W, Fr);
+      g(H, Rr);
-      g(W, Rr);
+      g(H, Nr);
-      if (V($)) {
+      if (j(q)) {
-        Sa($);
-      }
-      if (V(W)) {
-        Sa(W);
-      }
-      if (V(q)) {
         Sa(q);
       }
+      if (j(H)) {
+        Sa(H);
+      }
+      if (j(U)) {
+        Sa(U);
+      }
+      rr();
+      ar();
       er();
-      tr();
-      nr();
     }));
     if (t && !R) {
-      v(K, X.bind(0, W, Ur));
+      v($, X.bind(0, H, Hr));
     }
-    if (J) {
+    if (W) {
-      x(W, J);
+      x(H, W);
-      v(K, E.bind(0, J));
+      v($, E.bind(0, W));
     }
-    return [ j, f.bind(0, K) ];
+    return [ N, f.bind(0, $) ];
   };
   var xa = function createTrinsicUpdate(r, a) {
     var e = r.D;
     var t = a[0];
     return function(r) {
-      var a = wa(), n = a.F;
+      var a = ha(), n = a.R;
       var i = t(), v = i.nr;
       var o = r.ir;
       var u = (e || !n) && o;
@@ -1070,14 +1071,14 @@
   };
   var Da = function createPaddingUpdate(r, a) {
     var e = a[0], t = a[1];
-    var n = r.U, i = r.A, v = r.q, o = r.ar;
+    var n = r.H, i = r.A, v = r.q, o = r.ar;
     var u = createCache({
       o: Z,
       v: ur()
     }, ur.bind(0, n, "padding", "")), f = u[0], s = u[1];
     return function(r, a, n) {
       var u = s(n), c = u[0], l = u[1];
-      var d = wa(), g = d.T, p = d.F;
+      var d = ha(), g = d.T, p = d.R;
       var h = e(), w = h.sr;
       var y = r.vr, m = r.ur, b = r.cr;
       var _ = a("paddingAbsolute"), S = _[0], C = _[1];
@@ -1149,16 +1150,16 @@
       h: n.h > t ? n.h : 0
     };
   };
-  var Fa = function conditionalClass(r, a, e) {
+  var Ra = function conditionalClass(r, a, e) {
     return e ? Y(r, a) : X(r, a);
   };
-  var Ra = function overflowIsVisible(r) {
+  var Na = function overflowIsVisible(r) {
     return 0 === r.indexOf(za);
   };
-  var Na = function createOverflowUpdate(r, a) {
+  var Fa = function createOverflowUpdate(r, a) {
     var e = a[0], t = a[1];
-    var n = r.U, i = r.A, v = r.q, o = r.G, u = r.ar, f = r.tr;
+    var n = r.H, i = r.A, v = r.q, o = r.G, u = r.ar, f = r.tr;
-    var s = wa(), d = s.L, g = s.F, p = s.T, h = s.I;
+    var s = ha(), d = s.L, g = s.R, p = s.T, h = s.I;
     var w = !u && !p && (h.x || h.y);
     var y = createCache(Ta, gr.bind(0, v)), m = y[0], b = y[1];
     var _ = createCache(Ta, dr.bind(0, v)), S = _[0], C = _[1];
@@ -1215,9 +1216,9 @@
     };
     var I = function setViewportOverflowState(r, a, e, t) {
       var n = function setAxisOverflowStyle(r, a) {
-        var e = Ra(r);
+        var e = Na(r);
         var t = a && e && r.replace(za + "-", "") || "";
-        return [ a && !e ? r : "", Ra(t) ? "hidden" : t ];
+        return [ a && !e ? r : "", Na(t) ? "hidden" : t ];
       };
       var i = n(e.x, a.x), v = i[0], o = i[1];
       var u = n(e.y, a.y), f = u[0], s = u[1];
@@ -1315,37 +1316,37 @@
     };
     return function(r, a, o) {
       var s = r.vr, c = r.mr, d = r.ur, w = r.gr, y = r.ir, _ = r.cr;
-      var O = e(), D = O.nr, F = O.sr;
+      var O = e(), D = O.nr, R = O.sr;
-      var R = a("nativeScrollbarsOverlaid.show"), N = R[0], j = R[1];
+      var N = a("nativeScrollbarsOverlaid.show"), F = N[0], j = N[1];
-      var B = a("overflow"), V = B[0], k = B[1];
+      var V = a("overflow"), B = V[0], k = V[1];
-      var H = N && h.x && h.y;
+      var U = F && h.x && h.y;
-      var U = !u && !g && (s || d || c || j || y);
+      var H = !u && !g && (s || d || c || j || y);
-      var q = Ra(V.x);
+      var q = Na(B.x);
-      var W = Ra(V.y);
+      var W = Na(B.y);
       var G = q || W;
       var X = b(o);
       var Y = C(o);
       var $ = x(o);
       var J;
       if (j && p) {
-        f(Ur, jr, !H);
+        f(Hr, jr, !U);
       }
-      if (U) {
+      if (H) {
-        J = L(H);
+        J = L(U);
         z(J, D);
       }
       if (s || w || d || _ || j) {
         if (G) {
-          f(qr, Nr, false);
+          f(qr, Fr, false);
         }
-        var K = P(H, F, J), Z = K[0], Q = K[1];
+        var K = P(U, R, J), Z = K[0], Q = K[1];
         var rr = X = m(o), ar = rr[0], er = rr[1];
         var tr = Y = S(o), nr = tr[0], ir = tr[1];
         var vr = lr(v);
         var or = nr;
         var ur = vr;
         Z();
-        if ((ir || er || j) && Q && !H && T(Q, nr, ar, F)) {
+        if ((ir || er || j) && Q && !U && T(Q, nr, ar, R)) {
           ur = lr(v);
           or = dr(v);
         }
@@ -1365,7 +1366,7 @@
         y: sr.h > 0
       };
       var _r = q && W && (br.x || br.y) || q && br.x && !br.y || W && br.y && !br.x;
-      if (w || _ || mr || hr || cr || k || j || U) {
+      if (w || _ || mr || hr || cr || k || j || H) {
         var Sr = {
           marginRight: 0,
           marginBottom: 0,
@@ -1374,25 +1375,25 @@
           overflowY: "",
           overflowX: ""
         };
-        var Cr = I(H, br, V, Sr);
+        var Cr = I(U, br, B, Sr);
-        var Or = T(Cr, pr, yr, F);
+        var Or = T(Cr, pr, yr, R);
         if (!u) {
-          M(Cr, F, Or, Sr);
+          M(Cr, R, Or, Sr);
         }
-        if (U) {
+        if (H) {
           z(Cr, D);
         }
         if (u) {
-          attr(n, Fr, Sr.overflowX);
+          attr(n, Rr, Sr.overflowX);
-          attr(n, Rr, Sr.overflowY);
+          attr(n, Nr, Sr.overflowY);
         } else {
           style(v, Sr);
         }
       }
-      l(n, Pr, Nr, _r);
+      l(n, Pr, Fr, _r);
-      Fa(i, qr, _r);
+      Ra(i, qr, _r);
-      !u && Fa(v, qr, G);
+      !u && Ra(v, qr, G);
-      var Ar = E(L(H).wr), xr = Ar[0], Dr = Ar[1];
+      var Ar = E(L(U).wr), xr = Ar[0], Dr = Ar[1];
       t({
         wr: xr,
         br: {
@@ -1418,11 +1419,11 @@
     }));
     return t;
   };
-  var Ba = function createStructureSetupUpdate(r, a) {
+  var Va = function createStructureSetupUpdate(r, a) {
     var e = r.q;
-    var t = wa(), n = t.T, i = t.I, v = t.F;
+    var t = ha(), n = t.T, i = t.I, v = t.R;
     var o = !n && (i.x || i.y);
-    var u = [ xa(r, a), Da(r, a), Na(r, a) ];
+    var u = [ xa(r, a), Da(r, a), Fa(r, a) ];
     return function(r, a, t) {
       var n = ja(assignDeep({
         vr: false,
@@ -1450,10 +1451,10 @@
       return c;
     };
   };
-  var Va = "animationstart";
+  var Ba = "animationstart";
   var ka = "scroll";
-  var Ha = 3333333;
+  var Ua = 3333333;
-  var Ua = function getElmDirectionIsRTL(r) {
+  var Ha = function getElmDirectionIsRTL(r) {
     return "rtl" === style(r, "direction");
   };
   var qa = function domRectHasDimensions(r) {
@@ -1461,11 +1462,11 @@
   };
   var Wa = function createSizeObserver(r, a, e) {
     var t = e || {}, n = t.Or, i = void 0 === n ? false : n, o = t.Ar, u = void 0 === o ? false : o;
-    var s = wa(), c = s.P;
+    var s = ha(), c = s.P;
     var l = L('<div class="' + Wr + '"><div class="' + Xr + '"></div></div>');
     var d = l[0];
     var g = d.firstChild;
-    var p = Ua.bind(0, d);
+    var p = Ha.bind(0, d);
     var h = createCache({
       v: void 0,
       u: true,
@@ -1492,9 +1493,9 @@
         v = true === r;
       }
       if (i && o) {
-        var p = t ? r[0] : Ua(d);
+        var p = t ? r[0] : Ha(d);
-        scrollLeft(d, p ? c.n ? -Ha : c.i ? 0 : Ha : Ha);
+        scrollLeft(d, p ? c.n ? -Ua : c.i ? 0 : Ua : Ua);
-        scrollTop(d, Ha);
+        scrollTop(d, Ua);
       }
       if (!n) {
         a({
@@ -1524,15 +1525,15 @@
       var T = cr(x);
       var M = T;
       var P = false;
-      var F;
+      var R;
-      var R = function reset() {
+      var N = function reset() {
-        scrollLeft(z, Ha);
+        scrollLeft(z, Ua);
-        scrollTop(z, Ha);
+        scrollTop(z, Ua);
-        scrollLeft(D, Ha);
+        scrollLeft(D, Ua);
-        scrollTop(D, Ha);
+        scrollTop(D, Ua);
       };
-      var N = function onResized(r) {
+      var F = function onResized(r) {
-        F = 0;
+        R = 0;
         if (P) {
           T = M;
           y(true === r);
@@ -1543,30 +1544,30 @@
         P = !r || !J(M, T);
         if (r) {
           Cr(r);
-          if (P && !F) {
+          if (P && !R) {
-            H(F);
+            U(R);
-            F = U(N);
+            R = H(F);
           }
         } else {
-          N(false === r);
+          F(false === r);
         }
-        R();
+        N();
       };
       v(m, [ br(z, ka, j), br(D, ka, j) ]);
       style(I, {
-        width: Ha,
+        width: Ua,
-        height: Ha
+        height: Ua
       });
-      R();
+      N();
-      b = u ? j.bind(0, false) : R;
+      b = u ? j.bind(0, false) : N;
     }
     if (i) {
       _ = createCache({
         v: !p()
       }, p);
-      var B = _, V = B[0];
+      var V = _, B = V[0];
       v(m, br(d, ka, (function(r) {
-        var a = V();
+        var a = B();
         var e = a[0], t = a[1];
         if (t) {
           X(g, "ltr rtl");
@@ -1582,7 +1583,7 @@
     }
     if (b) {
       Y(d, Gr);
-      v(m, br(d, Va, b, {
+      v(m, br(d, Ba, b, {
         O: !!k
       }));
     }
@@ -1610,8 +1611,8 @@
         }
       }
     };
-    if (V) {
+    if (B) {
-      var u = new V((function(r) {
+      var u = new B((function(r) {
         if (r && r.length > 0) {
           o(r.pop());
         }
@@ -1744,7 +1745,7 @@
         e(s, p);
       }
     };
-    var O = new B(C);
+    var O = new V(C);
     O.observe(r, {
       attributes: true,
       attributeOldValue: true,
@@ -1767,7 +1768,7 @@
     } ];
   };
   var Ja = "[" + Pr + "]";
-  var Ka = "." + Vr;
+  var Ka = "." + Br;
   var Za = [ "tabindex" ];
   var Qa = [ "wrap", "cols", "rows" ];
   var re = [ "id", "class", "style", "open" ];
@@ -1776,8 +1777,8 @@
     var n;
     var v;
     var o = a[1];
-    var u = r.U, f = r.q, s = r.D, l = r.K, d = r.ar, p = r.er, h = r.tr;
+    var u = r.H, f = r.q, s = r.D, l = r.K, d = r.ar, p = r.er, h = r.tr;
-    var w = wa(), y = w.T, m = w.F;
+    var w = ha(), y = w.T, m = w.R;
     var b = createCache({
       o: J,
       v: {
@@ -1785,12 +1786,12 @@
         h: 0
       }
     }, (function() {
-      var r = p(qr, Nr);
+      var r = p(qr, Fr);
-      r && h(qr, Nr);
+      r && h(qr, Fr);
       var a = dr(s);
       var e = dr(f);
       var t = gr(f);
-      r && h(qr, Nr, true);
+      r && h(qr, Fr, true);
       return {
         w: e.w + a.w + t.w,
         h: e.h + a.h + t.h
@@ -1972,7 +1973,7 @@
       f(n, [ r, a || {}, !!e ]);
     };
     var o = Aa(r), u = o[0], s = o[1];
-    var c = Ba(u, t);
+    var c = Va(u, t);
     var l = ae(u, t, (function(r) {
       v(c(e, r));
     })), d = l[0], g = l[1];
@@ -1980,7 +1981,7 @@
     p.Pr = function(r) {
       n.add(r);
     };
-    p.Fr = u;
+    p.Rr = u;
     return [ function(r, e) {
       var t = zr(a, r, e);
       d(t);
@@ -1998,27 +1999,27 @@
     O(a, e);
     O(e, t);
     return {
-      Rr: a,
+      Nr: a,
-      Nr: e,
+      Fr: e,
       jr: t
     };
   };
   var ie = function createScrollbarsSetupElements(r, a) {
-    var e = wa(), t = e.N;
+    var e = ha(), t = e.F;
-    var n = t(), i = n.Br;
+    var n = t(), i = n.Vr;
-    var v = a.W, o = a.U, u = a.q, f = a.rr;
+    var v = a.W, o = a.H, u = a.q, f = a.rr;
     var s = !f && r.scrollbarsSlot;
     var c = ma([ v, o, u ], (function() {
       return o;
     }), i, s);
     var l = ne(Qr);
     var d = ne(ra);
-    var g = l.Rr;
+    var g = l.Nr;
-    var p = d.Rr;
+    var p = d.Nr;
     O(c, g);
     O(c, p);
     return [ {
-      Vr: l,
+      Br: l,
       kr: d
     }, E.bind(0, [ g, p ]) ];
   };
@@ -2027,7 +2028,7 @@
     var n = t[0];
     var i = ie(r, e), v = i[0], o = i[1];
     var u = n.bind(0);
-    u.Fr = v;
+    u.Rr = v;
     return [ function(r, e) {
       var t = zr(a, r, e);
       console.log(t);
@@ -2059,7 +2060,7 @@
     return le.get(r);
   };
   var he = function OverlayScrollbars(r, a, e) {
-    var t = wa(), n = t.B, i = t.I, v = t.R;
+    var t = ha(), n = t.V, i = t.I, v = t.N;
     var o = ue();
     var u = isHTMLElement(r) ? r : r.target;
     var f = pe(u);
@@ -2069,7 +2070,7 @@
     var s = o[se];
     var l = function validateOptions(r) {
       var a = r || {};
-      var e = s && s.Hr;
+      var e = s && s.Ur;
       return e ? e(a, true) : a;
     };
     var d = assignDeep({}, n(), l(a));
@@ -2078,7 +2079,7 @@
       w("initializationWithdrawn");
     }
     var y = te(r, d), m = y[0], b = y[1], _ = y[2];
-    var S = ve(r, d, b.Fr), C = S[0], O = S[2];
+    var S = ve(r, d, b.Rr), C = S[0], O = S[2];
     var A = function update(r, a) {
       m(r, a);
       C(r, a);
@@ -2124,7 +2125,7 @@
         });
       },
       elements: function elements() {
-        var r = b.Fr, a = r.W, e = r.U, t = r.A, n = r.q, i = r.D;
+        var r = b.Rr, a = r.W, e = r.H, t = r.A, n = r.q, i = r.D;
         return assignDeep({}, {
           target: a,
           host: e,
@@ -2158,7 +2159,7 @@
   };
   he.plugin = fe;
   he.env = function() {
-    var r = wa(), a = r.L, e = r.I, t = r.T, n = r.P, i = r.F, v = r.M, o = r.k, u = r.H, f = r.N, s = r.j, c = r.B, l = r.V;
+    var r = ha(), a = r.L, e = r.I, t = r.T, n = r.P, i = r.R, v = r.M, o = r.k, u = r.U, f = r.F, s = r.j, c = r.V, l = r.B;
     return assignDeep({}, {
       scrollbarSize: a,
       scrollbarIsOverlaid: e,

packages/overlayscrollbars/src/environment.ts

@@ -147,13 +147,6 @@ const getWindowDPR = (): number => {
   return window.devicePixelRatio || dDPI / sDPI;
 };
 
-const getDefaultInitializationStrategy = (
-  nativeScrollbarStyling: boolean
-): InitializationStrategy => ({
-  _padding: !nativeScrollbarStyling,
-  _content: false,
-});
-
 const createEnvironment = (): InternalEnvironment => {
   const { body } = document;
   const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`);
@@ -170,7 +163,10 @@ const createEnvironment = (): InternalEnvironment => {
     x: nativeScrollbarSize.x === 0,
     y: nativeScrollbarSize.y === 0,
   };
-  const initializationStrategy = getDefaultInitializationStrategy(nativeScrollbarStyling);
+  const initializationStrategy = {
+    _padding: !nativeScrollbarStyling,
+    _content: false,
+  };
   const defaultDefaultOptions = assignDeep({}, defaultOptions);
 
   const env: InternalEnvironment = {

packages/overlayscrollbars/src/initialization.ts

@@ -1,4 +1,4 @@
-import { isFunction, isBoolean, isNull, isUndefined } from 'support';
+import { isFunction, isNull, isUndefined } from 'support';
 import type {
   StructureInitialization,
   StructureInitializationStrategy,
@@ -47,23 +47,20 @@ export type DefaultInitializtationElementStrategy<
   ? (...args: P) => HTMLElement
   : never;
 
+const resolveInitialization = <T>(value: any, args: any): T =>
+  isFunction(value) ? value.apply(0, args) : value;
+
 const staticInitializationElement = <T extends StaticInitializationElement<any>>(
   args: Parameters<Extract<T, (...args: any[]) => any>>,
   defaultStaticInitializationElement: DefaultInitializtationElementStrategy<T>,
   staticInitializationElementStrategy?: InitializtationElementStrategy<T>,
   staticInitializationElementValue?: T | false
-): HTMLElement => {
+): HTMLElement =>
-  const result =
+  resolveInitialization<StaticInitialization>(
     staticInitializationElementValue ||
-    (isFunction(staticInitializationElementStrategy)
+      resolveInitialization<StaticInitialization>(staticInitializationElementStrategy, args),
-      ? staticInitializationElementStrategy.apply(0, args)
+    args
-      : staticInitializationElementStrategy);
+  ) || defaultStaticInitializationElement.apply(0, args);
-
-  return (
-    (isFunction(result) ? result.apply(0, args) : result) ||
-    defaultStaticInitializationElement.apply(0, args)
-  );
-};
 
 const dynamicInitializationElement = <T extends DynamicInitializationElement<any>>(
   args: Parameters<Extract<T, (...args: any[]) => any>>,
@@ -71,15 +68,19 @@ const dynamicInitializationElement = <T extends DynamicInitializationElement<any
   dynamicInitializationElementStrategy?: InitializtationElementStrategy<T>,
   dynamicInitializationElementValue?: T | false
 ): HTMLElement | false => {
-  const takeInitializationValue =
+  let result = resolveInitialization<DynamicInitialization>(
-    isBoolean(dynamicInitializationElementValue) || !!dynamicInitializationElementValue;
+    dynamicInitializationElementValue,
-  const result = takeInitializationValue
+    args
-    ? (dynamicInitializationElementValue as boolean | HTMLElement)
+  );
-    : isFunction(dynamicInitializationElementStrategy)
-    ? dynamicInitializationElementStrategy.apply(0, args)
-    : dynamicInitializationElementStrategy;
 
-  return result === true || isNull(result) || isUndefined(result) || isFunction(result)
+  if (isNull(result) || isUndefined(result)) {
+    result = resolveInitialization<DynamicInitialization>(
+      dynamicInitializationElementStrategy,
+      args
+    );
+  }
+
+  return result === true || isNull(result) || isUndefined(result)
     ? defaultDynamicInitializationElement.apply(0, args)
     : result;
 };

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts

@@ -92,8 +92,8 @@ const createUniqueViewportArrangeElement = (): HTMLStyleElement | false => {
   return result;
 };
 
-const addDataAttrHost = (elm: HTMLElement, value?: string | false | null | undefined) => {
+const addDataAttrHost = (elm: HTMLElement, value: string) => {
-  attr(elm, dataAttributeHost, value || '');
+  attr(elm, dataAttributeHost, value);
   return removeAttr.bind(0, elm, dataAttributeHost);
 };
 
@@ -117,7 +117,7 @@ export const createStructureSetupElements = (
   const ownerDocument = targetElement!.ownerDocument;
   const bodyElm = ownerDocument.body as HTMLBodyElement;
   const wnd = ownerDocument.defaultView as Window;
-  const singleElmSupport = !!ResizeObserverConstructor && _nativeScrollbarStyling;
+  const singleElmSupport = !!ResizeObserverConstructor && !isTextarea && _nativeScrollbarStyling;
   const staticInitializationElement =
     generalStaticInitializationElement<StructureStaticInitializationElement>.bind(0, [
       targetElement,
@@ -126,17 +126,18 @@ export const createStructureSetupElements = (
     generalDynamicInitializationElement<StructureDynamicInitializationElement>.bind(0, [
       targetElement,
     ]);
-  const potentialViewportElement = staticInitializationElement(
+  const viewportElement = [
-    createNewDiv,
+    staticInitializationElement(
-    viewportInitializationStrategy,
+      createNewDiv,
-    targetStructureInitialization.viewport
+      viewportInitializationStrategy,
-  );
+      targetStructureInitialization.viewport
-  const potentiallySingleElm = potentialViewportElement === targetElement;
+    ),
-  const viewportIsTarget = singleElmSupport && potentiallySingleElm;
+    staticInitializationElement(createNewDiv, viewportInitializationStrategy),
-  const viewportElement =
+    staticInitializationElement(createNewDiv),
-    potentiallySingleElm && !viewportIsTarget
+  ].filter((potentialViewport) =>
-      ? staticInitializationElement(createNewDiv)
+    !singleElmSupport ? potentialViewport !== targetElement : true
-      : potentialViewportElement;
+  )[0];
+  const viewportIsTarget = viewportElement === targetElement;
   const evaluatedTargetObj: StructureSetupElementsObj = {
     _target: targetElement,
     _host: isTextarea
@@ -147,16 +148,20 @@ export const createStructureSetupElements = (
         )
       : (targetElement as HTMLElement),
     _viewport: viewportElement,
-    _padding: dynamicInitializationElement(
+    _padding:
-      createNewDiv,
+      !viewportIsTarget &&
-      paddingInitializationStrategy,
+      dynamicInitializationElement(
-      targetStructureInitialization.padding
+        createNewDiv,
-    ),
+        paddingInitializationStrategy,
-    _content: dynamicInitializationElement(
+        targetStructureInitialization.padding
-      createNewDiv,
+      ),
-      contentInitializationStrategy,
+    _content:
-      targetStructureInitialization.content
+      !viewportIsTarget &&
-    ),
+      dynamicInitializationElement(
+        createNewDiv,
+        contentInitializationStrategy,
+        targetStructureInitialization.content
+      ),
     _viewportArrange: !viewportIsTarget && createUniqueViewportArrangeElement(),
     _windowElm: wnd,
     _documentElm: ownerDocument,

packages/overlayscrollbars/src/support/dom/attribute.ts

@@ -39,6 +39,13 @@ export function attr(
   elm && elm.setAttribute(attrName, value);
 }
 
+/**
+ * Treats the given attribute like the "class" attribute and adds or removes the given value from it.
+ * @param elm The element.
+ * @param attrName The attributeName to which the value shall be added or removed.
+ * @param value The value which shall be added or removed.
+ * @param add True if the value shall be added, false otherwise.
+ */
 export const attrClass = (
   elm: HTMLElement | false | null | undefined,
   attrName: string,
@@ -52,6 +59,13 @@ export const attrClass = (
   attr(elm, attrName, from(currValuesSet).join(' ').trim());
 };
 
+/**
+ * Treats the given attribute like the "class" attribute and checks if the given value is in it.
+ * @param elm The element.
+ * @param attrName The attributeName from which the content shall be checked.
+ * @param value The value.
+ * @returns True if the given attribute has the value in it, false otherwise.
+ */
 export const hasAttrClass = (
   elm: HTMLElement | false | null | undefined,
   attrName: string,

packages/overlayscrollbars/tests/jest/setups/structureSetup/structureSetup.elements.test.ts

@@ -1,3 +1,5 @@
+import { hasClass, isFunction, isHTMLElement } from 'support';
+import { dataAttributeHost } from 'classnames';
 import { InternalEnvironment } from 'environment';
 import {
   createStructureSetupElements,
@@ -9,13 +11,20 @@ import type {
   StructureStaticInitializationElement,
   StructureDynamicInitializationElement,
 } from 'setups/structureSetup/structureSetup.initialization';
-import { isHTMLElement } from 'support';
 
 const mockGetEnvironment = jest.fn();
 jest.mock('environment', () => ({
   getEnvironment: jest.fn().mockImplementation(() => mockGetEnvironment()),
 }));
 
+jest.mock('support/compatibility/apis', () => {
+  const originalModule = jest.requireActual('support/compatibility/apis');
+  return {
+    ...originalModule,
+    ResizeObserverConstructor: true,
+  };
+});
+
 interface StructureSetupElementsProxy {
   input: InitializationTarget;
   elements: StructureSetupElementsObj;
@@ -67,31 +76,39 @@ const getElements = (textarea?: boolean) => {
   };
 };
 
-const assertCorrectDOMStructure = (textarea?: boolean) => {
+const assertCorrectDOMStructure = (textarea: boolean, viewportIsTarget: boolean) => {
   const { target, host, padding, viewport, content } = getElements(textarea);
 
-  expect(host).toBeTruthy();
+  if (viewportIsTarget) {
-  expect(viewport).toBeTruthy();
-  expect(viewport.parentElement).toBe(padding || host);
-
-  if (content) {
-    expect(content.parentElement).toBe(viewport);
-  }
-  if (padding) {
-    expect(padding.parentElement).toBe(host);
-  }
-
-  expect(host.parentElement).toBe(document.body);
-  expect(host.previousElementSibling).toBe(document.querySelector('nav'));
-  expect(host.nextElementSibling).toBe(document.querySelector('footer'));
-
-  const contentElm = content || viewport;
-  if (textarea) {
-    expect(target.parentElement).toBe(contentElm);
-    expect(contentElm.innerHTML).toBe(textareaContent);
-  } else {
     expect(target).toBe(host);
-    expect(contentElm.innerHTML).toBe(dynamicContent);
+    expect(host).toBeTruthy();
+    expect(padding).toBeFalsy();
+    expect(viewport).toBeFalsy();
+    expect(content).toBeFalsy();
+  } else {
+    expect(host).toBeTruthy();
+    expect(viewport).toBeTruthy();
+    expect(viewport.parentElement).toBe(padding || host);
+
+    if (content) {
+      expect(content.parentElement).toBe(viewport);
+    }
+    if (padding) {
+      expect(padding.parentElement).toBe(host);
+    }
+
+    expect(host.parentElement).toBe(document.body);
+    expect(host.previousElementSibling).toBe(document.querySelector('nav'));
+    expect(host.nextElementSibling).toBe(document.querySelector('footer'));
+
+    const contentElm = content || viewport;
+    if (textarea) {
+      expect(target.parentElement).toBe(contentElm);
+      expect(contentElm.innerHTML).toBe(textareaContent);
+    } else {
+      expect(target).toBe(host);
+      expect(contentElm.innerHTML).toBe(dynamicContent);
+    }
   }
 };
 
@@ -112,7 +129,16 @@ const assertCorrectSetupElements = (
   environment: InternalEnvironment
 ): [StructureSetupElementsObj, () => void] => {
   const { input, elements, destroy } = setupElementsProxy;
-  const { _target, _host, _padding, _viewport, _content } = elements;
+  const {
+    _target,
+    _host,
+    _padding,
+    _viewport,
+    _content,
+    _viewportIsTarget,
+    _viewportHasClass,
+    _viewportAddRemoveClass,
+  } = elements;
   const { target, host, padding, viewport, content } = getElements(textarea);
   const isTextarea = target.matches('textarea');
   const isBody = target.matches('body');
@@ -122,21 +148,29 @@ const assertCorrectSetupElements = (
   expect(_target).toBe(target);
   expect(_host).toBe(host);
 
-  if (padding || _padding) {
+  if (_viewportIsTarget) {
+    expect(padding).toBeFalsy();
+    expect(_padding).toBeFalsy();
+  } else if (padding || _padding) {
     expect(_padding).toBe(padding);
   } else {
     expect(padding).toBeFalsy();
     expect(_padding).toBeFalsy();
   }
 
-  if (viewport || _viewport) {
+  if (_viewportIsTarget) {
+    expect(_viewport).toBe(_target);
+  } else if (viewport || _viewport) {
     expect(_viewport).toBe(viewport);
   } else {
     expect(viewport).toBeFalsy();
     expect(_viewport).toBeFalsy();
   }
 
-  if (content || _content) {
+  if (_viewportIsTarget) {
+    expect(content).toBeFalsy();
+    expect(_content).toBeFalsy();
+  } else if (content || _content) {
     expect(_content).toBe(content);
   } else {
     expect(content).toBeFalsy();
@@ -166,14 +200,18 @@ const assertCorrectSetupElements = (
   const styleElm = document.querySelector('style');
   const checkStrategyDependendElements = (
     elm: Element | null,
-    input: StructureStaticInitializationElement | StructureDynamicInitializationElement,
+    inputStrategy: StructureStaticInitializationElement | StructureDynamicInitializationElement,
     isStaticStrategy: boolean,
     strategy:
       | InitializtationElementStrategy<StructureStaticInitializationElement>
-      | InitializtationElementStrategy<StructureDynamicInitializationElement>
+      | InitializtationElementStrategy<StructureDynamicInitializationElement>,
+    kind: 'padding' | 'viewport' | 'content' | 'host'
   ) => {
+    const input = isFunction(inputStrategy) ? inputStrategy(target) : inputStrategy;
     if (input) {
-      expect(elm).toBeTruthy();
+      if (!_viewportIsTarget) {
+        expect(elm).toBeTruthy();
+      }
     } else {
       if (input === false) {
         expect(elm).toBeFalsy();
@@ -184,7 +222,13 @@ const assertCorrectSetupElements = (
             strategy as InitializtationElementStrategy<StructureStaticInitializationElement>;
           if (typeof strategy === 'function') {
             const result = strategy(target);
-            if (result) {
+            if (_viewportIsTarget) {
+              if (kind === 'host') {
+                expect(elm).toBeTruthy();
+              } else {
+                expect(elm).toBeFalsy();
+              }
+            } else if (result && !isTextarea) {
               expect(result).toBe(elm);
             } else {
               expect(elm).toBeTruthy();
@@ -195,12 +239,17 @@ const assertCorrectSetupElements = (
         } else {
           strategy =
             strategy as InitializtationElementStrategy<StructureDynamicInitializationElement>;
-          expect(strategy).not.toBe(null);
+
-          expect(strategy).not.toBe(undefined);
           if (typeof strategy === 'function') {
             const result = strategy(target);
             const resultIsBoolean = typeof result === 'boolean';
-            if (resultIsBoolean) {
+            if (_viewportIsTarget) {
+              if (kind === 'host') {
+                expect(elm).toBeTruthy();
+              } else {
+                expect(elm).toBeFalsy();
+              }
+            } else if (resultIsBoolean) {
               if (result) {
                 expect(elm).toBeTruthy();
               } else {
@@ -231,10 +280,10 @@ const assertCorrectSetupElements = (
   }
 
   if (inputIsElement) {
-    checkStrategyDependendElements(padding, undefined, false, paddingInitStrategy);
+    checkStrategyDependendElements(padding, undefined, false, paddingInitStrategy, 'padding');
-    checkStrategyDependendElements(content, undefined, false, contentInitStrategy);
+    checkStrategyDependendElements(content, undefined, false, contentInitStrategy, 'content');
-    checkStrategyDependendElements(viewport, undefined, true, viewportInitStrategy);
+    checkStrategyDependendElements(viewport, undefined, true, viewportInitStrategy, 'viewport');
-    checkStrategyDependendElements(host, undefined, true, hostInitStrategy);
+    checkStrategyDependendElements(host, undefined, true, hostInitStrategy, 'host');
   } else {
     const {
       padding: inputPadding,
@@ -242,10 +291,30 @@ const assertCorrectSetupElements = (
       viewport: inputViewport,
       host: inputHost,
     } = inputAsObj;
-    checkStrategyDependendElements(padding, inputPadding, false, paddingInitStrategy);
+    checkStrategyDependendElements(padding, inputPadding, false, paddingInitStrategy, 'padding');
-    checkStrategyDependendElements(content, inputContent, false, contentInitStrategy);
+    checkStrategyDependendElements(content, inputContent, false, contentInitStrategy, 'content');
-    checkStrategyDependendElements(viewport, inputViewport, true, viewportInitStrategy);
+    checkStrategyDependendElements(viewport, inputViewport, true, viewportInitStrategy, 'viewport');
-    checkStrategyDependendElements(host, inputHost, true, hostInitStrategy);
+    checkStrategyDependendElements(host, inputHost, true, hostInitStrategy, 'host');
+  }
+
+  const className = 'clazz';
+  const attrName = 'attr';
+
+  _viewportAddRemoveClass(className, attrName, true);
+  if (_viewportIsTarget) {
+    expect(_host.getAttribute(dataAttributeHost)!.indexOf(attrName) >= 0).toBe(true);
+    expect(_viewportHasClass('', attrName)).toBe(true);
+  } else {
+    expect(hasClass(_viewport, className)).toBe(true);
+    expect(_viewportHasClass(className, '')).toBe(true);
+  }
+  _viewportAddRemoveClass(className, attrName);
+  if (_viewportIsTarget) {
+    expect(_host.getAttribute(dataAttributeHost)!.indexOf(attrName) >= 0).toBe(false);
+    expect(_viewportHasClass('', attrName)).toBe(false);
+  } else {
+    expect(hasClass(_viewport, className)).toBe(false);
+    expect(_viewportHasClass(className, '')).toBe(false);
   }
 
   return [elements, destroy];
@@ -294,7 +363,6 @@ const envInitStrategyMin = {
       _viewport: () => null,
       _content: () => false,
       _padding: false,
-      _scrollbarsSlot: null,
     }),
   },
 };
@@ -307,7 +375,6 @@ const envInitStrategyMax = {
       _viewport: null,
       _content: true,
       _padding: () => true,
-      _scrollbarsSlot: null,
     }),
   },
 };
@@ -320,7 +387,16 @@ const envInitStrategyAssigned = {
       _viewport: (target: HTMLElement) => target.querySelector('#viewport') as HTMLElement,
       _content: (target: HTMLElement) => target.querySelector<HTMLElement>('#content'),
       _padding: (target: HTMLElement) => target.querySelector<HTMLElement>('#padding'),
-      _scrollbarsSlot: null,
+    }),
+  },
+};
+const envInitStrategyViewportIsTarget = {
+  name: 'initialization strategy assigned',
+  env: {
+    ...env,
+    _nativeScrollbarStyling: true,
+    _getInitializationStrategy: () => ({
+      _viewport: (target: HTMLElement) => target,
     }),
   },
 };
@@ -335,6 +411,7 @@ describe('structureSetup', () => {
     envInitStrategyMin,
     envInitStrategyMax,
     envInitStrategyAssigned,
+    envInitStrategyViewportIsTarget,
   ].forEach((envWithName) => {
     const { env: currEnv, name } = envWithName;
     describe(`Environment: ${name}`, () => {
@@ -347,23 +424,23 @@ describe('structureSetup', () => {
           describe('basic', () => {
             test('Element', () => {
               const snapshot = fillBody(isTextarea);
-              const [, destroy] = assertCorrectSetupElements(
+              const [elements, destroy] = assertCorrectSetupElements(
                 isTextarea,
                 createStructureSetupProxy(getTarget(isTextarea)),
                 currEnv
               );
-              assertCorrectDOMStructure(isTextarea);
+              assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
               assertCorrectDestroy(snapshot, destroy);
             });
 
             test('Object', () => {
               const snapshot = fillBody(isTextarea);
-              const [, destroy] = assertCorrectSetupElements(
+              const [elements, destroy] = assertCorrectSetupElements(
                 isTextarea,
                 createStructureSetupProxy({ target: getTarget(isTextarea) }),
                 currEnv
               );
-              assertCorrectDOMStructure(isTextarea);
+              assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
               assertCorrectDestroy(snapshot, destroy);
             });
           });
@@ -376,16 +453,16 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
-                    padding: document.querySelector<HTMLElement>('#padding')!,
+                    padding: () => document.querySelector<HTMLElement>('#padding')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -395,16 +472,16 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
-                    host: document.querySelector<HTMLElement>('#host')!,
+                    host: () => document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -414,7 +491,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="content">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -423,7 +500,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -435,18 +512,18 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding"><div id="viewport"><div id="content">${content}</div></div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     padding: document.querySelector<HTMLElement>('#padding')!,
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
-                    content: document.querySelector<HTMLElement>('#content')!,
+                    content: () => document.querySelector<HTMLElement>('#content')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -456,17 +533,17 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
-                    host: document.querySelector<HTMLElement>('#host')!,
+                    host: () => document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     padding: document.querySelector<HTMLElement>('#padding')!,
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -476,17 +553,17 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding"><div id="content">${content}</div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
-                    padding: document.querySelector<HTMLElement>('#padding')!,
+                    padding: () => document.querySelector<HTMLElement>('#padding')!,
                     content: document.querySelector<HTMLElement>('#content')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -496,17 +573,17 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
-                    content: document.querySelector<HTMLElement>('#content')!,
+                    content: () => document.querySelector<HTMLElement>('#content')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -514,7 +591,7 @@ describe('structureSetup', () => {
             describe('single false', () => {
               test('padding', () => {
                 const snapshot = fillBody(isTextarea);
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     target: getTarget(isTextarea),
@@ -522,21 +599,21 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
               test('content', () => {
                 const snapshot = fillBody(isTextarea);
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     target: getTarget(isTextarea),
-                    content: false,
+                    content: () => false,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -544,21 +621,21 @@ describe('structureSetup', () => {
             describe('single true', () => {
               test('padding', () => {
                 const snapshot = fillBody(isTextarea);
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     target: getTarget(isTextarea),
-                    padding: true,
+                    padding: () => true,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
               test('content', () => {
                 const snapshot = fillBody(isTextarea);
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     target: getTarget(isTextarea),
@@ -566,7 +643,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -574,7 +651,7 @@ describe('structureSetup', () => {
             describe('multiple false', () => {
               test('padding & content', () => {
                 const snapshot = fillBody(isTextarea);
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     target: getTarget(isTextarea),
@@ -583,7 +660,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -591,7 +668,7 @@ describe('structureSetup', () => {
             describe('multiple true', () => {
               test('padding & content', () => {
                 const snapshot = fillBody(isTextarea);
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     target: getTarget(isTextarea),
@@ -600,7 +677,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });
@@ -612,7 +689,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -623,7 +700,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -633,7 +710,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -644,7 +721,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -654,18 +731,18 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
-                    padding: false,
+                    padding: () => false,
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
-                    content: true,
+                    content: () => true,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -675,18 +752,18 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     padding: true,
-                    viewport: document.querySelector<HTMLElement>('#viewport')!,
+                    viewport: () => document.querySelector<HTMLElement>('#viewport')!,
                     content: false,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -696,7 +773,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="content">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -706,7 +783,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -716,7 +793,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="content">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -726,7 +803,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -736,17 +813,17 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
-                    padding: false,
+                    padding: () => false,
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -756,7 +833,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -766,7 +843,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -776,18 +853,18 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
                     padding: false,
-                    content: document.querySelector<HTMLElement>('#content')!,
+                    content: () => document.querySelector<HTMLElement>('#content')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -797,18 +874,18 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport"><div id="content">${content}</div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
-                    viewport: document.querySelector<HTMLElement>('#viewport')!,
+                    viewport: () => document.querySelector<HTMLElement>('#viewport')!,
                     padding: true,
                     content: document.querySelector<HTMLElement>('#content')!,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -818,7 +895,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -828,7 +905,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -838,17 +915,17 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
-                    host: document.querySelector<HTMLElement>('#host')!,
+                    host: () => document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     padding: document.querySelector<HTMLElement>('#padding')!,
                     content: true,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -858,17 +935,17 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
-                    viewport: document.querySelector<HTMLElement>('#viewport')!,
+                    viewport: () => document.querySelector<HTMLElement>('#viewport')!,
                     content: false,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -878,7 +955,7 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="viewport">${content}</div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
@@ -888,7 +965,7 @@ describe('structureSetup', () => {
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -898,18 +975,18 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
                     host: document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
-                    padding: document.querySelector<HTMLElement>('#padding')!,
+                    padding: () => document.querySelector<HTMLElement>('#padding')!,
                     viewport: document.querySelector<HTMLElement>('#viewport')!,
-                    content: false,
+                    content: () => false,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
 
@@ -919,18 +996,18 @@ describe('structureSetup', () => {
                   (content, hostId) =>
                     `<div id="${hostId}"><div id="padding"><div id="viewport">${content}</div></div></div>`
                 );
-                const [, destroy] = assertCorrectSetupElements(
+                const [elements, destroy] = assertCorrectSetupElements(
                   isTextarea,
                   createStructureSetupProxy({
-                    host: document.querySelector<HTMLElement>('#host')!,
+                    host: () => document.querySelector<HTMLElement>('#host')!,
                     target: getTarget(isTextarea),
                     padding: document.querySelector<HTMLElement>('#padding')!,
-                    viewport: document.querySelector<HTMLElement>('#viewport')!,
+                    viewport: () => document.querySelector<HTMLElement>('#viewport')!,
                     content: true,
                   }),
                   currEnv
                 );
-                assertCorrectDOMStructure(isTextarea);
+                assertCorrectDOMStructure(isTextarea, elements._viewportIsTarget);
                 assertCorrectDestroy(snapshot, destroy);
               });
             });

packages/overlayscrollbars/tests/jest/support/dom/attribute.test.ts

@@ -1,6 +1,15 @@
-import { attr, removeAttr, val, scrollLeft, scrollTop } from 'support/dom/attribute';
+import {
+  attr,
+  attrClass,
+  hasAttrClass,
+  removeAttr,
+  val,
+  scrollLeft,
+  scrollTop,
+} from 'support/dom/attribute';
 
 const testElm = document.body;
+const getAttribute = (name: string) => testElm.getAttribute(name);
 const setAttribute = (name: string, value: string) => {
   testElm.setAttribute(name, value);
 };
@@ -46,6 +55,66 @@ describe('dom attributes', () => {
     });
   });
 
+  describe('attrClass', () => {
+    test('add', () => {
+      const attrName = 'data-test-attrClass-add';
+
+      attrClass(testElm, attrName, '000', true);
+      expect(getAttribute(attrName)).toBe('000');
+
+      setAttribute(attrName, '123');
+      attrClass(testElm, attrName, '456', true);
+      expect(getAttribute(attrName)).toBe('123 456');
+
+      attrClass(testElm, attrName, '789', true);
+      attrClass(testElm, attrName, '789', true);
+      expect(getAttribute(attrName)).toBe('123 456 789');
+
+      attrClass(testElm, attrName, '', true);
+      expect(getAttribute(attrName)).toBe('123 456 789');
+
+      removeAttribute(attrName);
+    });
+
+    test('remove', () => {
+      const attrName = 'data-test-attrClass-remove';
+
+      setAttribute(attrName, '123');
+      attrClass(testElm, attrName, '456');
+      expect(getAttribute(attrName)).toBe('123');
+
+      attrClass(testElm, attrName, '123');
+      expect(getAttribute(attrName)).toBe('');
+      attrClass(testElm, attrName, '123');
+      expect(getAttribute(attrName)).toBe('');
+
+      attrClass(testElm, attrName, '', true);
+      expect(getAttribute(attrName)).toBe('');
+
+      removeAttribute(attrName);
+    });
+  });
+
+  describe('hasAttrClass', () => {
+    test('hasAttrClass', () => {
+      const attrName = 'data-test-hasAttrClass';
+
+      expect(hasAttrClass(testElm, attrName, '123')).toBe(false);
+
+      setAttribute(attrName, '123');
+      attrClass(testElm, attrName, '456', true);
+      attrClass(testElm, attrName, '789', true);
+      expect(hasAttrClass(testElm, attrName, '123')).toBe(true);
+      expect(hasAttrClass(testElm, attrName, '456')).toBe(true);
+      expect(hasAttrClass(testElm, attrName, '789')).toBe(true);
+      expect(hasAttrClass(testElm, attrName, '123 456 789')).toBe(false);
+
+      expect(hasAttrClass(testElm, attrName, '')).toBe(false);
+
+      removeAttribute(attrName);
+    });
+  });
+
   describe('scrollLeft', () => {
     test('get', () => {
       setScrollLeft(100);

packages/overlayscrollbars/tests/jest/support/dom/class.test.ts

@@ -19,6 +19,7 @@ describe('dom class names', () => {
   describe('add', () => {
     test('none', () => {
       addClass(testElm, '');
+      addClass(testElm, ' ');
       // @ts-ignore
       addClass(testElm, null);
       // @ts-ignore
@@ -53,6 +54,7 @@ describe('dom class names', () => {
     test('none', () => {
       addClass(testElm, 'test-class');
       removeClass(testElm, '');
+      removeClass(testElm, ' ');
       // @ts-ignore
       removeClass(testElm, null);
       // @ts-ignore
@@ -82,6 +84,7 @@ describe('dom class names', () => {
   describe('has', () => {
     test('none', () => {
       expect(hasClass(testElm, '')).toBe(false);
+      expect(hasClass(testElm, ' ')).toBe(false);
     });
 
     test('single', () => {
@@ -103,6 +106,7 @@ describe('dom class names', () => {
   describe('diff', () => {
     test('none', () => {
       expect(diffClass('', '')).toEqual([]);
+      expect(diffClass('', ' ')).toEqual([]);
     });
 
     test('single', () => {