OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <script src="../../../resources/js-test.js"></script> | |
3 <style> | |
4 .parent { | |
5 line-height: 0px; // No spacing between the lines. | |
6 } | |
7 .sibling { | |
8 background-color: purple; | |
9 display: inline-block; | |
10 width: 25px; | |
11 height: 50px; | |
12 } | |
13 </style> | |
14 <!-- These are on a single line to prevent whitespace Text nodes from affecting
layout. --> | |
15 <div id="parent1" class="parent" style="width: 200px"><iframe id="iframe1" seaml
ess style="display: inline" src="resources/two-inline-blocks.html"></iframe><div
class="sibling"></div></div> | |
16 <div id="parent2" class="parent" style="width: 100px"><iframe id="iframe2" seaml
ess style="display: inline" src="resources/two-inline-blocks.html"></iframe><div
class="sibling"></div></div> | |
17 <script> | |
18 debug("Test that inline seamless iframes 'shrink-wrap' their contents like inlin
e-blocks do.") | |
19 window.onload = function () { | |
20 window.parent1 = document.getElementById("parent1"); | |
21 window.parent2 = document.getElementById("parent2"); | |
22 window.iframe1 = document.getElementById("iframe1"); | |
23 window.iframe2 = document.getElementById("iframe2"); | |
24 | |
25 // Seamless iframes behave like inline blocks when marked inline. | |
26 shouldBeEqualToString("window.getComputedStyle(iframe1).display", "inline-bl
ock"); | |
27 shouldBeEqualToString("window.getComputedStyle(iframe2).display", "inline-bl
ock"); | |
28 | |
29 // Both iframes will "shrinkwrap" around their content as they are display:
inline. | |
30 // iframe1 will not wrap, but iframe2 will. | |
31 // The inline should not prevent the purple block from sitting on the same l
ine in the first example. | |
32 shouldBeEqualToString("window.getComputedStyle(iframe1).width", "150px"); | |
33 shouldBeEqualToString("window.getComputedStyle(iframe1).height", "50px"); | |
34 shouldBeEqualToString("window.getComputedStyle(parent1).height", "50px"); | |
35 | |
36 shouldBeEqualToString("window.getComputedStyle(iframe2).width", "100px"); | |
37 shouldBeEqualToString("window.getComputedStyle(iframe2).height", "100px"); | |
38 shouldBeEqualToString("window.getComputedStyle(parent2).height", "150px"); | |
39 } | |
40 </script> | |
OLD | NEW |