You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
snabbdom/src/test/style.ts

171 lines
6.7 KiB
TypeScript

import { assert } from 'chai';
import { init } from '../snabbdom';
import styleModule from '../modules/style';
import h from '../h';
import toVNode from '../tovnode';
var patch = init([
styleModule
]);
const featureDiscoveryElm = document.createElement('div');
featureDiscoveryElm.style.setProperty('--foo', 'foo');
const hasCssVariables = featureDiscoveryElm.style.getPropertyValue('--foo') === 'foo';
describe('style', function () {
var elm: any, vnode0: any;
beforeEach(function () {
elm = document.createElement('div');
vnode0 = elm;
});
it('is being styled', function () {
elm = patch(vnode0, h('div', { style: { fontSize: '12px' } })).elm;
assert.strictEqual(elm.style.fontSize, '12px');
});
it('can be memoized', function () {
var cachedStyles = { fontSize: '14px', display: 'inline' };
var vnode1 = h('i', { style: cachedStyles });
var vnode2 = h('i', { style: cachedStyles });
elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.style.fontSize, '14px');
assert.strictEqual(elm.style.display, 'inline');
elm = patch(vnode1, vnode2).elm;
assert.strictEqual(elm.style.fontSize, '14px');
assert.strictEqual(elm.style.display, 'inline');
});
it('updates styles', function () {
var vnode1 = h('i', { style: { fontSize: '14px', display: 'inline' } });
var vnode2 = h('i', { style: { fontSize: '12px', display: 'block' } });
var vnode3 = h('i', { style: { fontSize: '10px', display: 'block' } });
elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.style.fontSize, '14px');
assert.strictEqual(elm.style.display, 'inline');
elm = patch(vnode1, vnode2).elm;
assert.strictEqual(elm.style.fontSize, '12px');
assert.strictEqual(elm.style.display, 'block');
elm = patch(vnode2, vnode3).elm;
assert.strictEqual(elm.style.fontSize, '10px');
assert.strictEqual(elm.style.display, 'block');
});
it('explicialy removes styles', function () {
var vnode1 = h('i', { style: { fontSize: '14px' } });
var vnode2 = h('i', { style: { fontSize: '' } });
var vnode3 = h('i', { style: { fontSize: '10px' } });
elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.style.fontSize, '14px');
patch(vnode1, vnode2);
assert.strictEqual(elm.style.fontSize, '');
patch(vnode2, vnode3);
assert.strictEqual(elm.style.fontSize, '10px');
});
it('implicially removes styles from element', function () {
var vnode1 = h('div', [h('i', { style: { fontSize: '14px' } })]);
var vnode2 = h('div', [h('i')]);
var vnode3 = h('div', [h('i', { style: { fontSize: '10px' } })]);
patch(vnode0, vnode1);
assert.strictEqual(elm.firstChild.style.fontSize, '14px');
patch(vnode1, vnode2);
assert.strictEqual(elm.firstChild.style.fontSize, '');
patch(vnode2, vnode3);
assert.strictEqual(elm.firstChild.style.fontSize, '10px');
});
it('updates css variables', function () {
if (!hasCssVariables) {
this.skip();
} else {
var vnode1 = h('div', { style: { '--myVar': 1 as any } });
var vnode2 = h('div', { style: { '--myVar': 2 as any } });
var vnode3 = h('div', { style: { '--myVar': 3 as any } });
elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.style.getPropertyValue('--myVar'), '1');
elm = patch(vnode1, vnode2).elm;
assert.strictEqual(elm.style.getPropertyValue('--myVar'), '2');
elm = patch(vnode2, vnode3).elm;
assert.strictEqual(elm.style.getPropertyValue('--myVar'), '3');
}
});
it('explicialy removes css variables', function () {
if (!hasCssVariables) {
this.skip();
} else {
var vnode1 = h('i', { style: { '--myVar': 1 as any } });
var vnode2 = h('i', { style: { '--myVar': '' } });
var vnode3 = h('i', { style: { '--myVar': 2 as any } });
elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.style.getPropertyValue('--myVar'), '1');
patch(vnode1, vnode2);
assert.strictEqual(elm.style.getPropertyValue('--myVar'), '');
patch(vnode2, vnode3);
assert.strictEqual(elm.style.getPropertyValue('--myVar'), '2');
}
});
it('implicially removes css variables from element', function () {
if (!hasCssVariables) {
this.skip();
} else {
var vnode1 = h('div', [h('i', { style: { '--myVar': 1 as any } })]);
var vnode2 = h('div', [h('i')]);
var vnode3 = h('div', [h('i', { style: { '--myVar': 2 as any } })]);
patch(vnode0, vnode1);
assert.strictEqual(elm.firstChild.style.getPropertyValue('--myVar'), '1');
patch(vnode1, vnode2);
assert.strictEqual(elm.firstChild.style.getPropertyValue('--myVar'), '');
patch(vnode2, vnode3);
assert.strictEqual(elm.firstChild.style.getPropertyValue('--myVar'), '2');
}
});
it('updates delayed styles in next frame', function (done) {
var vnode1 = h('i', { style: { fontSize: '14px', delayed: { fontSize: '16px' } as any } });
var vnode2 = h('i', { style: { fontSize: '18px', delayed: { fontSize: '20px' } as any } });
elm = patch(vnode0, vnode1).elm;
assert.strictEqual(elm.style.fontSize, '14px');
requestAnimationFrame(() => {
requestAnimationFrame(() => {
assert.strictEqual(elm.style.fontSize, '16px');
elm = patch(vnode1, vnode2).elm;
assert.strictEqual(elm.style.fontSize, '18px');
requestAnimationFrame(() => {
requestAnimationFrame(() => {
assert.strictEqual(elm.style.fontSize, '20px');
done();
});
});
});
});
});
it('applies tranform as transition on remove', function (done) {
var btn = h('button', {
style: {
transition: 'transform 0.1s',
remove: { transform: 'translateY(100%)' } as any
}
}, ['A button']);
var vnode1 = h('div.parent', {}, [btn]);
var vnode2 = h('div.parent', {}, [null]);
document.body.appendChild(vnode0);
patch(vnode0, vnode1);
patch(vnode1, vnode2);
const button = document.querySelector('button') as HTMLButtonElement;
assert.notStrictEqual(button, null);
button.addEventListener('transitionend', function () {
assert.strictEqual(document.querySelector('button'), null);
done();
});
});
describe('using toVNode()', function () {
it('handles (ignoring) comment nodes', function () {
var comment = document.createComment('yolo');
var prevElm = document.createElement('div');
prevElm.appendChild(comment);
var nextVNode = h('div', [h('span', 'Hi')]);
elm = patch(toVNode(prevElm), nextVNode).elm;
assert.strictEqual(elm, prevElm);
assert.strictEqual(elm.tagName, 'DIV');
assert.strictEqual(elm.childNodes.length, 1);
assert.strictEqual(elm.childNodes[0].tagName, 'SPAN');
assert.strictEqual(elm.childNodes[0].textContent, 'Hi');
});
});
});