From 1fdb9110a55b6075437b09a823c24508421995eb Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 26 Mar 2021 16:51:23 +0200 Subject: [PATCH] fix: trim CSS custom properties values --- .../vaadin-app-layout/src/vaadin-app-layout.js | 10 ++++++++-- .../vaadin-app-layout/test/app-layout.test.js | 3 +++ .../test/visual/lumo/app-layout.test.js | 7 +++++++ .../test/visual/material/app-layout.test.js | 7 +++++++ .../chrome/baseline/app-layout/ltr-overlay.png | Bin 0 -> 8833 bytes .../chrome/baseline/app-layout/rtl-overlay.png | Bin 0 -> 8819 bytes .../chrome/baseline/app-layout/ltr-overlay.png | Bin 0 -> 8191 bytes .../chrome/baseline/app-layout/rtl-overlay.png | Bin 0 -> 8200 bytes 8 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 screenshots/lumo/chrome/baseline/app-layout/ltr-overlay.png create mode 100644 screenshots/lumo/chrome/baseline/app-layout/rtl-overlay.png create mode 100644 screenshots/material/chrome/baseline/app-layout/ltr-overlay.png create mode 100644 screenshots/material/chrome/baseline/app-layout/rtl-overlay.png diff --git a/packages/vaadin-app-layout/src/vaadin-app-layout.js b/packages/vaadin-app-layout/src/vaadin-app-layout.js index 26f725170f8..31c9df4439a 100644 --- a/packages/vaadin-app-layout/src/vaadin-app-layout.js +++ b/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"]'); diff --git a/packages/vaadin-app-layout/test/app-layout.test.js b/packages/vaadin-app-layout/test/app-layout.test.js index 6f5bc747d7f..ffa020e65e7 100644 --- a/packages/vaadin-app-layout/test/app-layout.test.js +++ b/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; diff --git a/packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js b/packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js index a89afa05b73..c50bc08a125 100644 --- a/packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js +++ b/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`); + }); }); }); }); diff --git a/packages/vaadin-app-layout/test/visual/material/app-layout.test.js b/packages/vaadin-app-layout/test/visual/material/app-layout.test.js index ae7f3e5d320..bc4221dbae6 100644 --- a/packages/vaadin-app-layout/test/visual/material/app-layout.test.js +++ b/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`); + }); }); }); }); diff --git a/screenshots/lumo/chrome/baseline/app-layout/ltr-overlay.png b/screenshots/lumo/chrome/baseline/app-layout/ltr-overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..b0210ab3c1bc73522834bb7921492d7aea082126 GIT binary patch literal 8833 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 literal 0 HcmV?d00001 diff --git a/screenshots/material/chrome/baseline/app-layout/ltr-overlay.png b/screenshots/material/chrome/baseline/app-layout/ltr-overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..e3c4f613ee9014494ece360aa4b8d513f02efd23 GIT binary patch literal 8191 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 Y2MmdHI)r0|k2;vH$=8 literal 0 HcmV?d00001 diff --git a/screenshots/material/chrome/baseline/app-layout/rtl-overlay.png b/screenshots/material/chrome/baseline/app-layout/rtl-overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..88d6080a1574cd5bb6ff16c75287654582c84012 GIT binary patch literal 8200 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 literal 0 HcmV?d00001