ignore-html-token.html (5568B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML Templates: In body insertion mode: parser should ignore HTML token</title> 5 <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> 6 <meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> 7 <meta name="assert" content="If parser is in 'in body' insertion mode and meets HTML token it should be ignored"> 8 <link rel="help" href="http://www.w3.org/TR/2013/WD-html-templates-20130214/#in-body-addition"> 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 /* 18 * According to http://www.w3.org/TR/2013/WD-html-templates-20130214/#template-contents-insertion-mode 19 * when parser is in "template content" mode and meets <html> tag it should be switched to 20 * "in body" insertion mode. 21 * According to https://html.spec.whatwg.org/multipage/#parsing-main-inbody 22 * this token (HTML) should be ignored 23 */ 24 25 test(function() { 26 var doc = newHTMLDocument(); 27 var template = doc.createElement('template'); 28 29 template.innerHTML = '<html><body></body></html>'; 30 31 doc.body.appendChild(template); 32 33 assert_equals(template.content.childNodes.length, 0, 34 'Template cannot contain HTML element'); 35 36 }, 'Ignore HTML token. Test HTML element assigned to template innerHTML'); 37 38 39 test(function() { 40 var doc = newHTMLDocument(); 41 var template = doc.createElement('template'); 42 43 template.innerHTML = '<div id="div1">Some text</div><html><body></body></html>'; 44 45 doc.body.appendChild(template); 46 47 assert_equals(template.content.childNodes.length, 1, 48 'Template cannot contain HTML element'); 49 assert_not_equals(template.content.querySelector('#div1'), null, 50 'Template should contain valid element'); 51 52 }, 'Ignore HTML token.' 53 + 'Test HTML element and some valid element before it, assigned to template innerHTML'); 54 55 56 test(function() { 57 var doc = newHTMLDocument(); 58 var template = doc.createElement('template'); 59 60 template.innerHTML = '<html><body></body></html><div id="div1">Some text</div>'; 61 62 doc.body.appendChild(template); 63 64 assert_equals(template.content.childNodes.length, 1, 65 'Template cannot contain HTML element'); 66 assert_not_equals(template.content.querySelector('#div1'), null, 67 'Template should contain valid element'); 68 69 }, 'Ignore HTML token. ' 70 + 'Test HEAD element and some valid element after it, assigned to template innerHTML'); 71 72 73 test(function() { 74 var doc = newHTMLDocument(); 75 var template = doc.createElement('template'); 76 77 template.innerHTML = '<template id="t2"><html><body></body></html></template>'; 78 79 doc.body.appendChild(template); 80 81 assert_equals(template.content.childNodes.length, 1, 82 'Template should contain nested template'); 83 assert_not_equals(template.content.querySelector('#t2'), null, 84 'Template should contain nested element'); 85 86 var nestedTemplate = template.content.querySelector('#t2'); 87 88 assert_equals(nestedTemplate.content.childNodes.length, 0, 89 'Template cannot contain HTML element'); 90 91 }, 'Ignore HTML token. ' 92 + 'Test HTML tag inside template tag assigned to another template\'s innerHTML'); 93 94 95 test(function() { 96 var doc = newHTMLDocument(); 97 var template = doc.createElement('template'); 98 99 template.innerHTML = '<html><div id="div1">Some text</div></html>'; 100 101 doc.body.appendChild(template); 102 103 assert_equals(template.content.childNodes.length, 1, 104 'Template cannot contain HTML element'); 105 assert_not_equals(template.content.querySelector('#div1'), null, 106 'Template should contain a valid element'); 107 108 }, 'Ignore HTML token. Test some valid element inside HTML element'); 109 110 111 test(function() { 112 var doc = newHTMLDocument(); 113 var template = doc.createElement('template'); 114 115 template.innerHTML = '<html><body><div id="div1">Some text</div><body></html>'; 116 117 doc.body.appendChild(template); 118 119 assert_equals(template.content.childNodes.length, 1, 120 'Template cannot contain HTML element'); 121 assert_not_equals(template.content.querySelector('#div1'), null, 122 'Template should contain valid element'); 123 124 }, 'Ignore HTML token. Test valid element inside HTML and BODY elements'); 125 126 127 test(function() { 128 var doc = newHTMLDocument(); 129 var template = doc.createElement('template'); 130 131 template.innerHTML = '<html><span id="span1">Span</span><body><div id="div1">Some text</div><body></html>'; 132 133 doc.body.appendChild(template); 134 135 assert_equals(template.content.childNodes.length, 2, 136 'Template cannot contain HTML element'); 137 assert_not_equals(template.content.querySelector('#div1'), null, 138 'Template should contain valid DIV element'); 139 140 assert_not_equals(template.content.querySelector('#span1'), null, 141 'Template should contain valid SPAN element'); 142 143 }, 'Ignore HTML token. Test valid element inside and between HTML and BODY elements'); 144 145 146 testInIFrame('/html/semantics/scripting-1/the-template-element/resources/template-contents-html.html', function(context) { 147 var doc = context.iframes[0].contentDocument; 148 149 var template = doc.body.querySelector('template'); 150 151 assert_equals(template.content.childNodes.length, 0, 152 'Template cannot contain HTML element'); 153 154 }, 'Ignore HTML token. Test loading a HTML file with HTML tag inside template'); 155 156 </script> 157 </body> 158 </html>