suite.test('Schema rules', function () {
let ser = Serializer({ fix_list_elements : true });
ser.setRules('@[id|title|class|style],div,img[src|alt|-style|border],span,hr');
DOM.setHTML('test', '<img title="test" src="tinymce/ui/img/raster.gif" data-mce-src="tinymce/ui/img/raster.gif" alt="test" ' +
'border="0" style="border: 1px solid red" class="test" /><span id="test2">test</span><hr />');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<img title="test" class="test" src="tinymce/ui/img/raster.gif" ' +
'alt="test" border="0" /><span id="test2">test</span><hr />', 'Global rule'
);
ser.setRules('*a[*],em/i[*],strong/b[*i*]');
DOM.setHTML('test', '<a href="test" data-mce-href="test">test</a><strong title="test" class="test">test2</strong><em title="test">test3</em>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<a href="test">test</a><strong title="test">test2</strong><em title="test">' +
'test3</em>', 'Wildcard rules');
ser.setRules('br,hr,input[type|name|value],div[id],span[id],strong/b,a,em/i,a[!href|!name],img[src|border=0|title={$uid}]');
DOM.setHTML('test', '<br /><hr /><input type="text" name="test" value="val" class="no" />' +
'<span id="test2" class="no"><b class="no">abc</b><em class="no">123</em></span>123<a href="file.html" ' +
'data-mce-href="file.html">link</a><a name="anchor"></a><a>no</a><img src="tinymce/ui/img/raster.gif" ' +
'data-mce-src="tinymce/ui/img/raster.gif" />');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<div id="test"><br /><hr /><input type="text" name="test" value="val" />' +
'<span id="test2"><strong>abc</strong><em>123</em></span>123<a href="file.html">link</a>' +
'<a name="anchor"></a>no<img src="tinymce/ui/img/raster.gif" border="0" title="mce_0" /></div>', 'Output name and attribute rules');
ser.setRules('img[src|border=0|alt=]');
DOM.setHTML('test', '<img src="tinymce/ui/img/raster.gif" data-mce-src="tinymce/ui/img/raster.gif" border="0" alt="" />');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<img src="tinymce/ui/img/raster.gif" border="0" alt="" />', 'Default attribute with empty value');
ser.setRules('img[src|border=0|alt=],div[style|id],*[*]');
DOM.setHTML('test', '<img src="tinymce/ui/img/raster.gif" data-mce-src="tinymce/ui/img/raster.gif" /><hr />');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<img src="tinymce/ui/img/raster.gif" border="0" alt="" /><hr />'
);
ser = Serializer({
valid_elements : 'img[src|border=0|alt=]',
extended_valid_elements : 'div[id],img[src|alt=]'
});
DOM.setHTML('test', '<img src="tinymce/ui/img/raster.gif" data-mce-src="tinymce/ui/img/raster.gif" alt="" />');
LegacyUnit.equal(
ser.serialize(DOM.get('test')),
'<div id="test"><img src="tinymce/ui/img/raster.gif" alt="" /></div>'
);
ser = Serializer({ invalid_elements : 'hr,br' });
DOM.setHTML('test', '<img src="tinymce/ui/img/raster.gif" data-mce-src="tinymce/ui/img/raster.gif" /><hr /><br />');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<img src="tinymce/ui/img/raster.gif" />'
);
});
suite.test('addTempAttr same attr twice', function () {
const ser1 = Serializer({});
const ser2 = Serializer({});
ser1.addTempAttr('data-x');
ser2.addTempAttr('data-x');
DOM.setHTML('test', '<p data-x="1" data-z="3">a</p>');
LegacyUnit.equal(ser1.serialize(DOM.get('test'), { getInner: 1 }), '<p data-z="3">a</p>');
LegacyUnit.equal(TrimHtml.trimExternal(ser1, '<p data-x="1" data-z="3">a</p>'), '<p data-z="3">a</p>');
LegacyUnit.equal(ser2.serialize(DOM.get('test'), { getInner: 1 }), '<p data-z="3">a</p>');
LegacyUnit.equal(TrimHtml.trimExternal(ser2, '<p data-x="1" data-z="3">a</p>'), '<p data-z="3">a</p>');
});
suite.test('Form elements (select)', function () {
const ser = Serializer({ fix_list_elements : true });
ser.setRules('form[method],label[for],input[type|name|value|checked|disabled|readonly|length|maxlength],select[multiple],option[value|selected]');
DOM.setHTML('test', '<select><option value="1">test1</option><option value="2" selected>test2</option></select>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<select><option value="1">test1</option><option value="2" selected="selected">test2</option></select>');
DOM.setHTML('test', '<select><option value="1">test1</option><option selected="1" value="2">test2</option></select>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<select><option value="1">test1</option><option value="2" selected="selected">test2</option></select>');
DOM.setHTML('test', '<select><option value="1">test1</option><option value="2" selected="true">test2</option></select>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<select><option value="1">test1</option><option value="2" selected="selected">test2</option></select>');
DOM.setHTML('test', '<select multiple></select>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<select multiple="multiple"></select>');
DOM.setHTML('test', '<select multiple="multiple"></select>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<select multiple="multiple"></select>');
DOM.setHTML('test', '<select multiple="1"></select>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<select multiple="multiple"></select>');
DOM.setHTML('test', '<select></select>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<select></select>');
});
suite.test('Form elements (general)', function () {
const ser = Serializer({ fix_list_elements : true });
ser.setRules(
'form[method],label[for],input[type|name|value|checked|disabled|readonly|length|maxlength],select[multiple],' +
'option[value|selected],textarea[name|disabled|readonly]'
);
DOM.setHTML('test', '<input type="text" />');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<input type="text" />');
DOM.setHTML('test', '<input type="text" value="text" length="128" maxlength="129" />');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<input type="text" value="text" length="128" maxlength="129" />');
DOM.setHTML('test', '<form method="post"><input type="hidden" name="method" value="get" /></form>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<form method="post"><input type="hidden" name="method" value="get" /></form>');
DOM.setHTML('test', '<label for="test">label</label>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<label for="test">label</label>');
DOM.setHTML('test', '<input type="checkbox" value="test" /><input type="button" /><textarea></textarea>');
// Edge will add an empty input value so remove that to normalize test since it doesn't break anything
LegacyUnit.equal(
ser.serialize(DOM.get('test')).replace(/ value=""/g, ''),
'<input type="checkbox" value="test" /><input type="button" /><textarea></textarea>'
);
});
suite.test('Script whitespace in beginning/end and cdata', function () {
const ser = Serializer({ fix_list_elements : true });
ser.setRules('script[type|language|src]');
DOM.setHTML('test', '<script>\n\n<![CDATA[\n\n1 < 2;\n\n]]>\n\n</s' + 'cript>');
LegacyUnit.equal(ser.serialize(DOM.get('test')).replace(/\r/g, ''), '<script>\n\n<![CDATA[\n\n1 < 2;\n\n]]>\n\n</script>');
});
suite.test('allow_unsafe_link_target (default)', function () {
const ser = Serializer({ });
DOM.setHTML('test', '<a href="a" target="_blank">a</a><a href="b" target="_blank">b</a>');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<a href="a" target="_blank" rel="noopener">a</a><a href="b" target="_blank" rel="noopener">b</a>'
);
DOM.setHTML('test', '<a href="a" rel="lightbox" target="_blank">a</a><a href="b" rel="lightbox" target="_blank">b</a>');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<a href="a" target="_blank" rel="lightbox noopener">a</a><a href="b" target="_blank" rel="lightbox noopener">b</a>'
);
DOM.setHTML('test', '<a href="a" rel="lightbox x" target="_blank">a</a><a href="b" rel="lightbox x" target="_blank">b</a>');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<a href="a" target="_blank" rel="lightbox noopener x">a</a><a href="b" target="_blank" rel="lightbox noopener x">b</a>'
);
DOM.setHTML('test', '<a href="a" rel="noopener a" target="_blank">a</a>');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<a href="a" target="_blank" rel="noopener a">a</a>'
);
DOM.setHTML('test', '<a href="a" rel="a noopener b" target="_blank">a</a>');
LegacyUnit.equal(
ser.serialize(DOM.get('test'), { getInner: true }),
'<a href="a" target="_blank" rel="a noopener b">a</a>'
);
});
suite.test('Script with line comment and html comment with element_format: xhtml', function () {
const ser = Serializer({ fix_list_elements : true, element_format: 'xhtml' });
ser.setRules('script[type|language|src]');
DOM.setHTML('test', '<script>// <!--\nvar hi = "hello";\n// --></s' + 'cript>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<script>// <![CDATA[\nvar hi = \"hello\";\n// ]]></s' + 'cript>');
});
suite.test('Script with block comment around html comment', function () {
const ser = Serializer({ fix_list_elements : true });
ser.setRules('script[type|language|src]');
DOM.setHTML('test', '<script>/* <!-- */\nvar hi = "hello";\n/*-->*/</s' + 'cript>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<script>/* <!-- */\nvar hi = \"hello\";\n/*-->*/</script>');
});
suite.test('Script with src attr', function () {
const ser = Serializer({ fix_list_elements : true });
ser.setRules('script[type|language|src]');
DOM.setHTML('test', '<script src="test.js" data-mce-src="test.js"></s' + 'cript>');
LegacyUnit.equal(ser.serialize(DOM.get('test')), '<s' + 'cript src="test.js"></s' + 'cript>');
});
suite.test('Style with cdata', function () {
const ser = Serializer({ fix_list_elements : true, valid_children: '+body[style]' });
ser.setRules('style');
DOM.setHTML('test', '<style>\r\n<![CDATA[\r\n body { background:#fff }]]></style>');
LegacyUnit.equal(ser.serialize(DOM.get('test')).replace(/\r/g, ''), '<style>\n<![CDATA[\n body { background:#fff }]]></style>');
});
