View Javadoc
1   /*
2    * Copyright (c) 2002-2025 Gargoyle Software Inc.
3    *
4    * Licensed under the Apache License, Version 2.0 (the "License");
5    * you may not use this file except in compliance with the License.
6    * You may obtain a copy of the License at
7    * https://www.apache.org/licenses/LICENSE-2.0
8    *
9    * Unless required by applicable law or agreed to in writing, software
10   * distributed under the License is distributed on an "AS IS" BASIS,
11   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12   * See the License for the specific language governing permissions and
13   * limitations under the License.
14   */
15  package org.htmlunit.javascript.host.html;
16  
17  import org.htmlunit.WebDriverTestCase;
18  import org.htmlunit.junit.BrowserRunner;
19  import org.htmlunit.junit.annotation.Alerts;
20  import org.junit.Test;
21  import org.junit.runner.RunWith;
22  
23  /**
24   * Tests for {@link HTMLTemplateElement}.
25   *
26   * @author Ronald Brill
27   */
28  @RunWith(BrowserRunner.class)
29  public class HTMLTemplateElementTest extends WebDriverTestCase {
30  
31      /**
32       * @throws Exception if the test fails
33       */
34      @Test
35      @Alerts("false")
36      public void prototype() throws Exception {
37          final String html = DOCTYPE_HTML
38              + "<html><body>\n"
39              + "<script>\n"
40              + LOG_TITLE_FUNCTION
41              + "  try {\n"
42              + "    log(HTMLTemplateElement.prototype == null);\n"
43              + "  } catch(e) { logEx(e); }\n"
44              + "</script>\n"
45              + "</body></html>";
46  
47          loadPageVerifyTitle2(html);
48      }
49  
50      /**
51       * @throws Exception if the test fails
52       */
53      @Test
54      @Alerts("true")
55      public void contentCheck() throws Exception {
56          final String html = DOCTYPE_HTML
57              + "<html>\n"
58              + "  <head>\n"
59              + "    <script>\n"
60              + LOG_TITLE_FUNCTION
61              + "      function test() {\n"
62              + "        try {\n"
63              + "          var template = document.createElement('template');\n"
64              + "          log('content' in template);\n"
65              + "        } catch(e) { logEx(e); }\n"
66              + "      }\n"
67              + "    </script>\n"
68              + "  </head>\n"
69              + "  <body onload='test()'>\n"
70              + "  </body>\n"
71              + "</html>";
72          loadPageVerifyTitle2(html);
73      }
74  
75      /**
76       * @throws Exception if the test fails
77       */
78      @Test
79      @Alerts({"[object DocumentFragment]", "0-0",
80               "[object DocumentFragment]", "0-0",
81               "[object DocumentFragment]", "0-1",
82               "[object DocumentFragment]", "0-2"})
83      public void content() throws Exception {
84          final String html = DOCTYPE_HTML
85              + "<html>\n"
86              + "  <head>\n"
87              + "    <script>\n"
88              + LOG_TITLE_FUNCTION
89              + "      function test() {\n"
90              + "        var template = document.createElement('template');\n"
91              + "        if (!('content' in template)) { log('not available'); return }\n"
92              + "        log(template.content);\n"
93              + "        log(template.childNodes.length + '-' + template.content.childNodes.length);\n"
94  
95              + "        template = document.getElementById('tEmpty');\n"
96              + "        log(template.content);\n"
97              + "        log(template.childNodes.length + '-' + template.content.childNodes.length);\n"
98  
99              + "        template = document.getElementById('tText');\n"
100             + "        log(template.content);\n"
101             + "        log(template.childNodes.length + '-' + template.content.childNodes.length);\n"
102 
103             + "        template = document.getElementById('tDiv');\n"
104             + "        log(template.content);\n"
105             + "        log(template.childNodes.length + '-' + template.content.childNodes.length);\n"
106             + "      }\n"
107             + "    </script>\n"
108             + "  </head>\n"
109             + "  <body onload='test()'>\n"
110             + "    <template id='tEmpty'></template>\n"
111             + "    <template id='tText'>HtmlUnit</template>\n"
112             + "    <template id='tDiv'><div>HtmlUnit</div><div>is great</div></template>\n"
113             + "  </body>\n"
114             + "</html>";
115 
116         loadPageVerifyTitle2(html);
117     }
118 
119     /**
120      * @throws Exception if the test fails
121      */
122     @Test
123     @Alerts({"true", "true", "true", "true"})
124     public void contentSame() throws Exception {
125         final String html = DOCTYPE_HTML
126             + "<html>\n"
127             + "  <head>\n"
128             + "    <script>\n"
129             + LOG_TITLE_FUNCTION
130             + "      function test() {\n"
131             + "        var template = document.createElement('template');\n"
132             + "        log(template.content === template.content);\n"
133 
134             + "        template = document.getElementById('tEmpty');\n"
135             + "        log(template.content === template.content);\n"
136 
137             + "        template = document.getElementById('tText');\n"
138             + "        log(template.content === template.content);\n"
139 
140             + "        template = document.getElementById('tDiv');\n"
141             + "        log(template.content === template.content);\n"
142             + "      }\n"
143             + "    </script>\n"
144             + "  </head>\n"
145             + "  <body onload='test()'>\n"
146             + "    <template id='tEmpty'></template>\n"
147             + "    <template id='tText'>HtmlUnit</template>\n"
148             + "    <template id='tDiv'><div>HtmlUnit</div><div>is great</div></template>\n"
149             + "  </body>\n"
150             + "</html>";
151 
152         loadPageVerifyTitle2(html);
153     }
154 
155     /**
156      * @throws Exception if the test fails
157      */
158     @Test
159     @Alerts({"[object DocumentFragment]", "0-0", "1-0"})
160     public void appendChild() throws Exception {
161         final String html = DOCTYPE_HTML
162             + "<html>\n"
163             + "  <head>\n"
164             + "    <script>\n"
165             + LOG_TITLE_FUNCTION
166             + "      function test() {\n"
167             + "        var template = document.createElement('template');\n"
168             + "        if (!('content' in template)) { log('not available'); return }\n"
169 
170             + "        template = document.getElementById('tester');\n"
171             + "        log(template.content);\n"
172             + "        log(template.childNodes.length + '-' + template.content.childNodes.length);\n"
173 
174             + "        var div = document.createElement('div');\n"
175             + "        template.appendChild(div);\n"
176             + "        log(template.childNodes.length + '-' + template.content.childNodes.length);\n"
177             + "      }\n"
178             + "    </script>\n"
179             + "  </head>\n"
180             + "  <body onload='test()'>\n"
181             + "    <template id='tester'></template>\n"
182             + "  </body>\n"
183             + "</html>";
184 
185         loadPageVerifyTitle2(html);
186     }
187 
188     /**
189      * @throws Exception if the test fails
190      */
191     @Test
192     @Alerts({"", "", "<p></p>", "", "HtmlUnit", "<div>HtmlUnit</div><div>is great</div>"})
193     public void innerHTML() throws Exception {
194         final String html = DOCTYPE_HTML
195             + "<html>\n"
196             + "  <head>\n"
197             + "    <script>\n"
198             + LOG_TITLE_FUNCTION
199             + "      function test() {\n"
200             + "        var template = document.createElement('template');\n"
201             + "        log(template.innerHTML);\n"
202 
203             + "        var div = document.createElement('div');\n"
204             + "        template.appendChild(div);\n"
205             + "        log(template.innerHTML);\n"
206 
207             + "        var p = document.createElement('p');\n"
208             + "        if ('content' in template) {\n"
209             + "          template.content.appendChild(p);\n"
210             + "          log(template.innerHTML);\n"
211             + "        }\n"
212 
213             + "        template = document.getElementById('tEmpty');\n"
214             + "        log(template.innerHTML);\n"
215 
216             + "        template = document.getElementById('tText');\n"
217             + "        log(template.innerHTML);\n"
218 
219             + "        template = document.getElementById('tDiv');\n"
220             + "        log(template.innerHTML);\n"
221             + "      }\n"
222             + "    </script>\n"
223             + "  </head>\n"
224             + "  <body onload='test()'>\n"
225             + "    <template id='tEmpty'></template>\n"
226             + "    <template id='tText'>HtmlUnit</template>\n"
227             + "    <template id='tDiv'><div>HtmlUnit</div><div>is great</div></template>\n"
228             + "  </body>\n"
229             + "</html>";
230 
231         loadPageVerifyTitle2(html);
232     }
233 
234 
235     /**
236      * @throws Exception if the test fails
237      */
238     @Test
239     @Alerts({"<template></template>", "<template>HtmlUnit</template>",
240              "<template><div>HtmlUnit</div><div>is great</div></template>"})
241     public void innerHTMLIncludingTemplate() throws Exception {
242         final String html = DOCTYPE_HTML
243             + "<html>\n"
244             + "  <head>\n"
245             + "    <script>\n"
246             + LOG_TITLE_FUNCTION
247             + "      function test() {\n"
248             + "        template = document.getElementById('tEmpty');\n"
249             + "        log(template.innerHTML);\n"
250 
251             + "        template = document.getElementById('tText');\n"
252             + "        log(template.innerHTML);\n"
253 
254             + "        template = document.getElementById('tDiv');\n"
255             + "        log(template.innerHTML);\n"
256             + "      }\n"
257             + "    </script>\n"
258             + "  </head>\n"
259             + "  <body onload='test()'>\n"
260             + "    <div id='tEmpty'><template></template></div>\n"
261             + "    <div id='tText'><template>HtmlUnit</template></div>\n"
262             + "    <div id='tDiv'><template><div>HtmlUnit</div><div>is great</div></template></div>\n"
263             + "  </body>\n"
264             + "</html>";
265 
266         loadPageVerifyTitle2(html);
267     }
268 
269     /**
270      * @throws Exception if the test fails
271      */
272     @Test
273     @Alerts({"<template></template>", "<template></template>",
274              "<template><p></p></template>", "<template id=\"tEmpty\"></template>",
275              "<template id=\"tText\">HtmlUnit</template>",
276              "<template id=\"tDiv\"><div>HtmlUnit</div><div>is great</div></template>"})
277     public void outerHTML() throws Exception {
278         final String html = DOCTYPE_HTML
279             + "<html>\n"
280             + "  <head>\n"
281             + "    <script>\n"
282             + LOG_TITLE_FUNCTION
283             + "      function test() {\n"
284             + "        var template = document.createElement('template');\n"
285             + "        log(template.outerHTML);\n"
286 
287             + "        var div = document.createElement('div');\n"
288             + "        template.appendChild(div);\n"
289             + "        log(template.outerHTML);\n"
290 
291             + "        var p = document.createElement('p');\n"
292             + "        if ('content' in template) {\n"
293             + "          template.content.appendChild(p);\n"
294             + "          log(template.outerHTML);\n"
295             + "        }\n"
296 
297             + "        template = document.getElementById('tEmpty');\n"
298             + "        log(template.outerHTML);\n"
299 
300             + "        template = document.getElementById('tText');\n"
301             + "        log(template.outerHTML);\n"
302 
303             + "        template = document.getElementById('tDiv');\n"
304             + "        log(template.outerHTML);\n"
305             + "      }\n"
306             + "    </script>\n"
307             + "  </head>\n"
308             + "  <body onload='test()'>\n"
309             + "    <template id='tEmpty'></template>\n"
310             + "    <template id='tText'>HtmlUnit</template>\n"
311             + "    <template id='tDiv'><div>HtmlUnit</div><div>is great</div></template>\n"
312             + "  </body>\n"
313             + "</html>";
314 
315         loadPageVerifyTitle2(html);
316     }
317 
318     /**
319      * @throws Exception if the test fails
320      */
321     @Test
322     @Alerts({"myTemplate", "null"})
323     public void getElementById() throws Exception {
324         final String html = DOCTYPE_HTML
325             + "<html>\n"
326             + "  <head>\n"
327             + "    <script>\n"
328             + LOG_TITLE_FUNCTION
329             + "      function test() {\n"
330             + "        var template = document.getElementById('myTemplate');\n"
331             + "        log(template.id);\n"
332 
333             + "        outer = document.getElementById('outerDiv');\n"
334             + "        log(outer);\n"
335             + "      }\n"
336             + "    </script>\n"
337             + "  </head>\n"
338             + "  <body onload='test()'>\n"
339             + "    <template id='myTemplate'>\n"
340             + "      <div id='outerDiv'>HtmlUnit <div id='innerDiv'>is great</div></div>\n"
341             + "    </template>\n"
342             + "  </body>\n"
343             + "</html>";
344 
345         loadPageVerifyTitle2(html);
346     }
347 
348     /**
349      * @throws Exception if the test fails
350      */
351     @Test
352     @Alerts({"myTemplate", "0"})
353     public void getElementsByTagName() throws Exception {
354         final String html = DOCTYPE_HTML
355             + "<html>\n"
356             + "  <head>\n"
357             + "    <script>\n"
358             + LOG_TITLE_FUNCTION
359             + "      function test() {\n"
360             + "        var template = document.getElementById('myTemplate');\n"
361             + "        log(template.id);\n"
362 
363             + "        var children = template.getElementsByTagName('div');"
364             + "        log(children.length);\n"
365             + "      }\n"
366             + "    </script>\n"
367             + "  </head>\n"
368             + "  <body onload='test()'>\n"
369             + "    <template id='myTemplate'>\n"
370             + "      <div id='outerDiv'>HtmlUnit <div id='innerDiv'>is great</div></div>\n"
371             + "    </template>\n"
372             + "  </body>\n"
373             + "</html>";
374 
375         loadPageVerifyTitle2(html);
376     }
377 
378     /**
379      * @throws Exception if the test fails
380      */
381     @Test
382     @Alerts({"myTemplate", "0"})
383     public void childNodes() throws Exception {
384         final String html = DOCTYPE_HTML
385             + "<html>\n"
386             + "  <head>\n"
387             + "    <script>\n"
388             + LOG_TITLE_FUNCTION
389             + "      function test() {\n"
390             + "        var template = document.getElementById('myTemplate');\n"
391             + "        log(template.id);\n"
392 
393             + "        log(template.childNodes.length);\n"
394             + "      }\n"
395             + "    </script>\n"
396             + "  </head>\n"
397             + "  <body onload='test()'>\n"
398             + "    <template id='myTemplate'>\n"
399             + "      <div id='outerDiv'>HtmlUnit <div id='innerDiv'>is great</div></div>\n"
400             + "    </template>\n"
401             + "  </body>\n"
402             + "</html>";
403 
404         loadPageVerifyTitle2(html);
405     }
406 }