fix: trim CSS custom properties values (#186)

Author: web-padawan

packages/vaadin-app-layout/src/vaadin-app-layout.js

@@ -513,7 +513,7 @@ class AppLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @protected */
   _updateOverlayMode() {
-    const overlay = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
+    const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') == 'true';
     const drawer = this.$.drawer;
 
     if (!this.overlay && overlay) {
@@ -559,9 +559,15 @@ class AppLayoutElement extends ElementMixin(ThemableMixin(PolymerElement)) {
     this.drawerOpened = false;
   }
 
+  /** @private */
+  _getCustomPropertyValue(customProperty) {
+    const customPropertyValue = getComputedStyle(this).getPropertyValue(customProperty);
+    return (customPropertyValue || '').trim().toLowerCase();
+  }
+
   /** @protected */
   _updateTouchOptimizedMode() {
-    const touchOptimized = getComputedStyle(this).getPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
+    const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') == 'true';
 
     const navbarItems = this.querySelectorAll('[slot*="navbar"]');
 

packages/vaadin-app-layout/test/app-layout.test.js

@@ -158,6 +158,9 @@ describe('vaadin-app-layout', () => {
     });
 
     it('should not close on navigation event when not in overlay mode', () => {
+      // force it to desktop layout
+      layout.style.setProperty('--vaadin-app-layout-drawer-overlay', 'false');
+      layout._updateOverlayMode();
       layout.drawerOpened = true;
       window.dispatchEvent(new CustomEvent('vaadin-router-location-changed'));
       expect(layout.drawerOpened).to.be.true;

packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js

@@ -41,6 +41,13 @@ describe('app-layout', () => {
         element.primarySection = 'drawer';
         await visualDiff(div, `app-layout:${dir}-primary-drawer`);
       });
+
+      it('overlay', async () => {
+        // See https://github.com/vaadin/vaadin-app-layout/issues/183
+        element.style.setProperty('--vaadin-app-layout-drawer-overlay', ' true');
+        window.dispatchEvent(new Event('resize'));
+        await visualDiff(div, `app-layout:${dir}-overlay`);
+      });
     });
   });
 });

packages/vaadin-app-layout/test/visual/material/app-layout.test.js

@@ -41,6 +41,13 @@ describe('app-layout', () => {
         element.primarySection = 'drawer';
         await visualDiff(div, `app-layout:${dir}-primary-drawer`);
       });
+
+      it('overlay', async () => {
+        // See https://github.com/vaadin/vaadin-app-layout/issues/183
+        element.style.setProperty('--vaadin-app-layout-drawer-overlay', ' true');
+        window.dispatchEvent(new Event('resize'));
+        await visualDiff(div, `app-layout:${dir}-overlay`);
+      });
     });
   });
 });