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