diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js index cda49ec6a55..5b7e16355fb 100644 --- a/packages/checkbox/test/visual/material/checkbox.test.js +++ b/packages/checkbox/test/visual/material/checkbox.test.js @@ -1,5 +1,6 @@ -import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js'; +import { sendKeys } from '@web/test-runner-commands'; import { visualDiff } from '@web/test-runner-visual-regression'; +import { fixtureSync } from '@vaadin/testing-helpers'; import '../../../theme/material/vaadin-checkbox.js'; describe('checkbox', () => { @@ -16,14 +17,9 @@ describe('checkbox', () => { await visualDiff(div, 'basic'); }); - it('focus-ring', async () => { - element.setAttribute('focus-ring', ''); - await visualDiff(div, 'focus-ring'); - }); - - it('disabled', async () => { - element.disabled = true; - await visualDiff(div, 'disabled'); + it('empty', async () => { + element.label = ''; + await visualDiff(div, 'empty'); }); it('checked', async () => { @@ -36,25 +32,47 @@ describe('checkbox', () => { await visualDiff(div, 'indeterminate'); }); - it('disabled checked', async () => { - element.disabled = true; - element.checked = true; - await visualDiff(div, 'disabled-checked'); + it('focus-ring', async () => { + await sendKeys({ press: 'Tab' }); + await visualDiff(div, 'focus-ring'); }); - it('disabled indeterminate', async () => { - element.disabled = true; - element.indeterminate = true; - await visualDiff(div, 'disabled-indeterminate'); - }); + describe('disabled', () => { + beforeEach(() => { + element.disabled = true; + }); - it('empty', async () => { - element.textContent = ''; - await visualDiff(div, 'empty'); + it('basic', async () => { + await visualDiff(div, 'disabled'); + }); + + it('checked', async () => { + element.checked = true; + await visualDiff(div, 'disabled-checked'); + }); + + it('indeterminate', async () => { + element.indeterminate = true; + await visualDiff(div, 'disabled-indeterminate'); + }); }); - it('RTL', async () => { - document.documentElement.setAttribute('dir', 'rtl'); - await visualDiff(div, 'rtl'); + describe('RTL', () => { + before(() => { + document.documentElement.setAttribute('dir', 'rtl'); + }); + + after(() => { + document.documentElement.removeAttribute('dir'); + }); + + it('basic', async () => { + await visualDiff(div, 'rtl'); + }); + + it('empty', async () => { + element.label = ''; + await visualDiff(div, 'rtl-empty'); + }); }); }); diff --git a/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png new file mode 100644 index 00000000000..77e47bfadf2 Binary files /dev/null and b/packages/checkbox/test/visual/material/screenshots/checkbox/baseline/rtl-empty.png differ diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js index bf8d8143421..294367c9cfa 100644 --- a/packages/checkbox/theme/material/vaadin-checkbox-styles.js +++ b/packages/checkbox/theme/material/vaadin-checkbox-styles.js @@ -14,7 +14,7 @@ registerStyles( -webkit-tap-highlight-color: transparent; } - [part='label']:not([empty]) { + :host([has-label]) [part='label'] { margin: 3px 12px 3px 6px; } @@ -126,7 +126,7 @@ registerStyles( } /* RTL specific styles */ - :host([dir='rtl']) [part='label']:not([empty]) { + :host([dir='rtl'][has-label]) [part='label'] { margin: 3px 6px 3px 12px; } `,