129 lines
4.2 KiB
JavaScript
129 lines
4.2 KiB
JavaScript
import { expect, fixture } from '@open-wc/testing';
|
|
|
|
import { isVisible } from '../../src/utils/is-visible.js';
|
|
|
|
describe('isVisible()', () => {
|
|
it('returns true for static block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(
|
|
`<div style="width:10px; height:10px;"></div>`,
|
|
));
|
|
|
|
expect(isVisible(element)).to.equal(true);
|
|
});
|
|
|
|
it('returns false for hidden static block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(
|
|
`<div style="width:10px; height:10px;" hidden></div>`,
|
|
));
|
|
|
|
expect(isVisible(element)).to.equal(false);
|
|
});
|
|
|
|
it('returns true for relative block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(
|
|
`<div style="width:10px; height:10px; position:relative; top:10px; left:10px;"></div>`,
|
|
));
|
|
|
|
expect(isVisible(element)).to.equal(true);
|
|
});
|
|
|
|
it('returns false for hidden relative block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(
|
|
`<div style="width:10px; height:10px; position:relative; top:10px; left:10px;" hidden></div>`,
|
|
));
|
|
|
|
expect(isVisible(element)).to.equal(false);
|
|
});
|
|
|
|
it('returns true for absolute block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`
|
|
<div style="width:10px; height:10px; position:absolute; top:10px; left:10px;"></div>
|
|
`));
|
|
|
|
expect(isVisible(element)).to.equal(true);
|
|
});
|
|
|
|
it('returns false for hidden absolute block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`
|
|
<div style="width:10px; height:10px; position:absolute; top:10px; left:10px;" hidden></div>
|
|
`));
|
|
|
|
expect(isVisible(element)).to.equal(false);
|
|
});
|
|
|
|
it('returns true for relative block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`
|
|
<div style="width:10px; height:10px; position:fixed;top:10px; left:10px;"></div>
|
|
`));
|
|
|
|
expect(isVisible(element)).to.equal(true);
|
|
});
|
|
|
|
it('returns true for relative block elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`
|
|
<div style="width:10px; height:10px; position:fixed;top:10px; left:10px;" hidden></div>
|
|
`));
|
|
|
|
expect(isVisible(element)).to.equal(false);
|
|
});
|
|
|
|
it('returns true for inline elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`<span>Inline content</span>`));
|
|
|
|
expect(isVisible(element)).to.equal(true);
|
|
});
|
|
|
|
it('returns true for inline elements without content', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`<span></span>`));
|
|
|
|
expect(isVisible(element)).to.equal(true);
|
|
});
|
|
|
|
it('returns true for static block elements with 0 dimensions', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(
|
|
`<div style="width:0; height:0;"></div>`,
|
|
));
|
|
|
|
expect(isVisible(element)).to.equal(true);
|
|
});
|
|
|
|
it('returns false for hidden inline elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(
|
|
`<span hidden>Inline content</span>`,
|
|
));
|
|
|
|
expect(isVisible(element)).to.equal(false);
|
|
});
|
|
|
|
it('returns false invisible elements', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(
|
|
`<div style="width:10px; height:10px; visibility: hidden;"></div>`,
|
|
));
|
|
|
|
expect(isVisible(element)).to.equal(false);
|
|
});
|
|
|
|
it('returns false when hidden by parent', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`
|
|
<div hidden>
|
|
<div id="target" style="width:10px; height:10px;"></div>
|
|
<div></div>
|
|
</div>
|
|
`));
|
|
|
|
const target = /** @type {HTMLElement} */ (element.querySelector('#target'));
|
|
expect(isVisible(target)).to.equal(false);
|
|
});
|
|
|
|
it('returns false when invisible by parent', async () => {
|
|
const element = /** @type {HTMLElement} */ (await fixture(`
|
|
<div style="visibility: hidden;">
|
|
<div id="target" style="width:10px; height:10px;"></div>
|
|
<div></div>
|
|
</div>
|
|
`));
|
|
|
|
const target = /** @type {HTMLElement} */ (element.querySelector('#target'));
|
|
expect(isVisible(target)).to.equal(false);
|
|
});
|
|
});
|