blob: 459f1ba92added86662db875d97190d65ba19f60 [file] [log] [blame]
'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');
});
});
});