innerhtml.html (3814B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML Templates: innerHTML of template element replaces all referenced by the content attribute</title> 5 <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> 6 <meta name="author" title="Aleksei Yu. Semenov" href="a.semenov@unipro.ru"> 7 <meta name="assert" content="innerHTML of template element replaces all referenced by the content attribute"> 8 <link rel="help" href="http://www.w3.org/TR/2013/WD-html-templates-20130214/#innerhtml-on-templates"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src='/html/resources/common.js'></script> 12 </head> 13 <body> 14 <div id="log"></div> 15 <script type="text/javascript"> 16 17 test(function () { 18 var doc = newHTMLDocument(); 19 var template = doc.createElement('template'); 20 21 var div1 = doc.createElement('div'); 22 div1.setAttribute('id', 'div1'); 23 template.content.appendChild(div1); 24 25 assert_not_equals(template.content.querySelector('#div1'), null, 26 'Element should present in template content'); 27 28 template.innerHTML = '<div id="div2"></div>'; 29 30 assert_equals(template.content.querySelector('#div1'), null, 31 'Template content should be replaced by innerHTML'); 32 assert_not_equals(template.content.querySelector('#div2'), null, 33 'Element should present in template content'); 34 35 }, 'innerHTML of template element replaces all referenced by the content attribute'); 36 37 38 test(function () { 39 var doc = newHTMLDocument(); 40 var template = doc.createElement('template'); 41 42 var div1 = doc.createElement('div'); 43 div1.setAttribute('id', 'div1'); 44 template.content.appendChild(div1); 45 46 assert_not_equals(template.content.querySelector('#div1'), null, 47 'Element should present in template content'); 48 49 template.innerHTML = ''; 50 51 assert_false(template.content.hasChildNodes(), 52 'Template content should be removed by innerHTML'); 53 54 }, 'innerHTML of template element replaces all referenced by the content attribute. ' 55 + 'Test empty HTML string'); 56 57 58 test(function () { 59 var doc = newHTMLDocument(); 60 var template = doc.createElement('template'); 61 var nestedTemplate = doc.createElement('template'); 62 63 template.content.appendChild(nestedTemplate); 64 65 var div1 = doc.createElement('div'); 66 div1.setAttribute('id', 'div1'); 67 nestedTemplate.content.appendChild(div1); 68 69 assert_not_equals(nestedTemplate.content.querySelector('#div1'), null, 70 'Element should present in template content'); 71 72 nestedTemplate.innerHTML = '<div id="div2"></div>'; 73 74 assert_equals(nestedTemplate.content.querySelector('#div1'), null, 75 'Template content should be replaced by innerHTML'); 76 assert_not_equals(nestedTemplate.content.querySelector('#div2'), null, 77 'Element should present in template content'); 78 79 }, 'innerHTML of template element replaces all referenced by the content attribute. ' 80 + 'Test nested template'); 81 82 83 testInIFrame('../resources/template-contents.html', function(context) { 84 var doc = context.iframes[0].contentDocument; 85 86 var template = doc.querySelector('template'); 87 assert_not_equals(template.content.querySelector('div'), null, 88 'Div element should present in template content'); 89 90 template.innerHTML = '<span>span internals</span>'; 91 92 assert_equals(template.content.querySelector('div'), null, 93 'div element should be replaced by span in template content'); 94 95 assert_not_equals(template.content.querySelector('span'), null, 96 'span element should present in template content'); 97 98 99 }, 'innerHTML of template element replaces all referenced by the content attribute. ' 100 + 'Test loading of HTML document from a file'); 101 102 103 </script> 104 </body> 105 </html>