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.htmlunit.junit.annotation.HtmlUnitNYI;
20  import org.junit.jupiter.api.Test;
21  
22  /**
23   * Tests for {@link HTMLTableCellElement}.
24   *
25   * @author Daniel Gredler
26   * @author Ahmed Ashour
27   * @author Ronald Brill
28   * @author Frank Danek
29   */
30  public class HTMLTableCellElementTest extends WebDriverTestCase {
31  
32      /**
33       * @throws Exception if an error occurs
34       */
35      @Test
36      @Alerts({"left", "right", "3", "center", "8", "foo"})
37      public void align() throws Exception {
38          final String html = DOCTYPE_HTML
39              + "<html><body><table>\n"
40              + "  <tr>\n"
41              + "    <td id='td1' align='left'>a</td>\n"
42              + "    <td id='td2' align='right'>b</td>\n"
43              + "    <td id='td3' align='3'>c</td>\n"
44              + "  </tr>\n"
45              + "</table>\n"
46              + "<script>\n"
47              + LOG_TITLE_FUNCTION
48              + "  function set(e, value) {\n"
49              + "    try {\n"
50              + "      e.align = value;\n"
51              + "    } catch(e) { logEx(e); }\n"
52              + "  }\n"
53              + "  var td1 = document.getElementById('td1');\n"
54              + "  var td2 = document.getElementById('td2');\n"
55              + "  var td3 = document.getElementById('td3');\n"
56              + "  log(td1.align);\n"
57              + "  log(td2.align);\n"
58              + "  log(td3.align);\n"
59              + "  set(td1, 'center');\n"
60              + "  set(td2, '8');\n"
61              + "  set(td3, 'foo');\n"
62              + "  log(td1.align);\n"
63              + "  log(td2.align);\n"
64              + "  log(td3.align);\n"
65              + "</script>\n"
66              + "</body></html>";
67  
68          loadPageVerifyTitle2(html);
69      }
70  
71      /**
72       * @throws Exception if an error occurs
73       */
74      @Test
75      @Alerts({"p", "po", "", "u", "8", "U8"})
76      public void ch() throws Exception {
77          final String html = DOCTYPE_HTML
78              + "<html><body><table>\n"
79              + "  <tr>\n"
80              + "    <td id='td1' char='p'>a</td>\n"
81              + "    <td id='td2' char='po'>b</td>\n"
82              + "    <td id='td3'>c</td>\n"
83              + "  </tr>\n"
84              + "</table>\n"
85              + "<script>\n"
86              + LOG_TITLE_FUNCTION
87              + "  var td1 = document.getElementById('td1');\n"
88              + "  var td2 = document.getElementById('td2');\n"
89              + "  var td3 = document.getElementById('td3');\n"
90              + "  log(td1.ch);\n"
91              + "  log(td2.ch);\n"
92              + "  log(td3.ch);\n"
93              + "  td1.ch = 'u';\n"
94              + "  td2.ch = '8';\n"
95              + "  td3.ch = 'U8';\n"
96              + "  log(td1.ch);\n"
97              + "  log(td2.ch);\n"
98              + "  log(td3.ch);\n"
99              + "</script>\n"
100             + "</body></html>";
101 
102         loadPageVerifyTitle2(html);
103     }
104 
105     /**
106      * @throws Exception if an error occurs
107      */
108     @Test
109     @Alerts({"0", "4", "", "5.2", "-3", "abc"})
110     public void chOff() throws Exception {
111         final String html = DOCTYPE_HTML
112             + "<html><body><table>\n"
113             + "  <tr>\n"
114             + "    <td id='td1' charoff='0'>a</td>\n"
115             + "    <td id='td2' charoff='4'>b</td>\n"
116             + "    <td id='td3'>c</td>\n"
117             + "  </tr>\n"
118             + "</table>\n"
119             + "<script>\n"
120             + LOG_TITLE_FUNCTION
121             + "  var td1 = document.getElementById('td1');\n"
122             + "  var td2 = document.getElementById('td2');\n"
123             + "  var td3 = document.getElementById('td3');\n"
124             + "  log(td1.chOff);\n"
125             + "  log(td2.chOff);\n"
126             + "  log(td3.chOff);\n"
127             + "  td1.chOff = '5.2';\n"
128             + "  td2.chOff = '-3';\n"
129             + "  td3.chOff = 'abc';\n"
130             + "  log(td1.chOff);\n"
131             + "  log(td2.chOff);\n"
132             + "  log(td3.chOff);\n"
133             + "</script>\n"
134             + "</body></html>";
135 
136         loadPageVerifyTitle2(html);
137     }
138 
139     /**
140      * @throws Exception if an error occurs
141      */
142     @Test
143     @Alerts({"top", "baseline", "3", "middle", "8", "BOTtom"})
144     public void vAlign() throws Exception {
145         final String html = DOCTYPE_HTML
146             + "<html><body><table>\n"
147             + "  <tr>\n"
148             + "    <td id='td1' valign='top'>a</td>\n"
149             + "    <td id='td2' valign='baseline'>b</td>\n"
150             + "    <td id='td3' valign='3'>c</td>\n"
151             + "  </tr>\n"
152             + "</table>\n"
153             + "<script>\n"
154             + LOG_TITLE_FUNCTION
155             + "  function set(e, value) {\n"
156             + "    try {\n"
157             + "      e.vAlign = value;\n"
158             + "    } catch(e) { logEx(e); }\n"
159             + "  }\n"
160             + "  var td1 = document.getElementById('td1');\n"
161             + "  var td2 = document.getElementById('td2');\n"
162             + "  var td3 = document.getElementById('td3');\n"
163             + "  log(td1.vAlign);\n"
164             + "  log(td2.vAlign);\n"
165             + "  log(td3.vAlign);\n"
166             + "  set(td1, 'middle');\n"
167             + "  set(td2, 8);\n"
168             + "  set(td3, 'BOTtom');\n"
169             + "  log(td1.vAlign);\n"
170             + "  log(td2.vAlign);\n"
171             + "  log(td3.vAlign);\n"
172             + "</script>\n"
173             + "</body></html>";
174 
175         loadPageVerifyTitle2(html);
176     }
177 
178     /**
179      * @throws Exception if an error occurs
180      */
181     @Test
182     @Alerts({"", "#0000aa", "x"})
183     public void bgColor() throws Exception {
184         final String html = DOCTYPE_HTML
185             + "<html>\n"
186             + "  <head>\n"
187             + "    <script>\n"
188             + LOG_TITLE_FUNCTION
189             + "      function test() {\n"
190             + "        var td = document.getElementById('td');\n"
191             + "        log(td.bgColor);\n"
192             + "        td.bgColor = '#0000aa';\n"
193             + "        log(td.bgColor);\n"
194             + "        td.bgColor = 'x';\n"
195             + "        log(td.bgColor);\n"
196             + "      }\n"
197             + "    </script>\n"
198             + "  </head>\n"
199             + "  <body onload='test()'>\n"
200             + "  <table><tr><td id='td'>a</td></tr></table>\n"
201             + "  </body>\n"
202             + "</html>";
203 
204         loadPageVerifyTitle2(html);
205     }
206 
207     /**
208      * @throws Exception if an error occurs
209      */
210     @Test
211     @Alerts({"false", "null", "true", "", "true", "", "true", "blah", "false", "null"})
212     public void noWrap() throws Exception {
213         final String html = DOCTYPE_HTML
214             + "<html>\n"
215             + "  <head>\n"
216             + "    <script>\n"
217             + LOG_TITLE_FUNCTION
218             + "      function test() {\n"
219             + "        var td = document.getElementById('td');\n"
220             + "        log(td.noWrap);\n"
221             + "        log(td.getAttribute('noWrap'));\n"
222             + "        td.noWrap = 'nowrap';\n"
223             + "        log(td.noWrap);\n"
224             + "        log(td.getAttribute('noWrap'));\n"
225             + "        td.noWrap = 'x';\n"
226             + "        log(td.noWrap);\n"
227             + "        log(td.getAttribute('noWrap'));\n"
228             + "        td.setAttribute('noWrap', 'blah');\n"
229             + "        log(td.noWrap);\n"
230             + "        log(td.getAttribute('noWrap'));\n"
231             + "        td.noWrap = '';\n"
232             + "        log(td.noWrap);\n"
233             + "        log(td.getAttribute('noWrap'));\n"
234             + "      }\n"
235             + "    </script>\n"
236             + "  </head>\n"
237             + "  <body onload='test()'>\n"
238             + "  <table><tr><td id='td'>a</td></tr></table>\n"
239             + "  </body>\n"
240             + "</html>";
241 
242         loadPageVerifyTitle2(html);
243     }
244 
245     /**
246      * @throws Exception if an error occurs
247      */
248     @Test
249     @Alerts({"", "blah", "3", ""})
250     public void abbr() throws Exception {
251         final String html = DOCTYPE_HTML
252             + "<html>\n"
253             + "  <head>\n"
254             + "    <script>\n"
255             + LOG_TITLE_FUNCTION
256             + "      function test() {\n"
257             + "        var td = document.getElementById('td');\n"
258             + "        log(td.abbr);\n"
259             + "        td.abbr = 'blah';\n"
260             + "        log(td.abbr);\n"
261             + "        td.abbr = 3;\n"
262             + "        log(td.abbr);\n"
263             + "        td.abbr = '';\n"
264             + "        log(td.abbr);\n"
265             + "      }\n"
266             + "    </script>\n"
267             + "  </head>\n"
268             + "  <body onload='test()'>\n"
269             + "  <table><tr><td id='td'>a</td></tr></table>\n"
270             + "  </body>\n"
271             + "</html>";
272 
273         loadPageVerifyTitle2(html);
274     }
275 
276     /**
277      * @throws Exception if an error occurs
278      */
279     @Test
280     @Alerts({"1", "3", "1", "2", "1", "5", "1", "2", "1"})
281     public void colSpan() throws Exception {
282         final String html = DOCTYPE_HTML
283             + "<html><body><table>\n"
284             + "  <tr>\n"
285             + "    <td id='td1'>a</td>\n"
286             + "    <td id='td2' colspan='3'>b</td>\n"
287             + "    <td id='td3' colspan='foo'>c</td>\n"
288             + "  </tr>\n"
289             + "</table>\n"
290             + "<script>\n"
291             + LOG_TITLE_FUNCTION
292             + "  function set(e, value) {\n"
293             + "    try {\n"
294             + "      e.colSpan = value;\n"
295             + "    } catch(e) { logEx(e); }\n"
296             + "  }\n"
297             + "  var td1 = document.getElementById('td1');\n"
298             + "  var td2 = document.getElementById('td2');\n"
299             + "  var td3 = document.getElementById('td3');\n"
300             + "  log(td1.colSpan);\n"
301             + "  log(td2.colSpan);\n"
302             + "  log(td3.colSpan);\n"
303             + "  set(td1, '2');\n"
304             + "  set(td2, 'blah');\n"
305             + "  set(td3, 5);\n"
306             + "  log(td1.colSpan);\n"
307             + "  log(td2.colSpan);\n"
308             + "  log(td3.colSpan);\n"
309             + "  set(td1, -1);\n"
310             + "  set(td2, 2.2);\n"
311             + "  set(td3, 0);\n"
312             + "  log(td1.colSpan);\n"
313             + "  log(td2.colSpan);\n"
314             + "  log(td3.colSpan);\n"
315             + "</script>\n"
316             + "</body></html>";
317 
318         loadPageVerifyTitle2(html);
319     }
320 
321     /**
322      * @throws Exception if an error occurs
323      */
324     @Test
325     @Alerts("3")
326     public void colSpanLineBreaks() throws Exception {
327         final String html = DOCTYPE_HTML
328             + "<html><body><table>\n"
329             + "  <tr>\n"
330             + "    <td id='td1' colspan='\r3\t\n  '>b</td>\n"
331             + "  </tr>\n"
332             + "</table>\n"
333             + "<script>\n"
334             + LOG_TITLE_FUNCTION_NORMALIZE
335             + "  var td1 = document.getElementById('td1');\n"
336             + "  log(td1.colSpan);\n"
337             + "</script>\n"
338             + "</body></html>";
339 
340         loadPageVerifyTitle2(html);
341     }
342 
343     /**
344      * @throws Exception if an error occurs
345      */
346     @Test
347     @Alerts({"1", "1", "3", "3", "3"})
348     public void colSpanInvalid() throws Exception {
349         final String html = DOCTYPE_HTML
350             + "<html><body><table>\n"
351             + "  <tr>\n"
352             + "    <td id='td1' colspan='-1'>b</td>\n"
353             + "    <td id='td2' colspan='0'>b</td>\n"
354             + "    <td id='td3' colspan='3.14'>b</td>\n"
355             + "    <td id='td4' colspan='3.5'>b</td>\n"
356             + "    <td id='td5' colspan='3.7'>b</td>\n"
357             + "  </tr>\n"
358             + "</table>\n"
359             + "<script>\n"
360             + LOG_TITLE_FUNCTION_NORMALIZE
361             + "  var td1 = document.getElementById('td1');\n"
362             + "  var td2 = document.getElementById('td2');\n"
363             + "  var td3 = document.getElementById('td3');\n"
364             + "  var td4 = document.getElementById('td4');\n"
365             + "  var td5 = document.getElementById('td5');\n"
366             + "  log(td1.colSpan);\n"
367             + "  log(td2.colSpan);\n"
368             + "  log(td3.colSpan);\n"
369             + "  log(td4.colSpan);\n"
370             + "  log(td5.colSpan);\n"
371             + "</script>\n"
372             + "</body></html>";
373 
374         loadPageVerifyTitle2(html);
375     }
376 
377     /**
378      * @throws Exception if an error occurs
379      */
380     @Test
381     @Alerts({"999", "1000", "1000"})
382     public void colSpanLarge() throws Exception {
383         final String html = DOCTYPE_HTML
384             + "<html><body><table>\n"
385             + "  <tr>\n"
386             + "    <td id='td1' colspan='999'>b</td>\n"
387             + "    <td id='td2' colspan='1000'>b</td>\n"
388             + "    <td id='td3' colspan='1001'>b</td>\n"
389             + "  </tr>\n"
390             + "</table>\n"
391             + "<script>\n"
392             + LOG_TITLE_FUNCTION_NORMALIZE
393             + "  var td1 = document.getElementById('td1');\n"
394             + "  var td2 = document.getElementById('td2');\n"
395             + "  var td3 = document.getElementById('td3');\n"
396             + "  log(td1.colSpan);\n"
397             + "  log(td2.colSpan);\n"
398             + "  log(td3.colSpan);\n"
399             + "</script>\n"
400             + "</body></html>";
401 
402         loadPageVerifyTitle2(html);
403     }
404 
405     /**
406      * @throws Exception if an error occurs
407      */
408     @Test
409     @Alerts({"1", "3", "1", "2", "0", "5", "1", "2", "0"})
410     public void rowSpan() throws Exception {
411         final String html = DOCTYPE_HTML
412             + "<html><body><table>\n"
413             + "  <tr>\n"
414             + "    <td id='td1'>a</td>\n"
415             + "    <td id='td2' rowspan='3'>b</td>\n"
416             + "    <td id='td3' rowspan='foo'>c</td>\n"
417             + "  </tr>\n"
418             + "  <tr><td>a</td><td>b</td><td>c</td></tr>\n"
419             + "  <tr><td>a</td><td>b</td><td>c</td></tr>\n"
420             + "  <tr><td>a</td><td>b</td><td>c</td></tr>\n"
421             + "  <tr><td>a</td><td>b</td><td>c</td></tr>\n"
422             + "  <tr><td>a</td><td>b</td><td>c</td></tr>\n"
423             + "</table>\n"
424             + "<script>\n"
425             + LOG_TITLE_FUNCTION
426             + "  function set(e, value) {\n"
427             + "    try {\n"
428             + "      e.rowSpan = value;\n"
429             + "    } catch(e) { logEx(e); }\n"
430             + "  }\n"
431             + "  var td1 = document.getElementById('td1');\n"
432             + "  var td2 = document.getElementById('td2');\n"
433             + "  var td3 = document.getElementById('td3');\n"
434             + "  log(td1.rowSpan);\n"
435             + "  log(td2.rowSpan);\n"
436             + "  log(td3.rowSpan);\n"
437             + "  set(td1, '2');\n"
438             + "  set(td2, 'blah');\n"
439             + "  set(td3, 5);\n"
440             + "  log(td1.rowSpan);\n"
441             + "  log(td2.rowSpan);\n"
442             + "  log(td3.rowSpan);\n"
443             + "  set(td1, -1);\n"
444             + "  set(td2, 2.2);\n"
445             + "  set(td3, 0);\n"
446             + "  log(td1.rowSpan);\n"
447             + "  log(td2.rowSpan);\n"
448             + "  log(td3.rowSpan);\n"
449             + "</script>\n"
450             + "</body></html>";
451 
452         loadPageVerifyTitle2(html);
453     }
454 
455     /**
456      * @throws Exception if an error occurs
457      */
458     @Test
459     @Alerts("3")
460     public void rowSpanLineBreaks() throws Exception {
461         final String html = DOCTYPE_HTML
462             + "<html><body><table>\n"
463             + "  <tr>\n"
464             + "    <td id='td1' rowspan='\r3\t\n  '>a</td>\n"
465             + "  </tr>\n"
466             + "</table>\n"
467             + "<script>\n"
468             + LOG_TITLE_FUNCTION_NORMALIZE
469             + "  var td1 = document.getElementById('td1');\n"
470             + "  log(td1.rowSpan);\n"
471             + "</script>\n"
472             + "</body></html>";
473 
474         loadPageVerifyTitle2(html);
475     }
476 
477     /**
478      * @throws Exception if an error occurs
479      */
480     @Test
481     @Alerts({"1", "0", "3", "3", "3"})
482     public void rowSpanInvalid() throws Exception {
483         final String html = DOCTYPE_HTML
484             + "<html><body><table>\n"
485             + "  <tr>\n"
486             + "    <td id='td1' rowspan='-1'>b</td>\n"
487             + "    <td id='td2' rowspan='0'>b</td>\n"
488             + "    <td id='td3' rowspan='3.14'>b</td>\n"
489             + "    <td id='td4' rowspan='3.5'>b</td>\n"
490             + "    <td id='td5' rowspan='3.7'>b</td>\n"
491             + "  </tr>\n"
492             + "</table>\n"
493             + "<script>\n"
494             + LOG_TITLE_FUNCTION_NORMALIZE
495             + "  var td1 = document.getElementById('td1');\n"
496             + "  var td2 = document.getElementById('td2');\n"
497             + "  var td3 = document.getElementById('td3');\n"
498             + "  var td4 = document.getElementById('td4');\n"
499             + "  var td5 = document.getElementById('td5');\n"
500             + "  log(td1.rowSpan);\n"
501             + "  log(td2.rowSpan);\n"
502             + "  log(td3.rowSpan);\n"
503             + "  log(td4.rowSpan);\n"
504             + "  log(td5.rowSpan);\n"
505             + "</script>\n"
506             + "</body></html>";
507 
508         loadPageVerifyTitle2(html);
509     }
510 
511     /**
512      * @throws Exception if an error occurs
513      */
514     @Test
515     @Alerts({"999", "1001", "65534", "65534"})
516     public void rowSpanLarge() throws Exception {
517         final String html = DOCTYPE_HTML
518             + "<html><body><table>\n"
519             + "  <tr>\n"
520             + "    <td id='td1' rowspan='999'>b</td>\n"
521             + "    <td id='td2' rowspan='1001'>b</td>\n"
522             + "    <td id='td3' rowspan='65534'>b</td>\n"
523             + "    <td id='td4' rowspan='65535'>b</td>\n"
524             + "  </tr>\n"
525             + "</table>\n"
526             + "<script>\n"
527             + LOG_TITLE_FUNCTION_NORMALIZE
528             + "  var td1 = document.getElementById('td1');\n"
529             + "  var td2 = document.getElementById('td2');\n"
530             + "  var td3 = document.getElementById('td3');\n"
531             + "  var td4 = document.getElementById('td4');\n"
532             + "  log(td1.rowSpan);\n"
533             + "  log(td2.rowSpan);\n"
534             + "  log(td3.rowSpan);\n"
535             + "  log(td4.rowSpan);\n"
536             + "</script>\n"
537             + "</body></html>";
538 
539         loadPageVerifyTitle2(html);
540     }
541 
542     /**
543      * @throws Exception if an error occurs
544      */
545     @Test
546     @Alerts({"", "blah", "abc , xyz", "3", ""})
547     public void axis() throws Exception {
548         final String html = DOCTYPE_HTML
549             + "<html>\n"
550             + "  <head>\n"
551             + "    <script>\n"
552             + LOG_TITLE_FUNCTION
553             + "      function test() {\n"
554             + "        var td = document.getElementById('td');\n"
555             + "        log(td.axis);\n"
556             + "        td.axis = 'blah';\n"
557             + "        log(td.axis);\n"
558             + "        td.axis = 'abc , xyz';\n"
559             + "        log(td.axis);\n"
560             + "        td.axis = 3;\n"
561             + "        log(td.axis);\n"
562             + "        td.axis = '';\n"
563             + "        log(td.axis);\n"
564             + "      }\n"
565             + "    </script>\n"
566             + "  </head>\n"
567             + "  <body onload='test()'>\n"
568             + "  <table><tr><td id='td'>a</td></tr></table>\n"
569             + "  </body>\n"
570             + "</html>";
571 
572         loadPageVerifyTitle2(html);
573     }
574 
575     /**
576      * Tests some obscure table cell CSS calculations required by the MochiKit tests.
577      * @throws Exception if an error occurs
578      */
579     @Test
580     @Alerts({"100,42", "90,36"})
581     @HtmlUnitNYI(CHROME = {"100,30", "90,30"},
582             EDGE = {"100,30", "90,30"},
583             FF = {"100,30", "90,30"},
584             FF_ESR = {"100,30", "90,30"})
585     public void cellWidthHeightWithBorderCollapse() throws Exception {
586         final String html = DOCTYPE_HTML
587             + "<html><body><table id='t'><tr>\n"
588             + "<td id='td1' style='width: 80px; height: 30px; "
589                         + "border: 2px solid blue; border-width: 2px 7px 10px 13px; padding: 0px;'>a</td>\n"
590             + "</tr></table>\n"
591             + "<script>\n"
592             + LOG_TITLE_FUNCTION
593             + "  var t = document.getElementById('t');\n"
594             + "  var td1 = document.getElementById('td1');\n"
595 
596             + "  log(td1.offsetWidth + ',' + td1.offsetHeight);\n"
597 
598             + "  t.style.borderCollapse = 'collapse';\n"
599             + "  log(td1.offsetWidth + ',' + td1.offsetHeight);\n"
600 
601             + "</script></body></html>";
602 
603         loadPageVerifyTitle2(html);
604     }
605 
606     /**
607      * @throws Exception if an error occurs
608      */
609     @Test
610     @Alerts({"84,42", "84,42", "100,42", "82,36", "88,36", "90,36"})
611     @HtmlUnitNYI(CHROME = {"84,30", "80,30", "100,30", "82,30", "80,30", "90,30"},
612             EDGE = {"84,30", "80,30", "100,30", "82,30", "80,30", "90,30"},
613             FF = {"84,30", "80,30", "100,30", "82,30", "80,30", "90,30"},
614             FF_ESR = {"84,30", "80,30", "100,30", "82,30", "80,30", "90,30"})
615     public void cellWidthHeightWithBorderCollapseCellsInRow() throws Exception {
616         final String html = DOCTYPE_HTML
617             + "<html><body><table id='t'><tr>\n"
618             + "<td id='td1' style='width: 80px; height: 30px; border: 2px solid blue; padding: 0px;'>a</td>\n"
619             + "<td id='td2' style='width: 80px; height: 30px; "
620                         + "border: solid blue; border-width: 2px; padding: 0px;'>a</td>\n"
621             + "<td id='td3' style='width: 80px; height: 30px; "
622                         + "border: 2px solid blue; border-width: 2px 7px 10px 13px; padding: 0px;'>a</td>\n"
623             + "</tr></table>\n"
624             + "<script>\n"
625             + LOG_TITLE_FUNCTION
626             + "  var t = document.getElementById('t');\n"
627             + "  var td1 = document.getElementById('td1');\n"
628             + "  var td2 = document.getElementById('td2');\n"
629             + "  var td3 = document.getElementById('td3');\n"
630 
631             + "  log(td1.offsetWidth + ',' + td1.offsetHeight);\n"
632             + "  log(td2.offsetWidth + ',' + td2.offsetHeight);\n"
633             + "  log(td3.offsetWidth + ',' + td3.offsetHeight);\n"
634 
635             + "  t.style.borderCollapse = 'collapse';\n"
636             + "  log(td1.offsetWidth + ',' + td1.offsetHeight);\n"
637             + "  log(td2.offsetWidth + ',' + td2.offsetHeight);\n"
638             + "  log(td3.offsetWidth + ',' + td3.offsetHeight);\n"
639 
640             + "</script></body></html>";
641 
642         loadPageVerifyTitle2(html);
643     }
644 
645     /**
646      * Tests some obscure table cell CSS calculations required by the MochiKit tests.
647      * @throws Exception if an error occurs
648      */
649     @Test
650     @Alerts({"84,34", "84,34", "84,34", "82,32", "82,32", "82,32"})
651     @HtmlUnitNYI(CHROME = {"84,30", "84,30", "84,30", "82,30", "82,30", "82,30"},
652             EDGE = {"84,30", "84,30", "84,30", "82,30", "82,30", "82,30"},
653             FF = {"84,30", "84,30", "84,30", "82,30", "82,30", "82,30"},
654             FF_ESR = {"84,30", "84,30", "84,30", "82,30", "82,30", "82,30"})
655     public void cellWidthHeightWithBorderCollapseSameCellLayout() throws Exception {
656         final String html = DOCTYPE_HTML
657             + "<html><body><table id='t'><tr>\n"
658             + "<td id='td1' style='width: 80px; height: 30px; border: 2px solid blue; padding: 0px;'>a</td>\n"
659             + "<td id='td2' style='width: 80px; height: 30px; border: 2px solid blue; padding: 0px;'>a</td>\n"
660             + "<td id='td3' style='width: 80px; height: 30px; border: 2px solid blue; padding: 0px;'>a</td>\n"
661             + "</tr></table>\n"
662             + "<script>\n"
663             + LOG_TITLE_FUNCTION
664             + "  var t = document.getElementById('t');\n"
665             + "  var td1 = document.getElementById('td1');\n"
666             + "  var td2 = document.getElementById('td2');\n"
667             + "  var td3 = document.getElementById('td3');\n"
668 
669             + "  log(td1.offsetWidth + ',' + td1.offsetHeight);\n"
670             + "  log(td2.offsetWidth + ',' + td2.offsetHeight);\n"
671             + "  log(td3.offsetWidth + ',' + td3.offsetHeight);\n"
672 
673             + "  t.style.borderCollapse = 'collapse';\n"
674             + "  log(td1.offsetWidth + ',' + td1.offsetHeight);\n"
675             + "  log(td2.offsetWidth + ',' + td2.offsetHeight);\n"
676             + "  log(td3.offsetWidth + ',' + td3.offsetHeight);\n"
677             + "</script></body></html>";
678 
679         loadPageVerifyTitle2(html);
680     }
681 
682     /**
683      * @throws Exception if an error occurs
684      */
685     @Test
686     @Alerts({"100px", "200px", "400", "abc", "-5", "100.2", "10%"})
687     public void width() throws Exception {
688         final String html = DOCTYPE_HTML
689             + "<html>\n"
690             + "  <head>\n"
691             + "    <script>\n"
692             + LOG_TITLE_FUNCTION
693             + "      function set(e, value) {\n"
694             + "        try {\n"
695             + "          e.width = value;\n"
696             + "        } catch(e) { logEx(e); }\n"
697             + "      }\n"
698             + "      function test() {\n"
699             + "        var td = document.getElementById('td');\n"
700             + "        set(td, '100px');\n"
701             + "        log(td.width);\n"
702             + "        td.height = '200px';\n"
703             + "        log(td.height);\n"
704             + "        set(td, '400');\n"
705             + "        log(td.width);\n"
706             + "        set(td, 'abc');\n"
707             + "        log(td.width);\n"
708             + "        set(td, -5);\n"
709             + "        log(td.width);\n"
710             + "        set(td, 100.2);\n"
711             + "        log(td.width);\n"
712             + "        set(td, '10%');\n"
713             + "        log(td.width);\n"
714             + "      }\n"
715             + "    </script>\n"
716             + "  </head>\n"
717             + "  <body onload='test()'>\n"
718             + "  <table><tr><td id='td'>a</td></tr></table>\n"
719             + "  </body>\n"
720             + "</html>";
721 
722         loadPageVerifyTitle2(html);
723     }
724 
725     /**
726      * @throws Exception if an error occurs
727      */
728     @Test
729     @Alerts("0")
730     public void offsetHeight() throws Exception {
731         final String html = DOCTYPE_HTML
732             + "<html><body>\n"
733             + "<table><tr>\n"
734             + "<td style='padding:0' id='it'></td>\n"
735             + "<td style='display: none'>t</td>\n"
736             + "</tr></table>\n"
737             + "<script>\n"
738             + LOG_TITLE_FUNCTION
739             + "var it = document.getElementById('it');\n"
740             + "log(it.offsetHeight);\n"
741             + "</script>\n"
742             + "</body></html>";
743 
744         loadPageVerifyTitle2(html);
745     }
746 
747     /**
748      * @throws Exception if the test fails
749      */
750     @Test
751     @Alerts({"undefined", "#667788", "unknown", "undefined", "undefined", "undefined"})
752     public void borderColor() throws Exception {
753         final String html = DOCTYPE_HTML
754             + "<html><body>\n"
755             + "  <table><tr><td id='tabd1'></td></tr></table>\n"
756             + "  <table><tr><td id='tabd2' borderColor='red'></td></tr></table>\n"
757             + "  <table><tr><td id='tabd3' borderColor='#123456'></td></tr></table>\n"
758             + "  <table><tr><td id='tabd4' borderColor='unknown'></td></tr></table>\n"
759             + "<script>\n"
760             + LOG_TITLE_FUNCTION
761             + "  var node = document.getElementById('tabd1');\n"
762             + "  log(node.borderColor);\n"
763 
764             + "  node.borderColor = '#667788';\n"
765             + "  log(node.borderColor);\n"
766 
767             + "  node.borderColor = 'unknown';\n"
768             + "  log(node.borderColor);\n"
769 
770             + "  var node = document.getElementById('tabd2');\n"
771             + "  log(node.borderColor);\n"
772             + "  var node = document.getElementById('tabd3');\n"
773             + "  log(node.borderColor);\n"
774             + "  var node = document.getElementById('tabd4');\n"
775             + "  log(node.borderColor);\n"
776 
777             + "</script></body></html>";
778 
779         loadPageVerifyTitle2(html);
780     }
781 
782     /**
783      * @throws Exception if the test fails
784      */
785     @Test
786     @Alerts({"undefined", "undefined", "undefined", "undefined", "undefined", "undefined"})
787     public void borderColorDark() throws Exception {
788         final String html = DOCTYPE_HTML
789             + "<html><body>\n"
790             + "  <table><tr><td id='tabd1'></td></tr></table>\n"
791             + "  <table><tr><td id='tabd2' borderColor='red'></td></tr></table>\n"
792             + "  <table><tr><td id='tabd3' borderColor='#123456'></td></tr></table>\n"
793             + "  <table><tr><td id='tabd4' borderColor='unknown'></td></tr></table>\n"
794             + "<script>\n"
795             + LOG_TITLE_FUNCTION
796             + "  var node = document.getElementById('tabd1');\n"
797             + "  log(node.borderColorDark);\n"
798 
799             + "  node.borderColor = '#667788';\n"
800             + "  log(node.borderColorDark);\n"
801 
802             + "  node.borderColor = 'unknown';\n"
803             + "  log(node.borderColorDark);\n"
804 
805             + "  var node = document.getElementById('tabd2');\n"
806             + "  log(node.borderColorDark);\n"
807             + "  var node = document.getElementById('tabd3');\n"
808             + "  log(node.borderColorDark);\n"
809             + "  var node = document.getElementById('tabd4');\n"
810             + "  log(node.borderColorDark);\n"
811 
812             + "</script></body></html>";
813 
814         loadPageVerifyTitle2(html);
815     }
816 
817     /**
818      * @throws Exception if the test fails
819      */
820     @Test
821     @Alerts({"undefined", "undefined", "undefined", "undefined", "undefined", "undefined"})
822     public void borderColorLight() throws Exception {
823         final String html = DOCTYPE_HTML
824             + "<html><body>\n"
825             + "  <table><tr><td id='tabd1'></td></tr></table>\n"
826             + "  <table><tr><td id='tabd2' borderColor='red'></td></tr></table>\n"
827             + "  <table><tr><td id='tabd3' borderColor='#123456'></td></tr></table>\n"
828             + "  <table><tr><td id='tabd4' borderColor='unknown'></td></tr></table>\n"
829             + "<script>\n"
830             + LOG_TITLE_FUNCTION
831             + "  var node = document.getElementById('tabd1');\n"
832             + "  log(node.borderColorLight);\n"
833 
834             + "  node.borderColor = '#667788';\n"
835             + "  log(node.borderColorLight);\n"
836 
837             + "  node.borderColor = 'unknown';\n"
838             + "  log(node.borderColorLight);\n"
839 
840             + "  var node = document.getElementById('tabd2');\n"
841             + "  log(node.borderColorLight);\n"
842             + "  var node = document.getElementById('tabd3');\n"
843             + "  log(node.borderColorLight);\n"
844             + "  var node = document.getElementById('tabd4');\n"
845             + "  log(node.borderColorLight);\n"
846 
847             + "</script></body></html>";
848 
849         loadPageVerifyTitle2(html);
850     }
851 
852     /**
853      * @throws Exception if the test fails
854      */
855     @Test
856     @Alerts({"true", "true", "false", "false"})
857     public void offsetHeightParentHidden() throws Exception {
858         final String html = DOCTYPE_HTML
859             + "<html>\n"
860             + "<head>\n"
861             + "  <script>\n"
862             + LOG_TITLE_FUNCTION
863             + "    function test() {\n"
864             + "      var table = document.getElementById('table1');\n"
865             + "      var td = document.getElementById('td1');\n"
866             + "      log(td.offsetWidth != 0);\n"
867             + "      log(td.offsetHeight != 0);\n"
868             + "      td.style.display = 'none';\n"
869             + "      log(td.offsetWidth != 0);\n"
870             + "      log(td.offsetHeight != 0);\n"
871             + "    }\n"
872             + "  </script>\n"
873             + "</head>\n"
874             + "<body onload='test()'>\n"
875             + "  <table id='table1'>\n"
876             + "    <tr><td id='td1'>One</td></tr>\n"
877             + "  </table>\n"
878             + "</body>\n"
879             + "</html>";
880 
881         loadPageVerifyTitle2(html);
882     }
883 
884 }