| <!DOCTYPE html> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <style> |
| .parent { |
| line-height: 0px; // No spacing between the lines. |
| } |
| .sibling { |
| background-color: purple; |
| display: inline-block; |
| width: 25px; |
| height: 50px; |
| } |
| </style> |
| <!-- These are on a single line to prevent whitespace Text nodes from affecting layout. --> |
| <div id="parent1" class="parent" style="width: 200px"><iframe id="iframe1" seamless style="display: inline" src="resources/two-inline-blocks.html"></iframe><div class="sibling"></div></div> |
| <div id="parent2" class="parent" style="width: 100px"><iframe id="iframe2" seamless style="display: inline" src="resources/two-inline-blocks.html"></iframe><div class="sibling"></div></div> |
| <script> |
| debug("Test that inline seamless iframes 'shrink-wrap' their contents like inline-blocks do.") |
| window.onload = function () { |
| window.parent1 = document.getElementById("parent1"); |
| window.parent2 = document.getElementById("parent2"); |
| window.iframe1 = document.getElementById("iframe1"); |
| window.iframe2 = document.getElementById("iframe2"); |
| |
| // Seamless iframes behave like inline blocks when marked inline. |
| shouldBeEqualToString("window.getComputedStyle(iframe1).display", "inline-block"); |
| shouldBeEqualToString("window.getComputedStyle(iframe2).display", "inline-block"); |
| |
| // Both iframes will "shrinkwrap" around their content as they are display: inline. |
| // iframe1 will not wrap, but iframe2 will. |
| // The inline should not prevent the purple block from sitting on the same line in the first example. |
| shouldBeEqualToString("window.getComputedStyle(iframe1).width", "150px"); |
| shouldBeEqualToString("window.getComputedStyle(iframe1).height", "50px"); |
| shouldBeEqualToString("window.getComputedStyle(parent1).height", "50px"); |
| |
| shouldBeEqualToString("window.getComputedStyle(iframe2).width", "100px"); |
| shouldBeEqualToString("window.getComputedStyle(iframe2).height", "100px"); |
| shouldBeEqualToString("window.getComputedStyle(parent2).height", "150px"); |
| } |
| </script> |
