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