67 lines
2.6 KiB
JavaScript
67 lines
2.6 KiB
JavaScript
'use strict';
|
|
|
|
const assert = require('assert');
|
|
global.LazilyEvaluatedFunction = require('../public/v3/lazily-evaluated-function.js').LazilyEvaluatedFunction;
|
|
global.CommonComponentBase = require('../public/shared/common-component-base.js').CommonComponentBase;
|
|
const MarkupComponentBase = require('../tools/js/markup-component.js').MarkupComponentBase;
|
|
|
|
describe('MarkupElement', function () {
|
|
beforeEach(() => {
|
|
MarkupComponentBase.reset();
|
|
});
|
|
|
|
function createElement(name)
|
|
{
|
|
class DummyComponent extends MarkupComponentBase { }
|
|
DummyComponent.contentTemplate = [name];
|
|
MarkupComponentBase.defineElement('dummy-component', DummyComponent);
|
|
const component = new DummyComponent;
|
|
return component.content().childNodes[0];
|
|
}
|
|
|
|
describe('style', function () {
|
|
it('should set the style content attribute', () => {
|
|
const div = createElement('div');
|
|
assert.equal(div.getAttribute('style'), null);
|
|
div.style.color = 'blue';
|
|
assert.equal(div.getAttribute('style'), 'color: blue');
|
|
});
|
|
|
|
it('should convert camelCased property names', () => {
|
|
const div = createElement('div');
|
|
assert.equal(div.getAttribute('style'), null);
|
|
div.style.fontWeight = 'bold';
|
|
assert.equal(div.getAttribute('style'), 'font-weight: bold');
|
|
});
|
|
|
|
it('should be able to serialize multiple properties', () => {
|
|
const div = createElement('div');
|
|
assert.equal(div.getAttribute('style'), null);
|
|
div.style.color = 'blue';
|
|
div.style.fontWeight = 'bold';
|
|
assert.equal(div.getAttribute('style'), 'color: blue; font-weight: bold');
|
|
});
|
|
|
|
it('should override properties after the conversion from camelCase', () => {
|
|
const div = createElement('div');
|
|
assert.equal(div.getAttribute('style'), null);
|
|
div.style['font-weight'] = 'bold';
|
|
assert.equal(div.getAttribute('style'), 'font-weight: bold');
|
|
div.style.fontWeight = 'normal';
|
|
assert.equal(div.getAttribute('style'), 'font-weight: normal');
|
|
});
|
|
});
|
|
|
|
describe('setAttribute', function () {
|
|
it('should override the inline style', () => {
|
|
const div = createElement('div');
|
|
assert.equal(div.getAttribute('style'), null);
|
|
div.style.color = 'blue';
|
|
assert.equal(div.getAttribute('style'), 'color: blue');
|
|
div.setAttribute('style', 'font-weight: bold');
|
|
assert.equal(div.getAttribute('style'), 'font-weight: bold');
|
|
});
|
|
});
|
|
|
|
});
|