1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 package org.htmlunit.javascript.host.css;
16
17 import java.io.InputStream;
18 import java.net.URL;
19 import java.util.Collections;
20
21 import org.apache.commons.io.IOUtils;
22 import org.htmlunit.WebDriverTestCase;
23 import org.htmlunit.junit.annotation.Alerts;
24 import org.htmlunit.junit.annotation.HtmlUnitNYI;
25 import org.junit.jupiter.api.Test;
26 import org.openqa.selenium.By;
27 import org.openqa.selenium.WebDriver;
28
29
30
31
32
33
34
35
36
37
38
39 public class ComputedCSSStyleDeclarationTest extends WebDriverTestCase {
40
41
42
43
44 @Test
45 @Alerts(DEFAULT = {"[object CSSStyleDeclaration]", "[object CSSStyleDeclaration]"},
46 FF = {"[object CSSStyleProperties]", "[object CSSStyleProperties]"},
47 FF_ESR = {"[object CSS2Properties]", "[object CSS2Properties]"})
48 public void scriptableToString() throws Exception {
49 final String html = DOCTYPE_HTML
50 + "<html><body>\n"
51
52 + "<style>\n"
53 + " div { background-color: #FFFFFF; }\n"
54 + "</style>\n"
55
56 + "<div id='myDiv'></div>\n"
57
58 + "<script>\n"
59 + LOG_TITLE_FUNCTION
60 + " var div = document.getElementById('myDiv');\n"
61 + " var decl = window.getComputedStyle(div, null);\n"
62 + " log(Object.prototype.toString.call(decl));\n"
63 + " log(decl);\n"
64 + "</script>\n"
65
66 + "</body></html>";
67
68 loadPageVerifyTitle2(html);
69 }
70
71
72
73
74 @Test
75 @Alerts("none")
76 public void cssFloat() throws Exception {
77 final String html = "<html>\n"
78 + "<head>\n"
79 + "<script>\n"
80 + LOG_TITLE_FUNCTION
81 + " function test() {\n"
82 + " var e = document.getElementById('myDiv');\n"
83 + " var s = window.getComputedStyle(e, null);\n"
84 + " log(s.cssFloat);\n"
85 + " }\n"
86 + "</script>\n"
87 + "</head>\n"
88 + "<body onload='test()'>\n"
89 + " <div id='myDiv'></div>\n"
90 + "</body></html>";
91
92 loadPageVerifyTitle2(html);
93 }
94
95
96
97
98
99
100 @Test
101 public void stringProperties() throws Exception {
102 final String html = DOCTYPE_HTML
103 + "<html><head><body>\n"
104 + " <div id='myDiv'>HtmlUnit</div>\n"
105 + " <textarea id='myTextarea' cols='120' rows='20'></textarea>\n"
106 + "<script>\n"
107 + "var e = document.getElementById('myDiv');\n"
108 + "var array = [];\n"
109 + "try {\n"
110 + " for (var i in e.style) {\n"
111 + " var s1 = e.style[i];\n"
112 + " var s2 = window.getComputedStyle(e, null)[i];\n"
113 + " if ('cssText' == i) {\n"
114 + " s2 = 'skipped';\n"
115 + " }\n"
116 + " if(typeof s1 == 'string')\n"
117 + " array.push(i + '=' + s1 + ':' + s2);\n"
118 + " }\n"
119 + "} catch(e) { array[array.length] = e.name; }\n"
120 + "array.sort();\n"
121 + "document.getElementById('myTextarea').value = array.join('\\n');\n"
122 + "</script></body></html>";
123
124 final WebDriver driver = loadPage2(html);
125 final String expected = loadExpectation("ComputedCSSStyleDeclarationTest.properties", ".txt");
126 final String actual = driver.findElement(By.id("myTextarea")).getDomProperty("value");
127 assertEquals(expected, actual);
128 }
129
130
131
132
133
134
135 @Test
136 public void stringPropertiesDisplayNone() throws Exception {
137 final String html = DOCTYPE_HTML
138 + "<html><head><body>\n"
139 + " <div id='myDiv' style='display: none'>HtmlUnit</div>\n"
140 + " <textarea id='myTextarea' cols='120' rows='20'></textarea>\n"
141 + "<script>\n"
142 + "var e = document.getElementById('myDiv');\n"
143 + "var array = [];\n"
144 + "try {\n"
145 + " for (var i in e.style) {\n"
146 + " var s1 = e.style[i];\n"
147 + " var s2 = window.getComputedStyle(e, null)[i];\n"
148 + " if ('cssText' == i) {\n"
149 + " s2 = 'skipped';\n"
150 + " }\n"
151 + " if(typeof s1 == 'string')\n"
152 + " array.push(i + '=' + s1 + ':' + s2);\n"
153 + " }\n"
154 + "} catch(e) { array[array.length] = e.name; }\n"
155 + "array.sort();\n"
156 + "document.getElementById('myTextarea').value = array.join('\\n');\n"
157 + "</script></body></html>";
158
159 final WebDriver driver = loadPage2(html);
160 final String expected = loadExpectation("ComputedCSSStyleDeclarationTest.properties.displayNone", ".txt");
161 final String actual = driver.findElement(By.id("myTextarea")).getDomProperty("value");
162 assertEquals(expected, actual);
163 }
164
165
166
167
168
169
170 @Test
171 public void stringPropertiesNotAttached() throws Exception {
172
173 final String html = DOCTYPE_HTML
174 + "<html><head><body>\n"
175 + " <textarea id='myTextarea' cols='120' rows='20'></textarea>\n"
176 + "<script>\n"
177 + "var e = document.createElement('div');\n"
178 + "var array = [];\n"
179 + "try {\n"
180 + " for (var i in e.style) {\n"
181 + " var s1 = e.style[i];\n"
182 + " var s2 = window.getComputedStyle(e, null)[i];\n"
183 + " if ('cssText' == i) {\n"
184 + " s2 = 'skipped';\n"
185 + " }\n"
186 + " if(typeof s1 == 'string')\n"
187 + " array.push(i + '=' + s1 + ':' + s2);\n"
188 + " }\n"
189 + "} catch(e) { array[array.length] = e.name; }\n"
190 + "array.sort();\n"
191 + "document.getElementById('myTextarea').value = array.join('\\n');\n"
192 + "</script></body></html>";
193
194 final WebDriver driver = loadPage2(html);
195 final String expected = loadExpectation("ComputedCSSStyleDeclarationTest.properties.notAttached", ".txt");
196 final String actual = driver.findElement(By.id("myTextarea")).getDomProperty("value");
197 assertEquals(expected, actual);
198 }
199
200
201
202
203 @Test
204 @Alerts({"", "", "auto", "pointer"})
205 public void styleElement() throws Exception {
206 final String html = DOCTYPE_HTML
207 + "<html><head>\n"
208 + "<style type='text/css'>\n"
209 + " /* <![CDATA[ */\n"
210 + " #myDiv2 {cursor: pointer}\n"
211 + " /* ]]> */\n"
212 + "</style>\n"
213 + "<script>\n"
214 + LOG_TITLE_FUNCTION
215 + " function test() {\n"
216 + " var div1 = document.getElementById('myDiv1');\n"
217 + " var div2 = document.getElementById('myDiv2');\n"
218 + " log(div1.style.cursor);\n"
219 + " log(div2.style.cursor);\n"
220 + " log(window.getComputedStyle(div1, null).cursor);\n"
221 + " log(window.getComputedStyle(div2, null).cursor);\n"
222 + " }\n"
223 + "</script></head><body onload='test()'>\n"
224 + " <div id='myDiv1'/>\n"
225 + " <div id='myDiv2'/>\n"
226 + "</body></html>";
227
228 loadPageVerifyTitle2(html);
229 }
230
231
232
233
234
235
236
237
238
239 @Test
240 @Alerts({"", "", "pointer", "pointer"})
241 public void styleElement2() throws Exception {
242 final String html = DOCTYPE_HTML
243 + "<html><head>\n"
244 + "<style type='text/css'>\n"
245 + " /* <![CDATA[ */\n"
246 + " #style_test_1 {cursor: pointer}\n"
247 + " /* ]]> */\n"
248 + "</style>\n"
249 + "<script>\n"
250 + LOG_TITLE_FUNCTION
251 + " function test() {\n"
252 + " var div1 = document.getElementById('style_test_1');\n"
253 + " var div2 = document.getElementById('myDiv2');\n"
254 + " log(div1.style.cursor);\n"
255 + " log(div2.style.cursor);\n"
256 + " log(window.getComputedStyle(div1, null).cursor);\n"
257 + " log(window.getComputedStyle(div2, null).cursor);\n"
258 + " }\n"
259 + "</script></head><body onload='test()'>\n"
260 + " <div id='style_test_1'/>\n"
261 + " <div id='myDiv2'/>\n"
262 + "</body></html>";
263
264 loadPageVerifyTitle2(html);
265 }
266
267
268
269
270 @Test
271 @Alerts({"auto", "string"})
272 public void zIndex() throws Exception {
273 final String html = DOCTYPE_HTML
274 + "<html>\n"
275 + "<head>\n"
276 + "<script>\n"
277 + LOG_TITLE_FUNCTION
278 + " function test() {\n"
279 + " var d = document.getElementById('myDiv');\n"
280 + " var style = window.getComputedStyle(d, null);\n"
281 + " log(style.zIndex);\n"
282 + " log(typeof style.zIndex);\n"
283 + " }\n"
284 + "</script>\n"
285 + "</head>\n"
286 + "<body onload='test()'>\n"
287 + " <div id='myDiv'></div>\n"
288 + "</body></html>";
289
290 loadPageVerifyTitle2(html);
291 }
292
293
294
295
296 @Test
297 @Alerts("50px")
298 public void styleAttributePreferredOverStylesheet() throws Exception {
299 final String html = DOCTYPE_HTML
300 + "<html>\n"
301 + "<head><style>div { width: 30px; }</style></head>\n"
302 + "<body>\n"
303 + "<div id='d' style='width:50px'>foo</div>\n"
304 + "<script>\n"
305 + LOG_TITLE_FUNCTION
306 + "var d = document.getElementById('d');\n"
307 + "var style = window.getComputedStyle(d, null);\n"
308 + "log(style.width);\n"
309 + "</script>\n"
310 + "</body>\n"
311 + "</html>";
312 loadPageVerifyTitle2(html);
313 }
314
315
316
317
318 @Test
319 @Alerts({"1em 16px", "1em 16px", "1em 16px", "1em 16px", "1em 16px", "1em 16px", "1em 16px", "1em 16px",
320 "1em 16px", "1em 16px", "1em 16px", "1em 16px", "1em 16px", "1em 16px"})
321 public void lengthsConvertedToPixels() throws Exception {
322 final String html = DOCTYPE_HTML
323 + "<html><body>\n"
324 + "<div id='d' style='width:1em; height:1em; border:1em solid black; padding:1em; margin:1em;'>d</div>\n"
325 + "<script>\n"
326 + LOG_TITLE_FUNCTION
327 + "var d = document.getElementById('d');\n"
328 + "var cs = window.getComputedStyle(d, null);\n"
329
330 + "log(d.style.width + ' ' + cs.width);\n"
331 + "log(d.style.height + ' ' + cs.height);\n"
332 + "log(d.style.borderBottomWidth + ' ' + cs.borderBottomWidth);\n"
333 + "log(d.style.borderLeftWidth + ' ' + cs.borderLeftWidth);\n"
334 + "log(d.style.borderTopWidth + ' ' + cs.borderTopWidth);\n"
335 + "log(d.style.borderRightWidth + ' ' + cs.borderRightWidth);\n"
336 + "log(d.style.paddingBottom + ' ' + cs.paddingBottom);\n"
337 + "log(d.style.paddingLeft + ' ' + cs.paddingLeft);\n"
338 + "log(d.style.paddingTop + ' ' + cs.paddingTop);\n"
339 + "log(d.style.paddingRight + ' ' + cs.paddingRight);\n"
340 + "log(d.style.marginBottom + ' ' + cs.marginBottom);\n"
341 + "log(d.style.marginLeft + ' ' + cs.marginLeft);\n"
342 + "log(d.style.marginTop + ' ' + cs.marginTop);\n"
343 + "log(d.style.marginRight + ' ' + cs.marginRight);\n"
344 + "</script>\n"
345 + "</body></html>";
346 loadPageVerifyTitle2(html);
347 }
348
349
350
351
352 @Test
353 @Alerts(DEFAULT = {"inline", "inline", "inline", "block", "inline", "block", "block", "none"},
354 FF = {"inline", "inline", "inline", "block", "none", "block", "block", "none"},
355 FF_ESR = {"inline", "inline", "inline", "block", "none", "block", "block", "none"})
356 public void defaultDisplayValues_A() throws Exception {
357 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
358 + " <p id='p'>\n"
359 + " <a id='a'></a>\n"
360 + " <abbr id='abbr'></abbr>\n"
361 + " <acronym id='acronym'></acronym>\n"
362 + " <address id='address'></address>\n"
363 + " <article id='article'></article>\n"
364 + " <aside id='aside'></aside>\n"
365 + " <audio id='audio'></audio>\n"
366 + " </p>\n"
367
368 + " <img usemap='#imgmap'>\n"
369 + " <map name='imgmap'>\n"
370 + " <area id='area'>\n"
371 + " </map>\n"
372 + " </img>\n"
373
374 + " <script>\n"
375 + LOG_TITLE_FUNCTION
376 + " function x(id) {\n"
377 + " var e = document.getElementById(id);\n"
378 + " var cs = window.getComputedStyle(e, null);\n"
379 + " var disp = cs ? cs.display : null;\n"
380 + " log(disp);\n"
381 + " }\n"
382 + " </script>\n"
383 + " <script>\n"
384 + " x('a');\n"
385 + " x('abbr');\n"
386 + " x('acronym');\n"
387 + " x('address');\n"
388 + " x('area');\n"
389 + " x('article');\n"
390 + " x('aside');\n"
391 + " x('audio');\n"
392 + " </script>\n"
393 + "</body></html>";
394 loadPageVerifyTitle2(html);
395 }
396
397
398
399
400 @Test
401 @Alerts({"inline", "inline", "inline", "inline", "block", "inline", "inline-block"})
402 public void defaultDisplayValues_B() throws Exception {
403 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
404 + " <p id='p'>\n"
405 + " <b id='b'></b>\n"
406 + " <bdi id='bdi'></bdi>\n"
407 + " <bdo id='bdo'></bdo>\n"
408 + " <big id='big'></big>\n"
409 + " <blockquote id='blockquote'></blockquote>\n"
410 + " <br id='br'>\n"
411 + " <button id='button' type='button'></button>\n"
412 + " </p>\n"
413
414 + " <script>\n"
415 + LOG_TITLE_FUNCTION
416 + " function x(id) {\n"
417 + " var e = document.getElementById(id);\n"
418 + " var cs = window.getComputedStyle(e, null);\n"
419 + " var disp = cs ? cs.display : null;\n"
420 + " log(disp);\n"
421 + " }\n"
422 + " </script>\n"
423 + " <script>\n"
424 + " x('b');\n"
425 + " x('bdi');\n"
426
427 + " x('bdo');\n"
428 + " x('big');\n"
429 + " x('blockquote');\n"
430 + " x('br');\n"
431 + " x('button');\n"
432 + " </script>\n"
433 + "</body></html>";
434 loadPageVerifyTitle2(html);
435 }
436
437
438
439
440 @Test
441 @Alerts({"inline", "table-caption", "block", "inline", "inline", "table-column", "table-column-group", "inline"})
442 public void defaultDisplayValues_C() throws Exception {
443 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
444 + " <canvas id='canvas'></canvas>\n"
445 + " <center id='center'></center>\n"
446 + " <code id='code'></code>\n"
447
448 + " <table>\n"
449 + " <caption id='caption'></caption>\n"
450 + " <colgroup id='colgroup'>\n"
451 + " <col id='col'>\n"
452 + " </colgroup>\n"
453 + " </table>\n"
454
455 + " <p id='p'>\n"
456 + " <cite id='cite'></cite>\n"
457 + " </p>\n"
458
459 + " <menu>\n"
460 + " <command id='command'></command>\n"
461 + " </menu>\n"
462
463 + " <script>\n"
464 + LOG_TITLE_FUNCTION
465 + " function x(id) {\n"
466 + " var e = document.getElementById(id);\n"
467 + " var cs = window.getComputedStyle(e, null);\n"
468 + " var disp = cs ? cs.display : null;\n"
469 + " log(disp);\n"
470 + " }\n"
471 + " </script>\n"
472 + " <script>\n"
473 + " x('canvas');\n"
474 + " x('caption');\n"
475 + " x('center');\n"
476 + " x('cite');\n"
477 + " x('code');\n"
478 + " x('col');\n"
479 + " x('colgroup');\n"
480 + " x('command');\n"
481 + " </script>\n"
482 + "</body></html>";
483 loadPageVerifyTitle2(html);
484 }
485
486
487
488
489 @Test
490 @Alerts({"none", "block", "inline", "block", "inline", "none", "block", "block", "block", "block"})
491 public void defaultDisplayValues_D() throws Exception {
492 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
493 + " <datalist id='datalist'></datalist>\n"
494
495 + " <dl id='dl'>\n"
496 + " <dt id='dt'></dt>\n"
497 + " <dd id='dd'><dd>\n"
498 + " </dl>\n"
499
500 + " <p id='p'>\n"
501 + " <del id='del'></del>\n"
502 + " </p>\n"
503
504 + " <details id='details'></details>\n"
505 + " <dfn id='dfn'></dfn>\n"
506 + " <dialog id='dialog'></dialog>\n"
507 + " <dir id='dir'></dir>\n"
508 + " <dir id='div'></div>\n"
509
510 + " <script>\n"
511 + LOG_TITLE_FUNCTION
512 + " function x(id) {\n"
513 + " var e = document.getElementById(id);\n"
514 + " var cs = window.getComputedStyle(e, null);\n"
515 + " var disp = cs ? cs.display : null;\n"
516 + " log(disp);\n"
517 + " }\n"
518 + " </script>\n"
519 + " <script>\n"
520 + " x('datalist');\n"
521 + " x('dd');\n"
522 + " x('del');\n"
523 + " x('details');\n"
524 + " x('dfn');\n"
525 + " x('dialog');\n"
526 + " x('dir');\n"
527 + " x('div');\n"
528 + " x('dl');\n"
529 + " x('dt');\n"
530
531 + " </script>\n"
532 + "</body></html>";
533 loadPageVerifyTitle2(html);
534 }
535
536
537
538
539 @Test
540 @Alerts({"inline", "inline"})
541 public void defaultDisplayValues_E() throws Exception {
542 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
543 + " <p id='p'>\n"
544 + " <em id='em'></em>\n"
545 + " </p>\n"
546
547 + " <embed id='embed'>\n"
548
549 + " <script>\n"
550 + LOG_TITLE_FUNCTION
551 + " function x(id) {\n"
552 + " var e = document.getElementById(id);\n"
553 + " var cs = window.getComputedStyle(e, null);\n"
554 + " var disp = cs ? cs.display : null;\n"
555 + " log(disp);\n"
556 + " }\n"
557 + " </script>\n"
558 + " <script>\n"
559 + " x('em');\n"
560 + " x('embed');\n"
561
562 + " </script>\n"
563 + "</body></html>";
564 loadPageVerifyTitle2(html);
565 }
566
567
568
569
570 @Test
571 @Alerts({"block", "block", "block", "inline", "block", "block"})
572 public void defaultDisplayValues_F() throws Exception {
573 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
574 + " <form id='form'>\n"
575 + " <fieldset id='fieldset'></fieldset>\n"
576 + " </form>\n"
577
578 + " <figure id='figure'>\n"
579 + " <figcaption id='figcaption'></figcaption>\n"
580 + " </figure>\n"
581
582 + " <p id='p'>\n"
583 + " <font id='font'></font>\n"
584 + " </p>\n"
585
586 + " <footer id='footer'></footer>\n"
587
588 + " <script>\n"
589 + LOG_TITLE_FUNCTION
590 + " function x(id) {\n"
591 + " var e = document.getElementById(id);\n"
592 + " var cs = window.getComputedStyle(e, null);\n"
593 + " var disp = cs ? cs.display : null;\n"
594 + " log(disp);\n"
595 + " }\n"
596 + " </script>\n"
597 + " <script>\n"
598 + " x('fieldset');\n"
599 + " x('figcaption');\n"
600 + " x('figure');\n"
601 + " x('font');\n"
602 + " x('footer');\n"
603 + " x('form');\n"
604
605 + " </script>\n"
606 + "</body></html>";
607 loadPageVerifyTitle2(html);
608 }
609
610
611
612
613 @Test
614 @Alerts({"block", "block", "block", "block", "block", "block", "block", "block"})
615 public void defaultDisplayValues_H() throws Exception {
616 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
617 + " <h1 id='h1'></h1>\n"
618 + " <h2 id='h2'></h2>\n"
619 + " <h3 id='h3'></h3>\n"
620 + " <h4 id='h4'></h4>\n"
621 + " <h5 id='h5'></h5>\n"
622 + " <h6 id='h6'></h6>\n"
623
624 + " <header id='header'></header>\n"
625 + " <hr id='hr'>\n"
626
627 + " <script>\n"
628 + LOG_TITLE_FUNCTION
629 + " function x(id) {\n"
630 + " var e = document.getElementById(id);\n"
631 + " var cs = window.getComputedStyle(e, null);\n"
632 + " var disp = cs ? cs.display : null;\n"
633 + " log(disp);\n"
634 + " }\n"
635 + " </script>\n"
636 + " <script>\n"
637 + " x('h1');\n"
638 + " x('h2');\n"
639 + " x('h3');\n"
640 + " x('h4');\n"
641 + " x('h5');\n"
642 + " x('h6');\n"
643 + " x('header');\n"
644 + " x('hr');\n"
645
646 + " </script>\n"
647 + "</body></html>";
648 loadPageVerifyTitle2(html);
649 }
650
651
652
653
654 @Test
655 @Alerts({"inline", "inline", "inline", "inline-block", "inline-block",
656 "inline-block", "inline-block", "inline-block", "inline-block", "inline"})
657 public void defaultDisplayValues_I() throws Exception {
658 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
659 + " <p id='p'>\n"
660 + " <i id='i'></i>\n"
661 + " <ins id='ins'></ins>\n"
662 + " </p>\n"
663
664 + " <iframe id='iframe'></iframe>\n"
665 + " <img id='img'></img>\n"
666
667 + " <form id='form'>\n"
668 + " <input id='submit' type='submit'>\n"
669 + " <input id='reset' type='reset'>\n"
670 + " <input id='text' type='text'>\n"
671 + " <input id='password' type='password'>\n"
672 + " <input id='checkbox' type='checkbox'>\n"
673 + " <input id='radio' type='radio'>\n"
674 + " </form>\n"
675
676 + " <script>\n"
677 + LOG_TITLE_FUNCTION
678 + " function x(id) {\n"
679 + " var e = document.getElementById(id);\n"
680 + " var cs = window.getComputedStyle(e, null);\n"
681 + " var disp = cs ? cs.display : null;\n"
682 + " log(disp);\n"
683 + " }\n"
684 + " </script>\n"
685 + " <script>\n"
686 + " x('i');\n"
687 + " x('iframe');\n"
688 + " x('img');\n"
689
690 + " x('submit');\n"
691 + " x('reset');\n"
692 + " x('text');\n"
693 + " x('password');\n"
694 + " x('checkbox');\n"
695 + " x('radio');\n"
696
697 + " x('ins');\n"
698
699 + " </script>\n"
700 + "</body></html>";
701 loadPageVerifyTitle2(html);
702 }
703
704
705
706
707 @Test
708 @Alerts({ "inline", "inline", "inline", "block", "list-item" })
709 public void defaultDisplayValues_KL() throws Exception {
710 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
711 + " <p id='p'>\n"
712 + " <kbd id='kbd'></kbd>\n"
713 + " </p>\n"
714
715 + " <ol>\n"
716 + " <li id='li'></li>\n"
717 + " </ol>\n"
718
719 + " <form id='form'>\n"
720 + " <keygen id='keygen'>\n"
721 + " <label id='label'>\n"
722 + " <fieldset id='fieldset'>\n"
723 + " <legend id='legend'></legend>\n"
724 + " </fieldset>\n"
725 + " </form>\n"
726
727 + " <script>\n"
728 + LOG_TITLE_FUNCTION
729 + " function x(id) {\n"
730 + " var e = document.getElementById(id);\n"
731 + " var cs = window.getComputedStyle(e, null);\n"
732 + " var disp = cs ? cs.display : null;\n"
733 + " log(disp);\n"
734 + " }\n"
735 + " </script>\n"
736 + " <script>\n"
737 + " x('kbd');\n"
738 + " x('keygen');\n"
739
740 + " x('label');\n"
741 + " x('legend');\n"
742 + " x('li');\n"
743
744 + " </script>\n"
745 + "</body></html>";
746 loadPageVerifyTitle2(html);
747 }
748
749
750
751
752 @Test
753 @Alerts({"inline", "inline", "block", "inline-block"})
754 public void defaultDisplayValues_M() throws Exception {
755 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
756 + " <img usemap='#imgmap'>\n"
757 + " <map id='map' name='imgmap'>\n"
758 + " <area id='area'>\n"
759 + " </map>\n"
760 + " </img>\n"
761
762 + " <p id='p'>\n"
763 + " <mark id='mark'></mark>\n"
764 + " </p>\n"
765
766 + " <menu id='menu'>\n"
767 + " <li id='li'></li>\n"
768 + " </menu>\n"
769
770 + " <meter id='meter'></meter>\n"
771
772 + " <script>\n"
773 + LOG_TITLE_FUNCTION
774 + " function x(id) {\n"
775 + " var e = document.getElementById(id);\n"
776 + " var cs = window.getComputedStyle(e, null);\n"
777 + " var disp = cs ? cs.display : null;\n"
778 + " log(disp);\n"
779 + " }\n"
780 + " </script>\n"
781 + " <script>\n"
782 + " x('map');\n"
783 + " x('mark');\n"
784 + " x('menu');\n"
785 + " x('meter');\n"
786
787 + " </script>\n"
788 + "</body></html>";
789 loadPageVerifyTitle2(html);
790 }
791
792
793
794
795 @Test
796 @Alerts(DEFAULT = {"block", "none", "inline", "block", "block", "block", "inline"},
797 CHROME = {"block", "inline", "inline", "block", "block", "block", "inline"},
798 EDGE = {"block", "inline", "inline", "block", "block", "block", "inline"})
799 public void defaultDisplayValues_NO() throws Exception {
800 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
801 + " <nav id='nav'>\n"
802 + " <a id='a'></a>\n"
803 + " </nav>\n"
804
805 + " <noscript id='noscript'></noscript> \n"
806
807 + " <object id='object'></object> "
808 + " <ol id='ol'>\n"
809 + " <li></li>\n"
810 + " </ol>\n"
811
812 + " <form>\n"
813 + " <select>\n"
814 + " <optgroup id='optgroup'>\n"
815 + " <option></option>\n"
816 + " </optgroup>\n"
817 + " <option id='option'></option>\n"
818 + " </select>\n"
819 + " <output id='output'></output>\n"
820 + " </form>\n"
821
822 + " <script>\n"
823 + LOG_TITLE_FUNCTION
824 + " function x(id) {\n"
825 + " var e = document.getElementById(id);\n"
826 + " var cs = window.getComputedStyle(e, null);\n"
827 + " var disp = cs ? cs.display : null;\n"
828 + " log(disp);\n"
829 + " }\n"
830 + " </script>\n"
831 + " <script>\n"
832 + " x('nav');\n"
833 + " x('noscript');\n"
834
835 + " x('object');\n"
836 + " x('ol');\n"
837 + " x('optgroup');\n"
838 + " x('option');\n"
839 + " x('output');\n"
840 + " </script>\n"
841 + "</body></html>";
842 loadPageVerifyTitle2(html);
843 }
844
845
846
847
848 @Test
849 @Alerts({"block", "none", "block", "inline-block", "inline"})
850 public void defaultDisplayValues_PQ() throws Exception {
851 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
852 + " <p id='p'><q id='q'></q></p>\n"
853
854 + " <object>\n"
855 + " <param id='param' name='movie' value=''></param>\n"
856 + " </object> "
857
858 + " <pre id='pre'></pre>\n"
859 + " <progress id='progress'></progress>\n"
860
861 + " <script>\n"
862 + LOG_TITLE_FUNCTION
863 + " function x(id) {\n"
864 + " var e = document.getElementById(id);\n"
865 + " var cs = window.getComputedStyle(e, null);\n"
866 + " var disp = cs ? cs.display : null;\n"
867 + " log(disp);\n"
868 + " }\n"
869 + " </script>\n"
870 + " <script>\n"
871 + " x('p');\n"
872 + " x('param');\n"
873 + " x('pre');\n"
874 + " x('progress');\n"
875
876 + " x('q');\n"
877 + " </script>\n"
878 + "</body></html>";
879 loadPageVerifyTitle2(html);
880 }
881
882
883
884
885 @Test
886 @Alerts({"ruby", "ruby-text", "none"})
887 public void defaultDisplayValues_R() throws Exception {
888 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
889 + " <ruby id='ruby'>\n"
890 + " <rt id='rt'>\n"
891 + " <rp id='rp'></rp>\n"
892 + " </rt>\n"
893 + " </ruby> \n"
894
895 + " <script>\n"
896 + LOG_TITLE_FUNCTION
897 + " function x(id) {\n"
898 + " var e = document.getElementById(id);\n"
899 + " var cs = window.getComputedStyle(e, null);\n"
900 + " var disp = cs ? cs.display : null;\n"
901 + " log(disp);\n"
902 + " }\n"
903 + " </script>\n"
904 + " <script>\n"
905 + " x('ruby');\n"
906 + " x('rt');\n"
907 + " x('rp');\n"
908 + " </script>\n"
909 + "</body></html>";
910 loadPageVerifyTitle2(html);
911 }
912
913
914
915
916 @Test
917 @Alerts(DEFAULT = {"inline", "inline", "none", "block", "inline-block", "inline",
918 "inline", "inline", "inline", "inline", "inline", "block", "inline"},
919 FF = {"inline", "inline", "none", "block", "inline-block", "inline",
920 "", "inline", "inline", "inline", "inline", "block", "inline"},
921 FF_ESR = {"inline", "inline", "none", "block", "inline-block", "inline",
922 "", "inline", "inline", "inline", "inline", "block", "inline"})
923 @HtmlUnitNYI(FF = {"inline", "inline", "none", "block", "inline-block", "inline",
924 "inline", "inline", "inline", "inline", "inline", "block", "inline"},
925 FF_ESR = {"inline", "inline", "none", "block", "inline-block", "inline",
926 "inline", "inline", "inline", "inline", "inline", "block", "inline"})
927 public void defaultDisplayValues_S() throws Exception {
928 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
929 + " <p>\n"
930 + " <s id='s'></s>\n"
931 + " <small id='small'></small>\n"
932 + " <span id='span'></span>\n"
933 + " <strike id='strike'></strike>\n"
934 + " <strong id='strong'></strong>\n"
935 + " <sub id='sub'></sub>\n"
936 + " <sup id='sup'></sup>\n"
937 + " </p> \n"
938
939 + " <samp id='samp'></samp>\n"
940 + " <section id='section'></section>\n"
941 + " <summary id='summary'></summary>\n"
942
943 + " <audio>\n"
944 + " <source id='source'>\n"
945 + " </audio>\n"
946
947 + " <form>\n"
948 + " <select id='select'>\n"
949 + " <option></option>\n"
950 + " </select>\n"
951 + " </form>\n"
952
953 + " <script id='script'>\n"
954 + LOG_TITLE_FUNCTION
955 + " function x(id) {\n"
956 + " var e = document.getElementById(id);\n"
957 + " var cs = window.getComputedStyle(e, null);\n"
958 + " var disp = cs ? cs.display : null;\n"
959 + " log(disp);\n"
960 + " }\n"
961 + " </script>\n"
962 + " <script>\n"
963 + " x('s');\n"
964 + " x('samp');\n"
965 + " x('script');\n"
966 + " x('section');\n"
967 + " x('select');\n"
968 + " x('small');\n"
969 + " x('source');\n"
970 + " x('span');\n"
971 + " x('strike');\n"
972 + " x('strong');\n"
973 + " x('sub');\n"
974 + " x('summary');\n"
975 + " x('sup');\n"
976 + " </script>\n"
977 + "</body></html>";
978 loadPageVerifyTitle2(html);
979 }
980
981
982
983
984 @Test
985 @Alerts(DEFAULT = {"table", "table-row-group", "table-cell", "inline-block", "table-footer-group",
986 "table-cell", "table-header-group", "inline", "table-row", "inline", "inline"},
987 FF = {"table", "table-row-group", "table-cell", "inline-block", "table-footer-group",
988 "table-cell", "table-header-group", "inline", "table-row", "", "inline"},
989 FF_ESR = {"table", "table-row-group", "table-cell", "inline-block", "table-footer-group",
990 "table-cell", "table-header-group", "inline", "table-row", "", "inline"})
991 @HtmlUnitNYI(FF = {"table", "table-row-group", "table-cell", "inline-block", "table-footer-group",
992 "table-cell", "table-header-group", "inline", "table-row", "inline", "inline"},
993 FF_ESR = {"table", "table-row-group", "table-cell", "inline-block", "table-footer-group",
994 "table-cell", "table-header-group", "inline", "table-row", "inline", "inline"})
995 public void defaultDisplayValues_T() throws Exception {
996 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
997 + " <table id='table'>\n"
998 + " <thead id='thead'><tr id='tr'><th id='th'>header</th></tr></thead>\n"
999 + " <tfoot id='tfoot'><tr><td>footer</td></tr></tfoot>\n"
1000 + " <tbody id='tbody'><tr><td id='td'>body</td></tr></tbody>\n"
1001 + " </table>\n"
1002
1003 + " <form>\n"
1004 + " <textarea id='textarea'></textarea>\n"
1005 + " </form>\n"
1006
1007 + " <p>\n"
1008 + " <time id='time'></time>\n"
1009 + " <tt id='tt'></tt>\n"
1010 + " </p> \n"
1011
1012 + " <video>\n"
1013 + " <track id='track'>\n"
1014 + " </video>\n"
1015
1016 + " <script id='script'>\n"
1017 + LOG_TITLE_FUNCTION
1018 + " function x(id) {\n"
1019 + " var e = document.getElementById(id);\n"
1020 + " var cs = window.getComputedStyle(e, null);\n"
1021 + " var disp = cs ? cs.display : null;\n"
1022 + " log(disp);\n"
1023 + " }\n"
1024 + " </script>\n"
1025 + " <script>\n"
1026 + " x('table');\n"
1027 + " x('tbody');\n"
1028 + " x('td');\n"
1029 + " x('textarea');\n"
1030 + " x('tfoot');\n"
1031 + " x('th');\n"
1032 + " x('thead');\n"
1033 + " x('time');\n"
1034 + " x('tr');\n"
1035 + " x('track');\n"
1036 + " x('tt');\n"
1037 + " </script>\n"
1038 + "</body></html>";
1039 loadPageVerifyTitle2(html);
1040 }
1041
1042
1043
1044
1045 @Test
1046 @Alerts({"inline", "block", "inline", "inline", "inline"})
1047 public void defaultDisplayValues_UVW() throws Exception {
1048 final String html = "<!DOCTYPE HTML>\n<html><body>\n"
1049 + " <p>\n"
1050 + " <u id='u'></u>\n"
1051 + " <wbr id='wbr'></wbr>\n"
1052 + " </p> \n"
1053
1054 + " <ul id='ul'>\n"
1055 + " <li></li>\n"
1056 + " </ul>\n"
1057
1058 + " <var id='var'></var>\n"
1059 + " <video id='video'></video>\n"
1060
1061 + " <script id='script'>\n"
1062 + LOG_TITLE_FUNCTION
1063 + " function x(id) {\n"
1064 + " var e = document.getElementById(id);\n"
1065 + " var cs = window.getComputedStyle(e, null);\n"
1066 + " var disp = cs ? cs.display : null;\n"
1067 + " log(disp);\n"
1068 + " }\n"
1069 + " </script>\n"
1070 + " <script>\n"
1071 + " x('u');\n"
1072 + " x('ul');\n"
1073 + " x('var');\n"
1074 + " x('video');\n"
1075 + " x('wbr');\n"
1076 + " </script>\n"
1077 + "</body></html>";
1078 loadPageVerifyTitle2(html);
1079 }
1080
1081
1082
1083
1084 @Test
1085 @Alerts({"rgba(0, 0, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 255, 255)"})
1086 public void backgroundColor() throws Exception {
1087 final String html = DOCTYPE_HTML
1088 + "<html><body>\n"
1089 + "<div id='d0'>div 0</div>\n"
1090 + "<div id='d1' style='background: red'>d</div>\n"
1091 + "<div id='d2' style='background: white url(http://htmlunit.sf.net/foo.png) repeat-x fixed top right'>\n"
1092 + "second div</div>\n"
1093 + "<script>\n"
1094 + LOG_TITLE_FUNCTION
1095 + "function getStyle(x) {\n"
1096 + " var d = document.getElementById(x);\n"
1097 + " var cs = window.getComputedStyle(d, null);\n"
1098 + " return cs;\n"
1099 + "}\n"
1100 + "var cs0 = getStyle('d0');\n"
1101 + "log(cs0.backgroundColor);\n"
1102 + "var cs1 = getStyle('d1');\n"
1103 + "log(cs1.backgroundColor);\n"
1104 + "var cs2 = getStyle('d2');\n"
1105 + "log(cs2.backgroundColor);\n"
1106 + "</script>\n"
1107 + "</body></html>";
1108 loadPageVerifyTitle2(html);
1109 }
1110
1111
1112
1113
1114 @Test
1115 @Alerts("10px")
1116 public void fontSizePX() throws Exception {
1117 final String html = DOCTYPE_HTML
1118 + "<html><body>\n"
1119 + "<div id='d0' style='font-size: 10px;'>\n"
1120 + "<div id='d1'>inside</div>\n"
1121 + "</div>\n"
1122 + "<script>\n"
1123 + LOG_TITLE_FUNCTION
1124 + "function getStyle(x) {\n"
1125 + " var d = document.getElementById(x);\n"
1126 + " var cs = window.getComputedStyle(d, null);\n"
1127 + " return cs;\n"
1128 + "}\n"
1129 + "var cs1 = getStyle('d1');\n"
1130 + "log(cs1.fontSize);\n"
1131 + "</script>\n"
1132 + "</body></html>";
1133 loadPageVerifyTitle2(html);
1134 }
1135
1136
1137
1138
1139 @Test
1140 @Alerts("9.6px")
1141 @HtmlUnitNYI(CHROME = "10px",
1142 EDGE = "10px",
1143 FF = "10px",
1144 FF_ESR = "10px")
1145 public void fontSizeEM() throws Exception {
1146 final String html = DOCTYPE_HTML
1147 + "<html><body>\n"
1148 + "<div id='d0' style='font-size: 0.6em;'>\n"
1149 + "<div id='d1'>inside</div>\n"
1150 + "</div>\n"
1151 + "<script>\n"
1152 + LOG_TITLE_FUNCTION
1153 + " function getStyle(x) {\n"
1154 + " var d = document.getElementById(x);\n"
1155 + " var cs = window.getComputedStyle(d, null);\n"
1156 + " return cs;\n"
1157 + " }\n"
1158 + " var cs1 = getStyle('d1');\n"
1159 + " log(cs1.fontSize);\n"
1160 + "</script>\n"
1161 + "</body></html>";
1162 loadPageVerifyTitle2(html);
1163 }
1164
1165
1166
1167
1168 @Test
1169 @Alerts(DEFAULT = "4.03333px",
1170 CHROME = "3.726px",
1171 EDGE = "3.78px")
1172 @HtmlUnitNYI(CHROME = "1px",
1173 EDGE = "1px",
1174 FF = "1px",
1175 FF_ESR = "1px")
1176 public void fontSizeVH() throws Exception {
1177 final String html = DOCTYPE_HTML
1178 + "<html><body>\n"
1179 + "<div id='d0' style='font-size: 0.6vh;'>\n"
1180 + "<div id='d1'>inside</div>\n"
1181 + "</div>\n"
1182 + "<script>\n"
1183 + LOG_TITLE_FUNCTION
1184 + " function getStyle(x) {\n"
1185 + " var d = document.getElementById(x);\n"
1186 + " var cs = window.getComputedStyle(d, null);\n"
1187 + " return cs;\n"
1188 + " }\n"
1189 + " var cs1 = getStyle('d1');\n"
1190 + " log(cs1.fontSize);\n"
1191 + "</script>\n"
1192 + "</body></html>";
1193 loadPageVerifyTitle2(html);
1194 }
1195
1196
1197
1198
1199 @Test
1200 @Alerts(CHROME = "7.536px",
1201 EDGE = "7.488px",
1202 FF = "7.53333px",
1203 FF_ESR = "7.53333px")
1204 @HtmlUnitNYI(CHROME = "1px",
1205 EDGE = "1px",
1206 FF = "1px",
1207 FF_ESR = "1px")
1208 public void fontSizeVW() throws Exception {
1209 final String html = DOCTYPE_HTML
1210 + "<html><body>\n"
1211 + "<div id='d0' style='font-size: 0.6vw;'>\n"
1212 + "<div id='d1'>inside</div>\n"
1213 + "</div>\n"
1214 + "<script>\n"
1215 + LOG_TITLE_FUNCTION
1216 + " function getStyle(x) {\n"
1217 + " var d = document.getElementById(x);\n"
1218 + " var cs = window.getComputedStyle(d, null);\n"
1219 + " return cs;\n"
1220 + " }\n"
1221 + " var cs1 = getStyle('d1');\n"
1222 + " log(cs1.fontSize);\n"
1223 + "</script>\n"
1224 + "</body></html>";
1225 loadPageVerifyTitle2(html);
1226 }
1227
1228
1229
1230
1231 @Test
1232 @Alerts({"111px", "auto"})
1233 @HtmlUnitNYI(CHROME = {"1256px", "auto"},
1234 EDGE = {"1256px", "auto"},
1235 FF = {"1256px", "auto"},
1236 FF_ESR = {"1256px", "auto"})
1237 public void computedWidthOfHiddenElements() throws Exception {
1238 final String content = DOCTYPE_HTML
1239 + "<html><head><script>\n"
1240 + LOG_TITLE_FUNCTION
1241 + " function test() {\n"
1242 + " var div1 = document.getElementById('myDiv1');\n"
1243 + " var cs1 = window.getComputedStyle(div1, null);\n"
1244 + " log(cs1.width);\n"
1245 + " var div2 = document.getElementById('myDiv2');\n"
1246 + " var cs2 = window.getComputedStyle(div2, null);\n"
1247 + " log(cs2.width);\n"
1248 + " }\n"
1249 + "</script></head><body onload='test()'>\n"
1250 + " <div style='width: 111px'>\n"
1251 + " <div id='myDiv1'></div>\n"
1252 + " <div id='myDiv2' style='display:none'/>\n"
1253 + " </div>\n"
1254 + "</body></html>";
1255 loadPageVerifyTitle2(content);
1256 }
1257
1258
1259
1260
1261
1262
1263 @Test
1264 @Alerts({",", "separate,separate", "collapse,", "collapse,collapse"})
1265 public void inheritedImplicitly() throws Exception {
1266 final String html = DOCTYPE_HTML
1267 + "<html><body><table id='a'><tr id='b'><td>a</td></tr></table><script>\n"
1268 + LOG_TITLE_FUNCTION
1269 + "var a = document.getElementById('a');\n"
1270 + "var b = document.getElementById('b');\n"
1271 + "var as = a.style;\n"
1272 + "var bs = b.style;\n"
1273 + "var acs = window.getComputedStyle(a, null);\n"
1274 + "var bcs = window.getComputedStyle(b, null);\n"
1275 + "log(as.borderCollapse + ',' + bs.borderCollapse);\n"
1276 + "log(acs.borderCollapse + ',' + bcs.borderCollapse);\n"
1277 + "as.borderCollapse = 'collapse';\n"
1278 + "log(as.borderCollapse + ',' + bs.borderCollapse);\n"
1279 + "log(acs.borderCollapse + ',' + bcs.borderCollapse);\n"
1280 + "</script></body></html>";
1281 loadPageVerifyTitle2(html);
1282 }
1283
1284
1285
1286
1287
1288
1289 @Test
1290 @Alerts(DEFAULT = { "underline", "none", "underline"},
1291 FF_ESR = {"underline rgb(0, 0, 0)", "rgb(0, 0, 0)", "underline rgb(0, 0, 0)"})
1292 @HtmlUnitNYI(FF_ESR = { "underline", "rgb(0, 0, 0)", "underline"})
1293 public void changeInParentClassNodeReferencedByRule() throws Exception {
1294 final String html = DOCTYPE_HTML
1295 + "<html><head>\n"
1296 + "<script>\n"
1297 + LOG_TITLE_FUNCTION
1298 + "function readDecoration(id) {\n"
1299 + " var e = document.getElementById(id);\n"
1300 + " var s = window.getComputedStyle(e, null);\n"
1301 + " log(s.textDecoration);\n"
1302 + "}\n"
1303 + "function test() {\n"
1304 + " var fooA = document.getElementById('fooA');\n"
1305 + " readDecoration('fooB');\n"
1306 + " fooA.setAttribute('class', '');\n"
1307 + " readDecoration('fooB');\n"
1308 + " fooA.setAttribute('class', 'A');\n"
1309 + " readDecoration('fooB');\n"
1310 + "}\n"
1311 + "</script>\n"
1312 + "<style>\n"
1313 + ".A .B { text-decoration: underline }\n"
1314 + "</style>\n"
1315 + "</head><body onload='test()'>\n"
1316 + "<div class='A' id='fooA'>A\n"
1317 + "<div class='B' id='fooB'>B</div></div>\n"
1318 + "</body></html>";
1319 loadPageVerifyTitle2(html);
1320 }
1321
1322
1323
1324
1325 @Test
1326 @Alerts({"200px,400px", "200,400", "200px,400px", "50%,25%", "100,100", "100px,100px"})
1327 public void widthAndHeightPercentagesAndPx() throws Exception {
1328 final String html = DOCTYPE_HTML
1329 + "<html><body onload='test()'>\n"
1330 + "<div id='d1' style='width:200px;height:400px'><div id='d2' style='width:50%;height:25%'></div></div>\n"
1331 + "<script>\n"
1332 + LOG_TITLE_FUNCTION
1333 + " function test() {\n"
1334 + " var d1 = document.getElementById('d1');\n"
1335 + " var s1 = window.getComputedStyle(d1, null);\n"
1336 + " var d2 = document.getElementById('d2');\n"
1337 + " var s2 = window.getComputedStyle(d2, null);\n"
1338 + " log(d1.style.width + ',' + d1.style.height);\n"
1339 + " log(d1.offsetWidth + ',' + d1.offsetHeight);\n"
1340 + " log(s1.width + ',' + s1.height);\n"
1341 + " log(d2.style.width + ',' + d2.style.height);\n"
1342 + " log(d2.offsetWidth + ',' + d2.offsetHeight);\n"
1343 + " log(s2.width + ',' + s2.height);\n"
1344 + " }\n"
1345 + "</script>\n"
1346 + "</body></html>";
1347 loadPageVerifyTitle2(html);
1348 }
1349
1350
1351
1352
1353 @Test
1354 @Alerts({"10em,20em", "160,320", "160px,320px", "50%,25%", "80,80", "80px,80px"})
1355 public void widthAndHeightPercentagesAndEm() throws Exception {
1356 final String html = DOCTYPE_HTML
1357 + "<html><body onload='test()'>\n"
1358 + "<div id='d1' style='width:10em;height:20em'><div id='d2' style='width:50%;height:25%'></div></div>\n"
1359 + "<script>\n"
1360 + LOG_TITLE_FUNCTION
1361 + " function test() {\n"
1362 + " var d1 = document.getElementById('d1');\n"
1363 + " var s1 = window.getComputedStyle(d1, null);\n"
1364 + " var d2 = document.getElementById('d2');\n"
1365 + " var s2 = window.getComputedStyle(d2, null);\n"
1366 + " log(d1.style.width + ',' + d1.style.height);\n"
1367 + " log(d1.offsetWidth + ',' + d1.offsetHeight);\n"
1368 + " log(s1.width + ',' + s1.height);\n"
1369 + " log(d2.style.width + ',' + d2.style.height);\n"
1370 + " log(d2.offsetWidth + ',' + d2.offsetHeight);\n"
1371 + " log(s2.width + ',' + s2.height);\n"
1372 + " }\n"
1373 + "</script>\n"
1374 + "</body></html>";
1375 loadPageVerifyTitle2(html);
1376 }
1377
1378
1379
1380
1381
1382 @Test
1383 @Alerts({"true", "true"})
1384 public void widthAndHeightPercentagesHTML() throws Exception {
1385 final String html = DOCTYPE_HTML
1386 + "<html style='height: 100%'>\n"
1387 + "<body>\n"
1388 + "<script>\n"
1389 + LOG_TITLE_FUNCTION
1390 + " var h = document.documentElement;\n"
1391 + " log(h.offsetWidth > 0);\n"
1392 + " log(h.offsetHeight > 0);\n"
1393 + "</script>\n"
1394 + "</body></html>";
1395 loadPageVerifyTitle2(html);
1396 }
1397
1398
1399
1400
1401 @Test
1402 @Alerts({"true", "true", "true", "true", "true", "true", "true", "true",
1403 "true", "true", "true", "true", "false", "false",
1404 "true", "true", "true", "true"})
1405 public void widthAndHeightInputElements() throws Exception {
1406 final String html = DOCTYPE_HTML
1407 + "<html>\n"
1408 + "<body>\n"
1409 + " <form id='form'>\n"
1410 + " <input id='submit' type='submit'>\n"
1411 + " <input id='reset' type='reset'>\n"
1412 + " <input id='text' type='text'>\n"
1413 + " <input id='password' type='password'>\n"
1414 + " <input id='checkbox' type='checkbox'>\n"
1415 + " <input id='radio' type='radio'>\n"
1416 + " <input id='hidden' type='hidden'>\n"
1417 + " <button id='button' type='button'></button>\n"
1418 + " <textarea id='myTextarea'></textarea>\n"
1419 + " </form>\n"
1420
1421 + " <script>\n"
1422 + LOG_TITLE_FUNCTION
1423 + " function x(id) {\n"
1424 + " var e = document.getElementById(id);\n"
1425 + " log(e.offsetWidth > 0);\n"
1426 + " log(e.offsetHeight > 0);\n"
1427 + " }\n"
1428 + " </script>\n"
1429
1430 + " <script>\n"
1431 + " x('submit');\n"
1432 + " x('reset');\n"
1433 + " x('text');\n"
1434 + " x('password');\n"
1435 + " x('checkbox');\n"
1436 + " x('radio');\n"
1437 + " x('hidden');\n"
1438 + " x('button');\n"
1439 + " x('myTextarea');\n"
1440 + " </script>\n"
1441 + "</body></html>";
1442 loadPageVerifyTitle2(html);
1443 }
1444
1445
1446
1447
1448 @Test
1449 @Alerts(DEFAULT = {"4", "7", "16", "16"},
1450 FF = {"4", "7", "24", "24"},
1451 FF_ESR = {"4", "7", "24", "24"})
1452 public void widthAndHeightImageElement() throws Exception {
1453 try (InputStream is = getClass().getClassLoader().getResourceAsStream("testfiles/4x7.jpg")) {
1454 final byte[] directBytes = IOUtils.toByteArray(is);
1455 final URL urlImage = new URL(URL_FIRST, "4x7.jpg");
1456 getMockWebConnection().setResponse(urlImage, directBytes, 200, "ok", "image/jpg", Collections.emptyList());
1457 }
1458
1459 final String content = DOCTYPE_HTML
1460 + "<html><head><script>\n"
1461 + LOG_TITLE_FUNCTION
1462 + " function test() {\n"
1463 + " var myImage = document.getElementById('myImage');\n"
1464 + " log(myImage.offsetWidth);\n"
1465 + " log(myImage.offsetHeight);\n"
1466
1467 + " var myImage = document.getElementById('myImage2');\n"
1468 + " log(myImage.offsetWidth);\n"
1469 + " log(myImage.offsetHeight);\n"
1470 + " }\n"
1471 + "</script></head>\n"
1472 + "<body onload='test()'>\n"
1473 + " <img id='myImage' src='4x7.jpg' >\n"
1474 + " <img id='myImage2' src='unknown.jpg' >\n"
1475 + "</body></html>";
1476 loadPageVerifyTitle2(content);
1477 }
1478
1479
1480
1481
1482 @Test
1483 @Alerts({"0", "0"})
1484 public void widthAndHeightEmptySpanElement() throws Exception {
1485 final String content = DOCTYPE_HTML
1486 + "<html><head><script id='headScript'>\n"
1487 + LOG_TITLE_FUNCTION
1488 + " function test() {\n"
1489 + " var headScript = document.getElementById('headScript');\n"
1490 + " log(headScript.offsetWidth);\n"
1491 + " log(headScript.offsetHeight);\n"
1492 + " }\n"
1493 + "</script></head>\n"
1494 + "<body onload='test()'>\n"
1495 + " Ab<span id='mySpan'></span>cD\n"
1496 + "</body></html>";
1497 loadPageVerifyTitle2(content);
1498 }
1499
1500
1501
1502
1503 @Test
1504 @Alerts({"0", "0", "0", "0", "0", "0"})
1505 public void widthAndHeightScriptElement() throws Exception {
1506 final String content = DOCTYPE_HTML
1507 + "<html><head><script id='headScript'>\n"
1508 + LOG_TITLE_FUNCTION
1509 + " function test() {\n"
1510 + " var headScript = document.getElementById('headScript');\n"
1511 + " log(headScript.offsetWidth);\n"
1512 + " log(headScript.offsetHeight);\n"
1513
1514 + " var bodyScript = document.getElementById('bodyScript');\n"
1515 + " log(bodyScript.offsetWidth);\n"
1516 + " log(bodyScript.offsetHeight);\n"
1517
1518 + " var aroundScript = document.getElementById('aroundScript');\n"
1519 + " log(aroundScript.offsetWidth);\n"
1520 + " log(aroundScript.offsetHeight);\n"
1521 + " }\n"
1522 + "</script></head>\n"
1523 + "<body onload='test()'>\n"
1524 + " <script id='bodyScript'>console.log('#');</script>\n"
1525 + " <span id='aroundScript'><script>console.log('#');</script></span>\n"
1526 + "</body></html>";
1527 loadPageVerifyTitle2(content);
1528 }
1529
1530
1531
1532
1533 @Test
1534 @Alerts({"33", "17", "0", "17"})
1535 @HtmlUnitNYI(CHROME = {"30", "18", "0", "0"},
1536 EDGE = {"30", "18", "0", "0"},
1537 FF = {"30", "18", "0", "0"},
1538 FF_ESR = {"30", "18", "0", "0"})
1539 public void widthAndHeightChildDisplayNone() throws Exception {
1540 final String content = DOCTYPE_HTML
1541 + "<html><head><script>\n"
1542 + LOG_TITLE_FUNCTION
1543 + " function test() {\n"
1544 + " var outerSpan = document.getElementById('outerSpan');\n"
1545 + " log(outerSpan.offsetWidth);\n"
1546 + " log(outerSpan.offsetHeight);\n"
1547
1548 + " var outerSpanContentInvisible = document.getElementById('outerSpanContentInvisible');\n"
1549 + " log(outerSpanContentInvisible.offsetWidth);\n"
1550 + " log(outerSpanContentInvisible.offsetHeight);\n"
1551 + " }\n"
1552 + "</script></head>\n"
1553 + "<body onload='test()'>\n"
1554 + " <span id='outerSpan'><span>ABC</span></span>\n"
1555 + " <span id='outerSpanContentInvisible'><span style='display:none'>ABC</span></span>\n"
1556 + "</body></html>";
1557 loadPageVerifyTitle2(content);
1558 }
1559
1560
1561
1562
1563 @Test
1564 @Alerts({"0", "0"})
1565 public void widthAndHeightChildDisplayNoneWidth() throws Exception {
1566 final String content = DOCTYPE_HTML
1567 + "<html><head><script>\n"
1568 + LOG_TITLE_FUNCTION
1569 + " function test() {\n"
1570 + " var outer = document.getElementById('outer');\n"
1571 + " log(outer.offsetWidth);\n"
1572 + " log(outer.offsetHeight);\n"
1573 + " }\n"
1574 + "</script></head>\n"
1575 + "<body onload='test()'>\n"
1576 + " <span id='outer'><span style='display:none; width: 40px'>ABC</span></span>\n"
1577 + "</body></html>";
1578 loadPageVerifyTitle2(content);
1579 }
1580
1581
1582
1583
1584 @Test
1585 @Alerts({"0", "0"})
1586 public void widthAndHeightChildDisplayNoneWidthLineBreak() throws Exception {
1587
1588 final String content = DOCTYPE_HTML
1589 + "<html><head><script>\n"
1590 + LOG_TITLE_FUNCTION
1591 + " function test() {\n"
1592 + " var outer = document.getElementById('outer');\n"
1593 + " log(outer.offsetWidth);\n"
1594 + " log(outer.offsetHeight);\n"
1595 + " }\n"
1596 + "</script></head>\n"
1597 + "<body onload='test()'>\n"
1598 + " <span id='outer'>\n"
1599 + " <span style='display:none; width: 40px'>ABC</span>\n"
1600 + " </span>\n"
1601 + "</body></html>";
1602 loadPageVerifyTitle2(content);
1603 }
1604
1605
1606
1607
1608 @Test
1609 @Alerts({"", ""})
1610 public void widthAndHeightDisconnected() throws Exception {
1611 final String html = DOCTYPE_HTML
1612 + "<html>\n"
1613 + "<head>\n"
1614 + " <script>\n"
1615 + LOG_TITLE_FUNCTION
1616 + " function test() {\n"
1617 + " var e = document.createElement('div');\n"
1618 + " var style = window.getComputedStyle(e, null);\n"
1619 + " log(style.width);\n"
1620 + " log(style.height);\n"
1621 + " }\n"
1622 + " </script>\n"
1623 + "</head>\n"
1624 + "<body onload='test()'>\n"
1625 + "</body></html>";
1626 loadPageVerifyTitle2(html);
1627 }
1628
1629
1630
1631
1632 @Test
1633 @Alerts({"true", "true", "true", "true", "false"})
1634 public void widthAutoBody() throws Exception {
1635 final String html = DOCTYPE_HTML
1636 + "<html>\n"
1637 + "<head>\n"
1638 + " <script>\n"
1639 + LOG_TITLE_FUNCTION
1640 + " function test() {\n"
1641 + " let el = document.body;\n"
1642 + " log(el.style.width == 'auto');\n"
1643 + " log(el.clientWidth > 100);\n"
1644 + " log(el.offsetWidth > 100);\n"
1645
1646 + " var style = window.getComputedStyle(el, null);\n"
1647 + " log(/\\d+px/.test(style.width));\n"
1648 + " log(style.width == 'auto');\n"
1649 + " }\n"
1650 + " </script>\n"
1651 + "</head>\n"
1652 + "<body style='width: auto' onload='test();'>\n"
1653 + " <div id='div'></div>\n"
1654 + "</body></html>";
1655 loadPageVerifyTitle2(html);
1656 }
1657
1658
1659
1660
1661 @Test
1662 @Alerts({"false", "true", "true", "true", "false"})
1663 public void widthAutoDiv() throws Exception {
1664 final String html = DOCTYPE_HTML
1665 + "<html>\n"
1666 + "<head>\n"
1667 + " <script>\n"
1668 + LOG_TITLE_FUNCTION
1669 + " function test() {\n"
1670 + " let el = document.getElementById('div');\n"
1671 + " log(el.style.width == 'auto');\n"
1672 + " log(el.clientWidth > 100);\n"
1673 + " log(el.offsetWidth > 100);\n"
1674
1675 + " var style = window.getComputedStyle(el, null);\n"
1676 + " log(/\\d+px/.test(style.width));\n"
1677 + " log(style.width == 'auto');\n"
1678 + " }\n"
1679 + " </script>\n"
1680 + "</head>\n"
1681 + "<body style='width: auto' onload='test();'>\n"
1682 + " <div id='div'></div>\n"
1683 + "</body></html>";
1684 loadPageVerifyTitle2(html);
1685 }
1686
1687
1688
1689
1690 @Test
1691 @Alerts({"", "rgb(0, 0, 255)"})
1692 @HtmlUnitNYI(CHROME = {"red", "rgb(0, 0, 255)"},
1693 EDGE = {"red", "rgb(0, 0, 255)"},
1694 FF = {"red", "rgb(0, 0, 255)"},
1695 FF_ESR = {"red", "rgb(0, 0, 255)"})
1696 public void getPropertyValue() throws Exception {
1697 final String html = DOCTYPE_HTML
1698 + "<html><head><script>\n"
1699 + LOG_TITLE_FUNCTION
1700 + "function doTest() {\n"
1701 + " try {\n"
1702 + " var d = document.getElementById('div1');\n"
1703 + " var s = window.getComputedStyle(d, null);\n"
1704 + " log(s.getPropertyValue('test'));\n"
1705 + " log(s.getPropertyValue('color'));\n"
1706 + " } catch(e) { logEx(e); }\n"
1707 + "}\n"
1708 + "</script>\n"
1709 + "<style>#div1 { test: red }</style>\n"
1710 + "</head>\n"
1711 + "<body onload='doTest()'>\n"
1712 + "<div id='div1' style='color: blue'>foo</div></body></html>";
1713 loadPageVerifyTitle2(html);
1714 }
1715
1716
1717
1718
1719 @Test
1720 @Alerts({"roman", "swiss", "roman"})
1721 public void handleImportant() throws Exception {
1722 final String html = DOCTYPE_HTML
1723 + "<html><head><script>\n"
1724 + LOG_TITLE_FUNCTION
1725 + " function doTest() {\n"
1726 + " alertFF(document.getElementById('div1'));\n"
1727 + " alertFF(document.getElementById('div2'));\n"
1728 + " alertFF(document.getElementById('div3'));\n"
1729 + " }\n"
1730 + " function alertFF(e) {\n"
1731 + " var s = window.getComputedStyle(e, null);\n"
1732 + " log(s.getPropertyValue('font-family'));\n"
1733 + " }\n"
1734 + "</script>\n"
1735 + " <style>#div1 { font-family: swiss }</style>\n"
1736 + " <style>#div2 { font-family: swiss !important }</style>\n"
1737 + " <style>#div3 { font-family: swiss !important }</style>\n"
1738 + "</head>\n"
1739 + "<body onload='doTest()'>\n"
1740 + " <div id='div1' style='font-family: roman'>foo</div>\n"
1741 + " <div id='div2' style='font-family: roman'>foo</div>\n"
1742 + " <div id='div3' style='font-family: roman !important'>foo</div>\n"
1743 + "</body></html>";
1744 loadPageVerifyTitle2(html);
1745 }
1746
1747
1748
1749
1750 @Test
1751 @Alerts("0")
1752 public void offsetHeight_empty_tag() throws Exception {
1753 final String html = DOCTYPE_HTML
1754 + "<html><head><script>\n"
1755 + LOG_TITLE_FUNCTION
1756 + " function test() {\n"
1757 + " log(document.getElementById('div1').offsetHeight);\n"
1758 + " }\n"
1759 + "</script>\n"
1760 + "</head>\n"
1761 + "<body onload='test()'>\n"
1762 + " <div id='div1'/>\n"
1763 + "</body></html>";
1764 loadPageVerifyTitle2(html);
1765 }
1766
1767
1768
1769
1770 @Test
1771 @Alerts("0")
1772 public void offsetHeight_empty() throws Exception {
1773 final String html = DOCTYPE_HTML
1774 + "<html><head><script>\n"
1775 + LOG_TITLE_FUNCTION
1776 + " function test() {\n"
1777 + " log(document.getElementById('div1').offsetHeight);\n"
1778 + " }\n"
1779 + "</script>\n"
1780 + "</head>\n"
1781 + "<body onload='test()'>\n"
1782 + " <div id='div1'></div>\n"
1783 + "</body></html>";
1784 loadPage2(html);
1785 }
1786
1787
1788
1789
1790 @Test
1791 @Alerts("0")
1792 public void offsetHeight_displayNone() throws Exception {
1793 final String html = DOCTYPE_HTML
1794 + "<html><head><script>\n"
1795 + LOG_TITLE_FUNCTION
1796 + " function test() {\n"
1797 + " log(document.getElementById('div1').offsetHeight);\n"
1798 + " }\n"
1799 + "</script>\n"
1800 + "</head>\n"
1801 + "<body onload='test()'>\n"
1802 + " <div id='div1' style='display: none'></div>\n"
1803 + "</body></html>";
1804 loadPageVerifyTitle2(html);
1805 }
1806
1807
1808
1809
1810 @Test
1811 @Alerts("18")
1812 public void offsetHeight_with_content() throws Exception {
1813 final String html = DOCTYPE_HTML
1814 + "<html><head><script>\n"
1815 + LOG_TITLE_FUNCTION
1816 + " function test() {\n"
1817 + " log(document.getElementById('div1').offsetHeight);\n"
1818 + " }\n"
1819 + "</script>\n"
1820 + "</head>\n"
1821 + "<body onload='test()'>\n"
1822 + " <div id='div1'>foo</div>\n"
1823 + "</body></html>";
1824 loadPageVerifyTitle2(html);
1825 }
1826
1827
1828
1829
1830 @Test
1831 @Alerts("18")
1832 public void offsetHeight_with_child() throws Exception {
1833 final String html = DOCTYPE_HTML
1834 + "<html><head><script>\n"
1835 + LOG_TITLE_FUNCTION
1836 + " function test() {\n"
1837 + " log(document.getElementById('div1').offsetHeight);\n"
1838 + " }\n"
1839 + "</script>\n"
1840 + "</head>\n"
1841 + "<body onload='test()'>\n"
1842 + " <div id='div1'><div>foo</div></div>\n"
1843 + "</body></html>";
1844 loadPageVerifyTitle2(html);
1845 }
1846
1847
1848
1849
1850 @Test
1851 @Alerts("85")
1852 @HtmlUnitNYI(CHROME = "18",
1853 EDGE = "18",
1854 FF = "18",
1855 FF_ESR = "18")
1856 public void offsetHeight_with_childHeight() throws Exception {
1857 final String html = DOCTYPE_HTML
1858 + "<html><head><script>\n"
1859 + LOG_TITLE_FUNCTION
1860 + " function test() {\n"
1861 + " log(document.getElementById('div1').offsetHeight);\n"
1862 + " }\n"
1863 + "</script>\n"
1864 + "</head>\n"
1865 + "<body onload='test()'>\n"
1866 + " <div id='div1'><iframe height='77'>foo</iframe></div>\n"
1867 + "</body></html>";
1868 loadPageVerifyTitle2(html);
1869 }
1870
1871
1872
1873
1874 @Test
1875 @Alerts({"true", "true"})
1876 @HtmlUnitNYI(CHROME = {"true", "false"},
1877 EDGE = {"true", "false"},
1878 FF = {"true", "false"},
1879 FF_ESR = {"true", "false"})
1880 public void offsetHeight_setting_height() throws Exception {
1881 final String html = DOCTYPE_HTML
1882 + "<html><head>\n"
1883 + "<style>\n"
1884 + " .height100Percent { height: 100% }\n"
1885 + "</style>\n"
1886 + "<script>\n"
1887 + LOG_TITLE_FUNCTION
1888 + " function test() {\n"
1889 + " var div1 = document.getElementById('div1');\n"
1890 + " log(div1.offsetHeight == 0);\n"
1891 + " div1.className = 'height100Percent';\n"
1892 + " log(div1.offsetHeight == 0);\n"
1893 + " }\n"
1894 + "</script>\n"
1895 + "</head>\n"
1896 + "<body onload='test()'>\n"
1897 + " <div id='div1'/>\n"
1898 + "</body></html>";
1899 loadPageVerifyTitle2(html);
1900 }
1901
1902
1903
1904
1905 @Test
1906 @Alerts({"true", "false"})
1907 public void offsetHeight_setting_height_quirks() throws Exception {
1908 final String html =
1909 "<html><head>\n"
1910 + "<style>\n"
1911 + " .height100Percent { height: 100% }\n"
1912 + "</style>\n"
1913 + "<script>\n"
1914 + LOG_TITLE_FUNCTION
1915 + " function test() {\n"
1916 + " var div1 = document.getElementById('div1');\n"
1917 + " log(div1.offsetHeight == 0);\n"
1918 + " div1.className = 'height100Percent';\n"
1919 + " log(div1.offsetHeight == 0);\n"
1920 + " }\n"
1921 + "</script>\n"
1922 + "</head>\n"
1923 + "<body onload='test()'>\n"
1924 + " <div id='div1'/>\n"
1925 + "</body></html>";
1926 loadPageVerifyTitle2(html);
1927 }
1928
1929
1930
1931
1932 @Test
1933 @Alerts(DEFAULT = {"true", "false"},
1934 FF = {"true", "true"},
1935 FF_ESR = {"true", "true"})
1936 @HtmlUnitNYI(FF = {"true", "false"}, FF_ESR = {"true", "false"})
1937 public void scrollbarWidth() throws Exception {
1938 final String html = DOCTYPE_HTML
1939 + "<html><head><script>\n"
1940 + LOG_TITLE_FUNCTION
1941 + " function test() {\n"
1942 + " var scroller = document.createElement('div');\n"
1943 + " scroller.style['width'] = '50px';\n"
1944 + " scroller.style['height'] = '50px';\n"
1945 + " scroller.style['overflow'] = 'scroll';\n"
1946 + " log(scroller.offsetWidth - scroller.clientWidth == 0);\n"
1947 + " document.body.appendChild(scroller);\n"
1948 + " log(scroller.offsetWidth - scroller.clientWidth == 0);\n"
1949 + " }\n"
1950 + "</script>\n"
1951 + "</head>\n"
1952 + "<body onload='test()'>\n"
1953 + "</body></html>";
1954 loadPageVerifyTitle2(html);
1955 }
1956
1957
1958
1959
1960 @Test
1961 @Alerts(DEFAULT = {"true", "false"},
1962 FF = {"true", "true"},
1963 FF_ESR = {"true", "true"})
1964 @HtmlUnitNYI(FF = {"true", "false"}, FF_ESR = {"true", "false"})
1965 public void scrollbarWidthOverflowY() throws Exception {
1966 final String html = DOCTYPE_HTML
1967 + "<html><head><script>\n"
1968 + LOG_TITLE_FUNCTION
1969 + " function test() {\n"
1970 + " var scroller = document.createElement('div');\n"
1971 + " scroller.style['width'] = '50px';\n"
1972 + " scroller.style['height'] = '50px';\n"
1973 + " scroller.style['overflowY'] = 'scroll';\n"
1974 + " log(scroller.offsetWidth - scroller.clientWidth == 0);\n"
1975 + " document.body.appendChild(scroller);\n"
1976 + " log(scroller.offsetWidth - scroller.clientWidth == 0);\n"
1977 + " }\n"
1978 + "</script>\n"
1979 + "</head>\n"
1980 + "<body onload='test()'>\n"
1981 + "</body></html>";
1982 loadPageVerifyTitle2(html);
1983 }
1984
1985
1986
1987
1988 @Test
1989 @Alerts(DEFAULT = {"true", "false"},
1990 FF = {"true", "true"},
1991 FF_ESR = {"true", "true"})
1992 @HtmlUnitNYI(FF = {"true", "false"}, FF_ESR = {"true", "false"})
1993 public void scrollbarHeight() throws Exception {
1994 final String html = DOCTYPE_HTML
1995 + "<html><head><script>\n"
1996 + LOG_TITLE_FUNCTION
1997 + " function test() {\n"
1998 + " var scroller = document.createElement('div');\n"
1999 + " scroller.style['width'] = '50px';\n"
2000 + " scroller.style['height'] = '50px';\n"
2001 + " scroller.style['overflow'] = 'scroll';\n"
2002 + " log(scroller.offsetHeight - scroller.clientHeight == 0);\n"
2003 + " document.body.appendChild(scroller);\n"
2004 + " log(scroller.offsetHeight - scroller.clientHeight == 0);\n"
2005 + " }\n"
2006 + "</script>\n"
2007 + "</head>\n"
2008 + "<body onload='test()'>\n"
2009 + "</body></html>";
2010 loadPageVerifyTitle2(html);
2011 }
2012
2013
2014
2015
2016 @Test
2017 @Alerts(DEFAULT = {"true", "false"},
2018 FF = {"true", "true"},
2019 FF_ESR = {"true", "true"})
2020 @HtmlUnitNYI(FF = {"true", "false"}, FF_ESR = {"true", "false"})
2021 public void scrollbarHeightOverflowX() throws Exception {
2022 final String html = DOCTYPE_HTML
2023 + "<html><head><script>\n"
2024 + LOG_TITLE_FUNCTION
2025 + " function test() {\n"
2026 + " var scroller = document.createElement('div');\n"
2027 + " scroller.style['width'] = '50px';\n"
2028 + " scroller.style['height'] = '50px';\n"
2029 + " scroller.style['overflowX'] = 'scroll';\n"
2030 + " log(scroller.offsetHeight - scroller.clientHeight == 0);\n"
2031 + " document.body.appendChild(scroller);\n"
2032 + " log(scroller.offsetHeight - scroller.clientHeight == 0);\n"
2033 + " }\n"
2034 + "</script>\n"
2035 + "</head>\n"
2036 + "<body onload='test()'>\n"
2037 + "</body></html>";
2038 loadPageVerifyTitle2(html);
2039 }
2040
2041
2042
2043
2044 @Test
2045 @Alerts({"", "", "", "10", "10", "rgb(0, 128, 0)"})
2046 public void zIndexComputed() throws Exception {
2047 final String html = DOCTYPE_HTML
2048 + "<html><head>\n"
2049 + "<style>\n"
2050 + " .abc { z-index: 10; color:green }\n"
2051 + "</style>\n"
2052 + "<script>\n"
2053 + LOG_TITLE_FUNCTION
2054 + " function test() {\n"
2055 + " var div = document.getElementById('myDiv');\n"
2056 + " log(div.style.zIndex);\n"
2057 + " log(div.style['z-index']);\n"
2058 + " log(div.style.color);\n"
2059 + " log(window.getComputedStyle(div, '').zIndex);\n"
2060 + " log(window.getComputedStyle(div, '')['z-index']);\n"
2061 + " log(window.getComputedStyle(div, '').color);\n"
2062 + " }\n"
2063 + "</script>\n"
2064 + "</head>\n"
2065 + "<body onload='test()'>\n"
2066 + " <div id='myDiv' class='abc'></div>\n"
2067 + "</body></html>";
2068 loadPageVerifyTitle2(html);
2069 }
2070
2071
2072
2073
2074 @Test
2075 @Alerts({"0", "0", "0", "0", "", "", "", "", "", "", "", ""})
2076 public void measureNotAttached() throws Exception {
2077 final String html = DOCTYPE_HTML
2078 + "<html><head>\n"
2079 + "<script>\n"
2080 + LOG_TITLE_FUNCTION
2081 + " function test() {\n"
2082 + " var div = document.createElement('div');\n"
2083 + " div.style.width = '100px';\n"
2084 + " div.style.height = '100px';\n"
2085 + " div.style.padding = '2px';\n"
2086 + " div.style.margin = '3px';\n"
2087
2088 + " log(div.offsetWidth);\n"
2089 + " log(div.offsetHeight);\n"
2090 + " log(div.clientWidth);\n"
2091 + " log(div.clientHeight);\n"
2092
2093 + " var style = window.getComputedStyle(div, null);\n"
2094 + " log(style.top);\n"
2095 + " log(style.width);\n"
2096 + " log(style.height);\n"
2097 + " log(style.marginRight);\n"
2098 + " log(style.display);\n"
2099 + " log(style.boxSizing);\n"
2100 + " log(style.borderRightWidth);\n"
2101 + " log(style.borderLeftWidth);\n"
2102 + " }\n"
2103 + "</script>\n"
2104 + "</head>\n"
2105 + "<body onload='test()'>\n"
2106 + "</body></html>";
2107 loadPageVerifyTitle2(html);
2108 }
2109
2110
2111
2112
2113 @Test
2114 @Alerts({"104", "104", "104", "104", "auto", "100px", "100px",
2115 "3px", "block", "content-box", "0px", "0px"})
2116 public void measureAttached() throws Exception {
2117 final String html = DOCTYPE_HTML
2118 + "<html><head>\n"
2119 + "<script>\n"
2120 + LOG_TITLE_FUNCTION
2121 + " function test() {\n"
2122 + " var div = document.createElement('div');\n"
2123 + " document.body.appendChild(div);\n"
2124 + " div.style.width = '100px';\n"
2125 + " div.style.height = '100px';\n"
2126 + " div.style.padding = '2px';\n"
2127 + " div.style.margin = '3px';\n"
2128
2129 + " log(div.offsetWidth);\n"
2130 + " log(div.offsetHeight);\n"
2131 + " log(div.clientWidth);\n"
2132 + " log(div.clientHeight);\n"
2133
2134 + " var style = window.getComputedStyle(div, null);\n"
2135 + " log(style.top);\n"
2136 + " log(style.width);\n"
2137 + " log(style.height);\n"
2138 + " log(style.marginRight);\n"
2139 + " log(style.display);\n"
2140 + " log(style.boxSizing);\n"
2141 + " log(style.borderRightWidth);\n"
2142 + " log(style.borderLeftWidth);\n"
2143 + " }\n"
2144 + "</script>\n"
2145 + "</head>\n"
2146 + "<body onload='test()'>\n"
2147 + "</body></html>";
2148 loadPageVerifyTitle2(html);
2149 }
2150
2151
2152
2153
2154 @Test
2155 @Alerts({"", "", "left", "left", "right", "right"})
2156 public void cssFloat2() throws Exception {
2157 final String html = DOCTYPE_HTML
2158 + "<html><head>\n"
2159 + "<style>\n"
2160 + " .abc { float: right }\n"
2161 + "</style>\n"
2162 + "<script>\n"
2163 + LOG_TITLE_FUNCTION
2164 + " function test() {\n"
2165 + " var div = document.createElement('div');\n"
2166 + " div.style.float = 'left';\n"
2167 + " var style = window.getComputedStyle(div, null);\n"
2168 + " log(style.float);\n"
2169 + " log(style.cssFloat);\n"
2170 + " document.body.appendChild(div);\n"
2171 + " log(style.float);\n"
2172 + " log(style.cssFloat);\n"
2173 + " div = document.getElementById('mydiv');\n"
2174 + " style = window.getComputedStyle(div, null);\n"
2175 + " log(style.float);\n"
2176 + " log(style.cssFloat);\n"
2177 + " }\n"
2178 + "</script>\n"
2179 + "</head>\n"
2180 + "<body onload='test()'>\n"
2181 + " <div id='mydiv' class='abc'></div>\n"
2182 + "</body></html>";
2183 loadPageVerifyTitle2(html);
2184 }
2185
2186
2187
2188
2189 @Test
2190 @Alerts("true")
2191 public void offsetTopTableRows() throws Exception {
2192 final String html = DOCTYPE_HTML
2193 + "<html>\n"
2194 + "<body>\n"
2195 + " <table>\n"
2196 + " <tr id='row1'><td>row1</td></tr>\n"
2197 + " <tr id='row2'><td>row2</td></tr>\n"
2198 + " </table>\n"
2199
2200 + "<script>\n"
2201 + LOG_TITLE_FUNCTION
2202 + " var r1 = document.getElementById('row1');\n"
2203 + " var r2 = document.getElementById('row2');\n"
2204 + " log(r2.offsetTop > r1.offsetTop);\n"
2205 + "</script>\n"
2206
2207 + "</body>\n"
2208 + "</html>";
2209 loadPageVerifyTitle2(html);
2210 }
2211
2212
2213
2214
2215 @Test
2216 @Alerts("true")
2217 public void offsetTopListItems() throws Exception {
2218 final String html = DOCTYPE_HTML
2219 + "<html>\n"
2220 + "<body>\n"
2221 + " <ul>\n"
2222 + " <li id='li1'>row1</li>\n"
2223 + " <li id='li2'>row2</li>\n"
2224 + " </ul>\n"
2225
2226 + "<script>\n"
2227 + LOG_TITLE_FUNCTION
2228 + " var li1 = document.getElementById('li1');\n"
2229 + " var li2 = document.getElementById('li2');\n"
2230 + " log(li2.offsetTop > li1.offsetTop);\n"
2231 + "</script>\n"
2232
2233 + "</body>\n"
2234 + "</html>";
2235 loadPageVerifyTitle2(html);
2236 }
2237
2238
2239
2240
2241 @Test
2242 @Alerts("true")
2243 public void offsetLeftAfterTable() throws Exception {
2244 final String html = DOCTYPE_HTML
2245 + "<html>\n"
2246 + "<body>\n"
2247 + " <table>\n"
2248 + " <tr><td>abcdefghijklmnopqrstuvwxyz</td></tr>\n"
2249 + " </table>\n"
2250 + " <div id='mydiv'>Heho</div>\n"
2251
2252 + "<script>\n"
2253 + LOG_TITLE_FUNCTION
2254 + " var d1 = document.getElementById('mydiv');\n"
2255 + " log(d1.offsetLeft < 10);\n"
2256 + "</script>\n"
2257
2258 + "</body>\n"
2259 + "</html>";
2260 loadPageVerifyTitle2(html);
2261 }
2262
2263
2264
2265
2266 @Test
2267 @Alerts("undefined")
2268 public void custom() throws Exception {
2269 final String html = DOCTYPE_HTML
2270 + "<html><head>\n"
2271 + "<style>\n"
2272 + " .abc { xyz: 1 }\n"
2273 + "</style>\n"
2274 + "<script>\n"
2275 + LOG_TITLE_FUNCTION
2276 + " function test() {\n"
2277 + " var div = document.getElementById('mydiv');\n"
2278 + " var style = window.getComputedStyle(div, null);\n"
2279 + " log(style.xyz);\n"
2280 + " }\n"
2281 + "</script>\n"
2282 + "</head>\n"
2283 + "<body onload='test()'>\n"
2284 + " <div id='mydiv' class='abc'></div>\n"
2285 + "</body></html>";
2286 loadPageVerifyTitle2(html);
2287 }
2288
2289
2290
2291
2292 @Test
2293 @Alerts("1")
2294 public void selector() throws Exception {
2295 final String html = DOCTYPE_HTML
2296 + "<html><head>\n"
2297 + "<script>\n"
2298 + LOG_TITLE_FUNCTION
2299 + " function test() {\n"
2300 + " log(document.querySelectorAll('div *').length);\n"
2301 + " }\n"
2302 + "</script>\n"
2303 + "</head>\n"
2304 + "<body onload='test()'>\n"
2305 + " <div id='mydiv'>\n"
2306 + " <p>p</p>\n"
2307 + " </div>\n"
2308 + "</body></html>";
2309 loadPageVerifyTitle2(html);
2310 }
2311
2312
2313
2314
2315 @Test
2316 @Alerts(DEFAULT = {"", "0px", "20%", "80px", "25%", "100px"},
2317 FF = {"", "0px", "20%", "360px", "25%", "100px"},
2318 FF_ESR = {"", "0px", "20%", "360px", "25%", "100px"})
2319 @HtmlUnitNYI(FF = {"", "0px", "20%", "80px", "25%", "100px"},
2320 FF_ESR = {"", "0px", "20%", "80px", "25%", "100px"})
2321 public void marginLeftRight() throws Exception {
2322 final String html = DOCTYPE_HTML
2323 + "<html><head><script>\n"
2324 + LOG_TITLE_FUNCTION
2325 + " function test() {\n"
2326 + " var div1 = document.getElementById('div1');\n"
2327 + " var container = document.createElement('div');\n"
2328 + " container.style.width = '400px';\n"
2329 + " div1.appendChild(container);\n"
2330 + " log(container.style.marginRight);\n"
2331 + " log(window.getComputedStyle(container, null).marginRight);\n"
2332 + "\n"
2333 + " var el = document.createElement('div');\n"
2334 + " el.style.width = '10%';\n"
2335 + " el.style.marginRight = '20%';\n"
2336 + " container.appendChild(el);\n"
2337 + " log(el.style.marginRight);\n"
2338 + " log(window.getComputedStyle(el, null).marginRight);\n"
2339 + "\n"
2340 + " el = document.createElement('div');\n"
2341 + " el.style.width = '30%';\n"
2342 + " el.style.minWidth = '300px';\n"
2343 + " el.style.marginLeft = '25%';\n"
2344 + " container.appendChild(el);\n"
2345 + " log(el.style.marginLeft);\n"
2346 + " log(window.getComputedStyle(el, null).marginLeft);\n"
2347 + " }\n"
2348 + "</script></head>\n"
2349 + "<body onload='test()'>\n"
2350 + " <div id='div1'></div>\n"
2351 + "</body></html>\n";
2352 loadPageVerifyTitle2(html);
2353 }
2354
2355
2356
2357
2358 @Test
2359 @Alerts({"", "0px", "", "0px", "50%", "100px", "50%", "100px"})
2360 @HtmlUnitNYI(CHROME = {"", "auto", "", "auto", "50%", "100px", "50%", "100px"},
2361 EDGE = {"", "auto", "", "auto", "50%", "100px", "50%", "100px"},
2362 FF = {"", "auto", "", "auto", "50%", "100px", "50%", "100px"},
2363 FF_ESR = {"", "auto", "", "auto", "50%", "100px", "50%", "100px"})
2364 public void topLeft() throws Exception {
2365 final String html = DOCTYPE_HTML
2366 + "<html><head><script>\n"
2367 + LOG_TITLE_FUNCTION
2368 + " function test() {\n"
2369 + " var div1 = document.getElementById('div1');\n"
2370 + " var parent = document.createElement('div');\n"
2371 + " parent.style = 'position: relative; width: 200px; height: 200px; margin: 0; padding: 0;"
2372 + " border-width: 0';\n"
2373 + " div1.appendChild(parent);\n"
2374 + "\n"
2375 + " var div = document.createElement('div');\n"
2376 + " div.style = 'position: absolute; width: 20px; height: 20px; top: 50%; left: 50%';\n"
2377 + " parent.appendChild(div);\n"
2378 + "\n"
2379 + " log(parent.style.top);\n"
2380 + " log(window.getComputedStyle(parent, null).top);\n"
2381 + " log(parent.style.left);\n"
2382 + " log(window.getComputedStyle(parent, null).left);\n"
2383 + " log(div.style.top);\n"
2384 + " log(window.getComputedStyle(div, null).top);\n"
2385 + " log(div.style.left);\n"
2386 + " log(window.getComputedStyle(div, null).left);\n"
2387 + " }\n"
2388 + "</script></head>\n"
2389 + "<body onload='test()'>\n"
2390 + " <div id='div1'></div>\n"
2391 + "</body></html>\n";
2392 loadPageVerifyTitle2(html);
2393 }
2394
2395
2396
2397
2398 @Test
2399 @Alerts({"10", "0"})
2400 public void borderBoxAffectsOffsetWidth() throws Exception {
2401 final String html = DOCTYPE_HTML
2402 + "<html>\n"
2403 + "<head>\n"
2404 + "<script>\n"
2405 + LOG_TITLE_FUNCTION
2406 + " function test() {\n"
2407 + " var div1 = document.getElementById('div1');\n"
2408 + " var empty = getOffsetWidth('width: 300px; height: 300px;');\n"
2409 + " var marginAndPadding = getOffsetWidth('width: 300px; height: 300px; margin: 3px; padding: 5px;');\n"
2410 + " var withBorderBox = getOffsetWidth('width: 300px; height: 300px; margin: 3px; padding: 5px;"
2411 + " box-sizing: border-box;');\n"
2412 + " log(marginAndPadding - empty);\n"
2413 + " log(withBorderBox - empty);\n"
2414 + " }\n"
2415 + " function getOffsetWidth(style) {\n"
2416 + " var d = document.createElement('div');\n"
2417 + " d.appendChild(document.createTextNode('test'));\n"
2418 + " d.style = style;\n"
2419 + " div1.appendChild(d);\n"
2420 + " var offsetWidth = d.offsetWidth;\n"
2421 + " div1.removeChild(d);\n"
2422 + " return offsetWidth;\n"
2423 + " }\n"
2424 + "</script>\n"
2425 + "</head>\n"
2426 + "<body onload='test()'>\n"
2427 + " <div id='div1'></div>\n"
2428 + "</body>\n"
2429 + "</html>\n";
2430 loadPageVerifyTitle2(html);
2431 }
2432
2433
2434
2435
2436 @Test
2437 @Alerts({"10", "0"})
2438 public void borderBoxAffectsOffsetHeight() throws Exception {
2439 final String html = DOCTYPE_HTML
2440 + "<html>\n"
2441 + "<head>\n"
2442 + "<script>\n"
2443 + LOG_TITLE_FUNCTION
2444 + " function test() {\n"
2445 + " var div1 = document.getElementById('div1');\n"
2446
2447 + " var empty = getOffsetHeight('width: 300px; height: 300px;');\n"
2448 + " var marginAndPadding = getOffsetHeight('width: 300px; height: 300px; margin: 3px; padding: 5px;');\n"
2449 + " var withBorderBox = getOffsetHeight('width: 300px; height: 300px; margin: 3px; padding: 5px;"
2450 + " box-sizing: border-box;');\n"
2451 + " log(marginAndPadding - empty);\n"
2452 + " log(withBorderBox - empty);\n"
2453 + " }\n"
2454 + " function getOffsetHeight(style) {\n"
2455 + " var d = document.createElement('div');\n"
2456 + " d.appendChild(document.createTextNode('test'));\n"
2457 + " d.style = style;\n"
2458 + " div1.appendChild(d);\n"
2459 + " var offsetHeight = d.offsetHeight;\n"
2460 + " div1.removeChild(d);\n"
2461 + " return offsetHeight;\n"
2462 + " }\n"
2463 + "</script>\n"
2464 + "</head>\n"
2465 + "<body onload='test()'>\n"
2466 + " <div id='div1'></div>\n"
2467 + "</body>\n"
2468 + "</html>\n";
2469 loadPageVerifyTitle2(html);
2470 }
2471
2472
2473
2474
2475 @Test
2476 @Alerts("10")
2477 public void offsetWidthWithDisplayInline() throws Exception {
2478 final String html = DOCTYPE_HTML
2479 + "<html><head><script>\n"
2480 + " function test() {\n"
2481 + LOG_TITLE_FUNCTION
2482 + " var div = document.createElement('div');\n"
2483 + " document.body.appendChild(div);\n"
2484 + " div.style.cssText = 'display: inline; margin:0; border: 0; padding: 5px; width: 7px';\n"
2485 + " log(div.offsetWidth);\n"
2486 + " }\n"
2487 + "</script></head>\n"
2488 + "<body onload='test()'>\n"
2489 + "</body>\n"
2490 + "</html>\n";
2491 loadPageVerifyTitle2(html);
2492 }
2493
2494
2495
2496
2497 @Test
2498 @Alerts("100")
2499 public void borderBoxAffectsOffsetWidth2() throws Exception {
2500 final String html = DOCTYPE_HTML
2501 + "<html><head><script>\n"
2502 + LOG_TITLE_FUNCTION
2503 + " function test() {\n"
2504 + " var divNormal = document.createElement('div');\n"
2505 + " divNormal.style = 'box-sizing: border-box; width: 100px; height: 100px; border: 10px solid white;"
2506 + " padding: 2px; margin: 3px';\n"
2507 + " document.body.appendChild(divNormal);\n"
2508 + "\n"
2509 + " if (window.navigator.userAgent.indexOf('Trident/') == -1) {\n"
2510 + " log(divNormal.offsetWidth);\n"
2511 + " } else {\n"
2512 + " log(divNormal.offsetWidth == window.innerWidth - 16);\n"
2513 + " }\n"
2514 + " }\n"
2515 + "</script></head>\n"
2516 + "<body onload='test()'>\n"
2517 + "</body>\n"
2518 + "</html>\n";
2519 loadPageVerifyTitle2(html);
2520 }
2521
2522
2523
2524
2525 @Test
2526 @Alerts("100")
2527 public void borderBoxAffectsOffsetHeight2() throws Exception {
2528 final String html = DOCTYPE_HTML
2529 + "<html><head><script>\n"
2530 + LOG_TITLE_FUNCTION
2531 + " function test() {\n"
2532 + " var divNormal = document.createElement('div');\n"
2533 + " divNormal.style = 'box-sizing: border-box; width: 100px; height: 100px; border: 10px solid white;"
2534 + " padding: 2px; margin: 3px';\n"
2535 + " document.body.appendChild(divNormal);\n"
2536 + "\n"
2537 + " if (window.navigator.userAgent.indexOf('Trident/') == -1) {\n"
2538 + " log(divNormal.offsetHeight);\n"
2539 + " } else {\n"
2540 + " log(divNormal.offsetHeight);\n"
2541 + " }\n"
2542 + " }\n"
2543 + "</script></head>\n"
2544 + "<body onload='test()'>\n"
2545 + "</body>\n"
2546 + "</html>\n";
2547 loadPageVerifyTitle2(html);
2548 }
2549
2550
2551
2552
2553 @Test
2554 @Alerts({"8px", "0", "16"})
2555 @HtmlUnitNYI(CHROME = {"0px", "0", "16"},
2556 EDGE = {"0px", "0", "16"},
2557 FF = {"0px", "0", "16"},
2558 FF_ESR = {"0px", "0", "16"})
2559 public void bodyOffsetWidth() throws Exception {
2560 final String html = DOCTYPE_HTML
2561 + "<html><head><script>\n"
2562 + LOG_TITLE_FUNCTION
2563 + " function test() {\n"
2564 + " var win = window.innerWidth;\n"
2565 + " var html = document.documentElement.offsetWidth;\n"
2566 + " var body = document.body.offsetWidth;\n"
2567 + " log(window.getComputedStyle(document.body, null).margin);\n"
2568 + " log(win - html);\n"
2569 + " log(win - body);\n"
2570 + " }\n"
2571 + "</script></head>\n"
2572 + "<body onload='test()'>\n"
2573 + "</body>\n"
2574 + "</html>\n";
2575 loadPageVerifyTitle2(html);
2576 }
2577
2578
2579
2580
2581 @Test
2582 @Alerts({"0", "24"})
2583 @HtmlUnitNYI(CHROME = {"0", "18"},
2584 EDGE = {"0", "18"},
2585 FF = {"0", "18"},
2586 FF_ESR = {"0", "18"})
2587 public void offsetHeightTable() throws Exception {
2588 final String html = DOCTYPE_HTML
2589 + "<html><head>\n"
2590 + "<script>\n"
2591 + LOG_TITLE_FUNCTION
2592 + " function test() {\n"
2593 + " var table = document.createElement('table');\n"
2594 + " table.style.fontSize = '16px';\n"
2595 + " document.getElementById('myDiv').appendChild(table);\n"
2596 + " log(table.offsetHeight);\n"
2597 + "\n"
2598 + " var tr = document.createElement('tr');\n"
2599 + " table.appendChild(tr);\n"
2600 + " var td = document.createElement('td');\n"
2601 + " tr.appendChild(td);\n"
2602 + " td.appendChild(document.createTextNode('DATA'));\n"
2603 + " log(table.offsetHeight);\n"
2604 + " }\n"
2605 + "</script>\n"
2606 + "<body onload='test()'>\n"
2607 + " <div id='myDiv'></div>\n"
2608 + "</body></html>\n";
2609 loadPageVerifyTitle2(html);
2610 }
2611
2612
2613
2614
2615 @Test
2616 @Alerts({"18px", "18px"})
2617 public void height() throws Exception {
2618 final String html = DOCTYPE_HTML
2619 + "<html>\n"
2620 + "<head>\n"
2621 + " <style>\n"
2622 + " .autoheight {\n"
2623 + " height: auto;\n"
2624 + " }\n"
2625 + " </style>\n"
2626 + "<script>\n"
2627 + LOG_TITLE_FUNCTION
2628 + " function test() {\n"
2629 + " var div = document.getElementById('myDiv');\n"
2630 + " var style = window.getComputedStyle(div, null);\n"
2631 + " log(style.height);\n"
2632 + " div.className = 'autoheight';\n"
2633 + " log(style.height);\n"
2634 + " }\n"
2635 + "</script></head>\n"
2636 + "<body onload='test()'>\n"
2637 + " <div id='myDiv'>A</div>\n"
2638 + "</body></html>\n";
2639 loadPageVerifyTitle2(html);
2640 }
2641
2642
2643
2644
2645 @Test
2646 @Alerts({"18", "18px", "36", "36px", "54", "54px"})
2647 public void heightManyLines() throws Exception {
2648 final String html = DOCTYPE_HTML
2649 + "<html>\n"
2650 + "<head><script>\n"
2651 + LOG_TITLE_FUNCTION
2652 + " function test() {\n"
2653 + " var div = document.getElementById('test1');\n"
2654 + " log(div.offsetHeight);\n"
2655 + " log(window.getComputedStyle(div, null).height);\n"
2656 + " div = document.getElementById('test2');\n"
2657 + " log(div.offsetHeight);\n"
2658 + " log(window.getComputedStyle(div, null).height);\n"
2659 + " div = document.getElementById('test3');\n"
2660 + " log(div.offsetHeight);\n"
2661 + " log(window.getComputedStyle(div, null).height);\n"
2662 + " }\n"
2663 + "</script></head>\n"
2664 + "<body onload='test()'>\n"
2665 + " <div id=\"test1\">This is a long string of text.</div>\n"
2666 + " <div id=\"test2\">This is a long string of text.<br>Some more text<br></div>\n"
2667 + " <div id=\"test3\">This is a long string of text.<br>Some more text<br>and some more...</div>\n"
2668 + "</body></html>\n";
2669 loadPageVerifyTitle2(html);
2670 }
2671
2672
2673
2674
2675 @Test
2676 @Alerts(DEFAULT = "0 0",
2677 CHROME = "0 15",
2678 EDGE = "0 15")
2679 @HtmlUnitNYI(CHROME = "0 0",
2680 EDGE = "0 0")
2681 public void iFrameInnerWidth() throws Exception {
2682 final String html = DOCTYPE_HTML
2683 + "<html><head>\n"
2684 + "<script>\n"
2685 + " function test() {\n"
2686 + " var iframe = document.createElement('iframe');\n"
2687 + " document.body.appendChild(iframe);\n"
2688 + " iframe.style.cssText = 'width: 500px; height: 500px;';\n"
2689 + " iframe.contentWindow.location = 'test2.html';\n"
2690 + " var win = iframe.contentWindow;\n"
2691 + " document.title += ' ' + (win.innerWidth - win.document.documentElement.clientWidth);\n"
2692 + " iframe.onload = function() {\n"
2693 + " document.title += ' ' + (win.innerWidth - win.document.documentElement.clientWidth);\n"
2694 + " }\n"
2695 + " }\n"
2696 + "</script></head>\n"
2697 + "<body onload='test()'>\n"
2698 + "</body></html>\n";
2699 getMockWebConnection().setDefaultResponse(DOCTYPE_HTML
2700 + "<html><head>\n"
2701 + "<style>\n"
2702 + " body {\n"
2703 + " width: 600px;\n"
2704 + " height: 600px;\n"
2705 + " }\n"
2706 + "</style>\n"
2707 + "</head>\n"
2708 + "<body></body>\n"
2709 + "</html>");
2710
2711 final WebDriver driver = loadPage2(html);
2712 assertTitle(driver, getExpectedAlerts()[0]);
2713 }
2714
2715
2716
2717
2718 @Test
2719 @Alerts({ "", "auto" })
2720 public void getHeightInvisible() throws Exception {
2721 final String html = DOCTYPE_HTML
2722 + "<html><head>\n"
2723 + "<script>\n"
2724 + LOG_TITLE_FUNCTION
2725 + " function test() {\n"
2726 + " var node = document.getElementById('outer');\n"
2727 + " var style = node.style;\n"
2728 + " log(style.height);\n"
2729 + " var style = window.getComputedStyle(node, null);\n"
2730 + " log(style.height);\n" + " }\n"
2731 + "</script>\n"
2732 + "</head>\n"
2733 + "<body onload='test()'>\n"
2734 + " <div id='outer' style='display: none'>\n"
2735 + " <div>line 1</div>\n"
2736 + " <div>line 2</div>\n"
2737 + " </div>\n"
2738 + "</body></html>";
2739 loadPageVerifyTitle2(html);
2740 }
2741
2742
2743
2744
2745 @Test
2746 @Alerts(DEFAULT = {"\"@\"", "\"@\"", "\"@\"", "\"#\"", "\"#\"", "\"#\""},
2747 FF = {"\"@\"", "normal", "\"@\"", "\"#\"", "normal", "\"#\""},
2748 FF_ESR = {"\"@\"", "normal", "\"@\"", "\"#\"", "normal", "\"#\""})
2749 public void pseudoBefore() throws Exception {
2750 final String html = DOCTYPE_HTML
2751 + "<html><head>\n"
2752 + "<style type='text/css'>\n"
2753 + " /* <![CDATA[ */\n"
2754 + " #myDiv:before { content: '@' }\n"
2755 + " #myDiv2::before { content: '#' }\n"
2756 + " /* ]]> */\n"
2757 + "</style>\n"
2758 + "<script>\n"
2759 + LOG_TITLE_FUNCTION
2760 + " function test() {\n"
2761 + " var node = document.getElementById('myDiv');\n"
2762 + " var style = window.getComputedStyle(node, ':before');\n"
2763 + " log(style.content);\n"
2764 + " var style = window.getComputedStyle(node, 'before');\n"
2765 + " log(style.content);\n"
2766 + " var style = window.getComputedStyle(node, '::before');\n"
2767 + " log(style.content);\n"
2768
2769 + " node = document.getElementById('myDiv2');\n"
2770 + " var style = window.getComputedStyle(node, ':before');\n"
2771 + " log(style.content);\n"
2772 + " var style = window.getComputedStyle(node, 'before');\n"
2773 + " log(style.content);\n"
2774 + " var style = window.getComputedStyle(node, '::before');\n"
2775 + " log(style.content);\n"
2776 + " }\n"
2777 + "</script>\n"
2778 + "</head>\n"
2779 + "<body onload='test()'>\n"
2780 + " <div id='myDiv' >Test</div>\n"
2781 + " <div id='myDiv2' >Test</div>\n"
2782 + "</body></html>";
2783 loadPageVerifyTitle2(html);
2784 }
2785
2786
2787
2788
2789 @Test
2790 @Alerts("true")
2791 public void calculateContentHeightAfterSVG() throws Exception {
2792 final String html = DOCTYPE_HTML
2793 + "<html><body>\n"
2794 + "<svg/>\n"
2795 + "<img />\n"
2796 + "<textarea id='myTextarea' cols='120' rows='20'></textarea>\n"
2797 + "<script>\n"
2798 + LOG_TITLE_FUNCTION
2799 + " log(document.body.offsetHeight > 10);\n"
2800 + "</script>\n"
2801 + "</body></html>";
2802 loadPageVerifyTitle2(html);
2803 }
2804
2805
2806
2807
2808 @Test
2809 @Alerts("131")
2810 public void combineStyles() throws Exception {
2811 final String html = DOCTYPE_HTML
2812 + "<html>\n"
2813 + "<head>\n"
2814 + "<style type='text/css'>\n"
2815 + " div { margin: 10px 20px 30px 40px; }\n"
2816 + "</style>\n"
2817 + "<script>\n"
2818 + LOG_TITLE_FUNCTION
2819 + " function test() {\n"
2820 + " var div = document.getElementById('div1');\n"
2821 + " var left = div.style.marginLeft;\n"
2822 + " log(div.offsetLeft);\n"
2823 + " }\n"
2824 + "</script>\n"
2825 + "</head>\n"
2826 + "<body onload='test()'>\n"
2827 + " <div id='div1' style='margin-left: 123px'></div>\n"
2828 + "</body></html>\n";
2829
2830 loadPageVerifyTitle2(html);
2831 }
2832
2833
2834
2835
2836 @Test
2837 @Alerts("48")
2838 public void combineStylesImportant() throws Exception {
2839 final String html = DOCTYPE_HTML
2840 + "<html>\n"
2841 + "<head>\n"
2842 + "<style type='text/css'>\n"
2843 + " div { margin: 10px 20px 30px 40px !important; }\n"
2844 + "</style>\n"
2845 + "<script>\n"
2846 + LOG_TITLE_FUNCTION
2847 + " function test() {\n"
2848 + " var div = document.getElementById('div1');\n"
2849 + " var left = div.style.marginLeft;\n"
2850 + " log(div.offsetLeft);\n"
2851 + " }\n"
2852 + "</script>\n"
2853 + "</head>\n"
2854 + "<body onload='test()'>\n"
2855 + " <div id='div1' style='margin-left: 123px'></div>\n"
2856 + "</body></html>\n";
2857
2858 loadPageVerifyTitle2(html);
2859 }
2860
2861
2862
2863
2864 @Test
2865 @Alerts("23")
2866 public void combineStylesBrowserDefaults() throws Exception {
2867 final String html = DOCTYPE_HTML
2868 + "<html>\n"
2869 + "<head>\n"
2870 + "<style type='text/css'>\n"
2871 + " body { margin: 3px; }\n"
2872 + " div { margin: 20px; }\n"
2873 + "</style>\n"
2874 + "<script>\n"
2875 + LOG_TITLE_FUNCTION
2876 + " function test() {\n"
2877 + " var div = document.getElementById('div1');\n"
2878 + " var left = div.style.marginLeft;\n"
2879 + " log(div.offsetLeft);\n"
2880 + " }\n"
2881 + "</script>\n"
2882 + "</head>\n"
2883 + "<body onload='test()'>\n"
2884 + " <div id='div1'></div>\n"
2885 + "</body></html>\n";
2886
2887 loadPageVerifyTitle2(html);
2888 }
2889
2890
2891
2892
2893 @Test
2894 @Alerts("true")
2895 public void boundingClientRectIgnoreSiblingWhitespace() throws Exception {
2896 final String html = DOCTYPE_HTML
2897 + "<html><body>\n"
2898 + "<table>\n"
2899 + "<tr>\n"
2900 + " <td> \n\t <div id='a'>a</div></td>\n"
2901 + "</tr>\n"
2902 + "</table>\n"
2903 + "<script>\n"
2904 + LOG_TITLE_FUNCTION
2905 + " var e = document.getElementById('a');\n"
2906 + " log(e.getBoundingClientRect().left < 12);\n"
2907 + "</script>\n"
2908 + "</body></html>";
2909 loadPageVerifyTitle2(html);
2910 }
2911
2912
2913
2914
2915 @Test
2916 @Alerts("true")
2917 public void boundingClientRectTopOnlyHasToTakeCareOfPreviousBlockSibling() throws Exception {
2918 final String html = DOCTYPE_HTML
2919 + "<html><body>\n"
2920 + "<div style='height: 100'>100</div>\n"
2921 + "<span style='height: 200'>200</span>\n"
2922 + "<span id='tester'>tester</span>\n"
2923
2924 + "<script>\n"
2925 + LOG_TITLE_FUNCTION
2926 + " var e = document.getElementById('tester');\n"
2927 + " log(e.getBoundingClientRect().top < 120);\n"
2928 + "</script>\n"
2929 + "</body></html>";
2930 loadPageVerifyTitle2(html);
2931 }
2932
2933
2934
2935
2936
2937
2938 @Test
2939 @Alerts("true")
2940 public void offsetLeft() throws Exception {
2941 final String html = DOCTYPE_HTML
2942 + "<html>\n"
2943 + "<body style='padding:'>\n"
2944 + " <div id='mydiv' >Heho</div>\n"
2945
2946 + "<script>\n"
2947 + LOG_TITLE_FUNCTION
2948 + " var d1 = document.getElementById('mydiv');\n"
2949 + " log(d1.offsetLeft < 10);\n"
2950 + "</script>\n"
2951
2952 + "</body>\n"
2953 + "</html>";
2954 loadPageVerifyTitle2(html);
2955 }
2956
2957
2958
2959
2960 @Test
2961 @Alerts({",", "0,0", "auto,auto"})
2962 public void scriptWidthAndHeight() throws Exception {
2963 final String html = DOCTYPE_HTML
2964 + "<html><body onload='test()'>\n"
2965 + "<script id='e1'>\n"
2966 + LOG_TITLE_FUNCTION
2967 + " function test() {\n"
2968 + " var e1 = document.getElementById('e1');\n"
2969 + " var s1 = window.getComputedStyle(e1, null);\n"
2970 + " log(e1.style.width + ',' + e1.style.height);\n"
2971 + " log(e1.offsetWidth + ',' + e1.offsetHeight);\n"
2972 + " log(s1.width + ',' + s1.height);\n"
2973 + " }\n"
2974 + "</script>\n"
2975 + "</body></html>";
2976 loadPageVerifyTitle2(html);
2977 }
2978
2979
2980
2981
2982 @Test
2983 @Alerts("40")
2984 @HtmlUnitNYI(CHROME = "1256",
2985 EDGE = "1256",
2986 FF = "1256",
2987 FF_ESR = "1256")
2988 public void widthBlockElements() throws Exception {
2989 final String content = DOCTYPE_HTML
2990 + "<html><head><script>\n"
2991 + LOG_TITLE_FUNCTION
2992 + " function test() {\n"
2993 + " var myDiv = document.getElementById('myDiv');\n"
2994 + " log(myDiv.offsetWidth);\n"
2995 + " }\n"
2996 + "</script></head><body onload='test()'>\n"
2997 + "<div style='display: inline-block'>\n"
2998 + " <div id='myDiv'>\n"
2999 + " <div style='width: 40px'>\n"
3000 + " </div>\n"
3001 + " </div>\n"
3002 + "</div>";
3003
3004 loadPageVerifyTitle2(content);
3005 }
3006
3007
3008
3009
3010 @Alerts("0")
3011 @Test
3012 public void widthEmptyInlineContent() throws Exception {
3013 final String content = DOCTYPE_HTML
3014 + "<html><head><script>\n"
3015 + LOG_TITLE_FUNCTION
3016 + " function test() {\n"
3017 + " var myDiv = document.getElementById('myDiv');\n"
3018 + " log(myDiv.offsetWidth);\n"
3019 + " }\n"
3020 + "</script></head><body onload='test()'>\n"
3021 + "<div id='myDiv' style='display: inline-block'>\n"
3022 + " <div style='display: none; width: 40px'>hidden elements should have zero width</div>\n"
3023 + " <script>console.log('script elements should have zero width')</script>\n"
3024 + "</div></body></html>";
3025
3026 loadPageVerifyTitle2(content);
3027 }
3028
3029
3030
3031
3032 @Test
3033 @Alerts("55")
3034 public void widthExplicitInlineContent() throws Exception {
3035 final String content = DOCTYPE_HTML
3036 + "<html><head><script>\n"
3037 + LOG_TITLE_FUNCTION
3038 + " function test() {\n"
3039 + " var myDiv = document.getElementById('myDiv');\n"
3040 + " log(myDiv.offsetWidth);\n"
3041 + " }\n"
3042 + "</script></head><body onload='test()'>\n"
3043 + "<div id='myDiv' style='display: inline-block'>\n"
3044 + " <div style='width: 55px'>"
3045 + " <div style='width: 40px'></div>\n"
3046 + " </div>"
3047 + "</div>";
3048
3049 loadPageVerifyTitle2(content);
3050 }
3051
3052
3053
3054
3055 @Test
3056 @Alerts("55")
3057 public void widthWhitespaceBetweenTags() throws Exception {
3058 final String content = DOCTYPE_HTML
3059 + "<html><head><script>\n"
3060 + LOG_TITLE_FUNCTION
3061 + " function test() {\n"
3062 + " var myDiv = document.getElementById('myDiv');\n"
3063 + " log(myDiv.offsetWidth);\n"
3064 + " }\n"
3065 + "</script></head><body onload='test()'>\n"
3066 + "<div id='myDiv' style='display: inline-block'>\n "
3067 + " <div style='width: 55px'></div> "
3068 + " </div>";
3069
3070 loadPageVerifyTitle2(content);
3071 }
3072
3073
3074
3075
3076 @Test
3077 @Alerts("true")
3078 public void widthWhitespaceSequence() throws Exception {
3079 final String content = DOCTYPE_HTML
3080 + "<html><head><script>\n"
3081 + LOG_TITLE_FUNCTION
3082 + " function test() {\n"
3083 + " var myDiv = document.getElementById('myDiv');\n"
3084 + " log(myDiv.offsetWidth < 100);\n"
3085 + " }\n"
3086 + "</script></head><body onload='test()'>\n"
3087 + "<div id='myDiv' style='display: inline-block; font-size: 14px'>\n"
3088
3089
3090 + " Hello World "
3091 + "</div>";
3092 loadPageVerifyTitle2(content);
3093 }
3094
3095
3096
3097
3098 @Test
3099 @Alerts("0")
3100 public void getOffsetHeightInvalidSelector() throws Exception {
3101 final String html = DOCTYPE_HTML
3102 + "<html><body>\n"
3103
3104 + "<style>\n"
3105 + " *:not(:invalid-pseudo) { background-color: #FFFFFF; }\n"
3106 + "</style>\n"
3107
3108 + "<div id='myDiv'></div>\n"
3109
3110 + "<script>\n"
3111 + LOG_TITLE_FUNCTION
3112 + " var div = document.getElementById('myDiv');\n"
3113 + " var offHeight = div.offsetHeight;\n"
3114 + " log(offHeight);\n"
3115 + "</script>\n"
3116
3117 + "</body></html>";
3118
3119 loadPageVerifyTitle2(html);
3120 }
3121
3122
3123
3124
3125 @Test
3126 @Alerts({"function values() { [native code] }", "no for..of", "true"})
3127 public void iterator() throws Exception {
3128 final String html = DOCTYPE_HTML
3129 + "<html><head>\n"
3130 + "</head>\n"
3131 + "<script>\n"
3132 + LOG_TITLE_FUNCTION
3133 + " function test() {\n"
3134 + " var style = window.getComputedStyle(document.body, null);\n"
3135
3136 + " if (typeof Symbol != 'undefined') {\n"
3137 + " log(style[Symbol.iterator]);\n"
3138 + " }\n"
3139
3140 + " if (!style.forEach) {\n"
3141 + " log('no for..of');\n"
3142 + " }\n"
3143
3144 + " if (typeof Symbol === 'undefined') {\n"
3145 + " return;\n"
3146 + " }\n"
3147
3148 + " var count = 0;\n"
3149 + " for (var i of style) {\n"
3150 + " count++;\n"
3151 + " }\n"
3152 + " log(count > 0);"
3153 + " }\n"
3154 + "</script>\n"
3155 + "</head><body onload='test()' style='display: inline'>\n"
3156 + " <div></div>\n"
3157 + "</body></html>";
3158
3159 loadPageVerifyTitle2(html);
3160 }
3161
3162
3163
3164
3165 @Test
3166 @Alerts("none")
3167 public void hidden() throws Exception {
3168 final String html = DOCTYPE_HTML
3169 + "<html><body>\n"
3170 + "<p id='p1' hidden>p1</p>\n"
3171
3172 + "<script>\n"
3173 + LOG_TITLE_FUNCTION
3174 + "var p1 = document.getElementById('p1');\n"
3175 + "var style = document.defaultView.getComputedStyle(p1, null);\n"
3176 + "log(style.display);\n"
3177 + "</script>\n"
3178 + "</body></html>";
3179
3180 loadPageVerifyTitle2(html);
3181 }
3182
3183
3184
3185
3186 @Test
3187 @Alerts("none")
3188 public void insideHidden() throws Exception {
3189 final String html = DOCTYPE_HTML
3190 + "<html><body>\n"
3191 + "<p hidden>\n"
3192 + " <p id='p1' hidden>p1</p>\n"
3193 + "</p>\n"
3194
3195 + "<script>\n"
3196 + LOG_TITLE_FUNCTION
3197 + "var p1 = document.getElementById('p1');\n"
3198 + "var style = document.defaultView.getComputedStyle(p1, null);\n"
3199 + "log(style.display);\n"
3200 + "</script>\n"
3201 + "</body></html>";
3202
3203 loadPageVerifyTitle2(html);
3204 }
3205
3206
3207
3208
3209 @Test
3210 @Alerts("0s")
3211 public void animationDuration() throws Exception {
3212 final String html = DOCTYPE_HTML
3213 + "<html><body>\n"
3214
3215 + "<div id='myDiv'>HtmlUnit</div>\n"
3216
3217 + "<script>\n"
3218 + LOG_TITLE_FUNCTION
3219 + " var div = document.getElementById('myDiv');\n"
3220 + " var decl = window.getComputedStyle(div, null);\n"
3221 + " log(decl.animationDuration);\n"
3222 + "</script>\n"
3223
3224 + "</body></html>";
3225
3226 loadPageVerifyTitle2(html);
3227 }
3228
3229
3230
3231
3232
3233 @Test
3234 @Alerts({"0px", "0px", "18px", "18px", "auto", "auto"})
3235 public void blockSize() throws Exception {
3236 final String html = DOCTYPE_HTML
3237 + "<html>\n"
3238 + "<head>\n"
3239 + "<script>\n"
3240 + LOG_TITLE_FUNCTION
3241 + " function test() {\n"
3242 + " var d = document.getElementById('myDivEmpty');\n"
3243 + " var style = window.getComputedStyle(d, null);\n"
3244 + " log(style['blockSize']);\n"
3245 + " log(style.blockSize);\n"
3246
3247 + " d = document.getElementById('myDivText');\n"
3248 + " style = window.getComputedStyle(d, null);\n"
3249 + " log(style['blockSize']);\n"
3250 + " log(style.blockSize);\n"
3251
3252 + " d = document.getElementById('myDivNone');\n"
3253 + " style = window.getComputedStyle(d, null);\n"
3254 + " log(style['blockSize']);\n"
3255 + " log(style.blockSize);\n"
3256 + " }\n"
3257 + "</script>\n"
3258 + "</head>\n"
3259 + "<body onload='test()'>\n"
3260 + " <div id='myDivEmpty'></div>\n"
3261 + " <div id='myDivText'>HtmlUnit</div>\n"
3262 + " <div id='myDivNone' style='display: none'>A<br>B</div>\n"
3263 + "</body></html>";
3264
3265 loadPageVerifyTitle2(html);
3266 }
3267 }