| <!DOCTYPE html> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <div id="parent" style="width: 200px; height: 200px;"> |
| <iframe id="iframe" seamless src="resources/square.html"></iframe> |
| </div> |
| <script> |
| debug("Test basic seamless auto-sizing-to-content functionality.") |
| window.onload = function () { |
| window.iframe = document.getElementById("iframe"); |
| shouldBeTrue("iframe.seamless"); |
| |
| // Seamless iframes are blocks, filling their parent width |
| // and setting their height to that of their children. |
| shouldBeEqualToString("window.getComputedStyle(iframe).display", "block"); |
| |
| // Spec: In visual media, in a CSS-supporting user agent: the user agent |
| // should set the intrinsic width of the iframe to the width that the element |
| // would have if it was a non-replaced block-level element with 'width: auto'. |
| shouldBeEqualToString("window.getComputedStyle(iframe).width", "200px"); |
| |
| // Spec: In visual media, in a CSS-supporting user agent: the user agent |
| // should set the intrinsic height of the iframe to the height of the bounding |
| // box around the content rendered in the iframe at its current width... |
| shouldBeEqualToString("window.getComputedStyle(iframe).height", "100px"); |
| |
| // Make sure dynamic updates work too. |
| iframe.contentDocument.documentElement.style.height = "200px"; |
| shouldBeEqualToString("window.getComputedStyle(iframe).height", "200px"); |
| |
| window.parentDiv = document.getElementById("parent"); |
| window.parentDiv.style.width = "100px"; |
| shouldBeEqualToString("window.getComputedStyle(iframe).width", "100px"); |
| } |
| </script> |
